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

Simply put, functional components are JavaScript functions, but these function components must be valid to work in React. When you write JavaScript functions in React, they should return some JSX in order to be a valid React function component and work perfectly.

- Class components

Class components are more complex than function components. They provide more features and are declared using JavaScript ES6 classes. The class components can pass data from one class to other 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.

Hooks are JavaScript functions that allow you to use React state and lifecycle methods from other components without writing a class. In fact, hooks do not work inside classes, but they let you use React without classes. They allow you to extract static stateful logic for a component, so you can test and reuse it in another component without changing the component hierarchy.

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

Do not call Hooks from JavaScript functions. Following this rule, ensures you that all stateful logics are visible from its source code.

The state in React is a plain JavaScript object that holds information that may change the lifetime of the component. In fact, the only difference between props and state is that the state is managed inside, within the component, while props get passed to the component.

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:

- Redux
- MobX
- Recoil
- Akita
- Hookstate
- Zustand