React Introduction
Use the Production Build
By installing React Developer Tools for Chrome, you can check whether your build process is set up correctly or not.
When you visit your site with React in production mode, the icon will have a dark background:
And When it is in development mode, the icon will have a red background:
Let’s take some instruction for building your app for production
Create React App
For creating a new app run this command:
And For normal development, use npm start.
Single-File Builds
You can also use production-ready versions of React and React DOM as single files:
Now we will discuss React Hooks
The State Hook
The introduction page used this example to get familiar with Hooks:
- For functional Component
2. For Class Component
If you used classes in React before, this code should look familiar:
The state starts as { count: 0 }, and we increment state.count when the user clicks a button by calling this.setState(). We’ll use snippets from this class throughout the page.
Note
You might be wondering why we’re using a counter here instead of a more realistic example. This is to help us focus on the API while we’re still making our first steps with Hooks.
The Effect Hook
- For functional Component
Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects. Whether or not you’re used to calling these operations “side effects” (or just “effects”), you’ve likely performed them in your components before.
2. For class Component
In React class components, the render method itself shouldn’t cause side effects. It would be too early — we typically want to perform our effects after React has updated the DOM.
Basic Hooks
useState:
The rules of declaration to useState is like this:
Functional updates
You can pass a function to setState, if the new state is computed using the previous stateThe function will receive the previous value, and return an updated value. Here’s an example of a counter component that uses both forms of setState:
