Developed and maintained by Meta (ex-Facebook) and the developers’ community, React can be used for developing single-page or mobile apps.
React’s declarative API allows you to design simple views for each state of your application, and React automatically and efficiently updates and renders the right components when notices that your data changes.
DOM = Document Object Model.
ReactDOM is a package of DOM-specific methods that can be used at the top level of the app to enable managing DOM elements more efficiently.
The programming concept virtual DOM (VDOM) is an ideal representation (virtual) of a UI kept in memory and synced with actual DOM by a library. This process is known as reconciliation. ReactDOM is a clear example of this.
The reconciliation process enables the declarative API of React, so you tell React what state you want the UI to be in, and it makes sure the DOM matches that state. This saves you time, and the process is faster.
Elements are the building blocks of React app. A React element shows you what you want to see on the screen, and they are immutable.
The core building blocks of React are entities named components. Every app built in React is made of pieces or blocks known as components. Components make the building of the UI much easier, and they can be rendered to a particular element in the DOM by using the library.
Components allow you to split the UI into single, reusable blocks and see them as an independent piece of code. Moreover, components can be broken down into separate pieces of functionality and reused within other components.
Types of components:
- Function components
- Class components
The custom functionalities that allow execution of the code during the different phases of a component are known as lifecycle methods. Some of the methods available in React are called when:
- The component is created and inserted into the DOM
- The component is updated
- The component gets removed from the DOM, etc.
There are two rules that you need to follow if you want to use hooks in React:
1. Call Hooks at the top level
Do not call Hooks inside loops, conditions, or nested functions. This rule ensures you that Hooks are called in the same order each time a component renders.
2. Call Hooks from React function and from custom Hooks
React offers many ways how to store, use and manage state. React itself is powerful and you can create quite complex apps only with it. However, there are many State Management libraries created for React, and here is a list of a few most used React state management libraries: