React is centered around the development of components that you can reuse over and over again. A component is like a function or building block of an application. All apps consist of multiple components.
React splits a UI into reusable, independent parts that can be processed separately. Components can be built within other components, the parent component being the initiator and the child component receiving the information from the parent.
All basic web pages are created as HTML documents. A web browser reads these documents and displays them on the screen of your device. This is done by creating a Document Object Model (DOM) or tree of how this web page is arranged.
One of the powerful features of React is the Virtual DOM. As mentioned before, your web page uses HTML to update its DOM whenever a user interacts with the page.
Under normal circumstances, this requires the reloading of the entire DOM with every interaction. This takes time and computing power.
React's Virtual DOM, using JSX, will create a copy of the page's DOM, and React JS uses this copy to determine what parts of the actual DOM need to change. This way, the entire web page does not need to reload, just the relevant section or sections.
States and Hooks
Using React JS, you create interactive experiences for users by deciding which components will be static and mutable. This is called a React state. For a data component to be considered a state, it has to change over time and can't remain permanently static.
Every time a state changes, the component will re-render. State changes happen based on user action or system-generated events.
React hooks are features that connect the internal logic between components. It will intercept function calls or messages passing between components based on a set of logic commands. It can also halt rewriting a component or allow a modification of a component.
The term 'props' is short-form for properties. It's a built-in object in React which stores a tag's attribute (similar to HTML attributes). It's a way to pass data from a parent component to a child component in the same way HTML passes attributes in a function.
Props get unwieldy when the parent component passes a tag through several child components to a final destination component. You can manage this more efficiently using a spread operator.
A spread operator will expand iterables such as strings and arrays into individual elements. This facilitates the movement of props between components.
Facebook also created a nifty browser extension for Chrome that adds a React tab in the developer tools option. This tab makes inspection of React components quick and easy.