Category: React

Sometimes, we want to prevent form submission with React.

In this article, we’ll look at how to prevent form submission with React.

How to prevent form submission with React?

To prevent form submission with React, we call e.preventDefault in the form element’s onSubmit handler.

For instance, we write

<form onSubmit={(e) => e.preventDefault()}>
  <button onClick={handleClick}>Click Me</button>
</form>;

to add a form with the onSubmit prop set to a function that calls e.preventDefault to prevent form submission.

We set the button’s onClick prop to the handleClick function to run it when we click the button.

Conclusion

To prevent form submission with React, we call e.preventDefault in the form element’s onSubmit handler.

Sometimes, we want to access store state in React Redux and JavaScript.

In this article, we’ll look at how to access store state in React Redux and JavaScript.

How to access store state in React Redux and JavaScript?

To access store state in React Redux and JavaScript, we can use the useSelector hook.

For instance, we write

import { useSelector } from "react-redux";

export const useEmployees = () => {
  return useSelector((state) => state.employees);
};

to create the useEmployees hook.

In it, we call the useSelector hook that select the employees state from the Redux store.

Then, we write

const Comp = () => {
  const { employees } = useEmployees();
  //...
};

to call the useEmployees hook in the Comp component to get the employees from the store.

Conclusion

To access store state in React Redux and JavaScript, we can use the useSelector hook.

Sometimes, we want to set port in Next.js.

In this article, we’ll look at how to set port in Next.js.

How to set port in Next.js?

To set port in Next.js, we can use the -p option.

For instance, in package.json, we write

{
  //...
  "scripts": {
    "dev": "next -p 8080"
  }
  //...
}

to add -p 8080 to the dev script command to run the Next.js project on port 8080.

Conclusion

To set port in Next.js, we can use the -p option.

Sometimes, we want to add favicon with React and Webpack.

In this article, we’ll look at how to add favicon with React and Webpack.

How to add favicon with React and Webpack?

To add favicon with React and Webpack, we can use the react-favicon library.

To install it, we run

npm install react-favicon

Then we use it by writing

import Favicon from "react-favicon";
//...

ReactDOM.render(
  <div>
    <Favicon url="/path/to/favicon.ico" />
  </div>,
  document.querySelector(".react")
);

to add the Favicon component and set the favicon location with the path prop.

Conclusion

To add favicon with React and Webpack, we can use the react-favicon library.

Sometimes, we want to use dotenv in a React project.

In this article, we’ll look at how to use dotenv in a React project.

How to use dotenv in a React project?

To use dotenv in a React project, we create our React project with Create React App.

Then we can access environment variables from process.env.

We run

npx create-react-app my-app
cd my-app
npm start

to create the my-app project with create-react-app.

Then we can put our environment variables in an .env file.

And then we can access the variable with

const BASE_URL = process.env.REACT_APP_BASE_URL;

We can access any environment variable in .env that starts with REACT_APP_.

Conclusion

To use dotenv in a React project, we create our React project with Create React App.

Then we can access environment variables from process.env.