Core Concepts of React

React is one of the most popular front-end technology in 2021. Learning it for the web will surely enhance your knowledge and you will have a better grasp of the front-end dev world. In this article, I will be discussing core react concepts.

1. A short brief about JSX

React JSX means javascript XML. It gives us the ability to write HTML code in react. We can write smoothly markup and logic at react file for JSX. JSX allow us put HTML element on DOM without createElement() and appendChild(). It converts HTML tags to react elements.

2. This is not a framework

Many people get confused about it. React is known as a small library of Javascript. It’s not as big and vast as a framework. React only focuses on building user interfaces. You may mix it up with other 3rd party libraries. It is a javascript library that is declarative, efficient, and flexible at the same time.

3. Virtual Dom

Virtual DOM is a process where ideal or virtual representation kept in memory and this process is called Virtual DOM. Link a library with real DOM such as a reactDOM. VDOM has power, properties, method same as DOM. VDOM statement looks like a tree.

4. How Virtual DOM works

React makes two copies from real DOM. When needing any change to application or element, a first copy goes to re-render. After re-rendering the first copy compares to the second copy. And isolate the change. Finally, update the only change section on real DOM.

5. React Props

Props is a special keyword in React, which means for properties and it is used for passing data from one component to another. Since React is a component-based library, props can only be passed to components in the only parent to child.

6. React Hooks

React hooks allows you to use state and other React features without writing class component. Hooks are the functions which “hook into” React state and lifecycle features from function components. Also, it does not replace your knowledge of React concepts.

7. React State

React components has a built-in state object. The state object is where you store property values that belong to the component. When the state object changes, the component re-renders.

Example:

const {user, setUser} = useState({});

In this example, the user is a state and its initial value is empty. If we want to change the value of the state we can use the setUser function. Look at below:

const newUser = {

name: ‘William’

passion: ‘programming

}

setUser(newUser);

Now, the user state has the new value of the newUser object.

8. React Component

UI in react is described as components. Because all the components in react are composable, reusable, and stateful. It makes your code easy and readable. You can make functions with preset input and have the correct output.

Also, it is possible to make big functions from small ones. Their arguments or inputs are a set of “props” and their output is a description of a UI. The component name has always to start with a capital letter.

9. React Lifecycle

There are mainly three phases in react lifecycle. All of your components in React have three phases of the lifecycle. You can monitor or manipulate them very easily. The three phases are Mounting, Updating, and Unmounting.

10. It’s declarative

You have to write your components in declarative style in react. Here is an example with <select>:

Here, you are not using a for loop to create a mapped collection manually. You are not saying what should be done just how it should look like.

Conclusion

I tried my best to explain some core react ideas. Hope this article was helpful enough for you.