Step 0 - What does the React Library actually do?
19 January, 2023
11
11
1
Contributors
"The only person you are destined to become is the person you decide to be." - Ralph Waldo Emerson
What does the React Library do?
What React does is basically a combination of two functionalities. The first is letting us create React components and the second is render them to the DOM. The components can be thought of as equivalent to the ones that HTML provides us like div , a tag etc. These React equivalents of the HTML tags then need to be translated to their DOM equivalents which is where the react-dom comes into the picture.
react-dom
The react-dom package provides us with two entry points:
react-dom/clientandreact-dom/server
They deal with rendering the React components on the client (browser) and the server (server-side rendering) respectively.
The react-dom/client has a createRoot API that allows us to create a React root through which the generated React tree could be displayed inside of a DOM element.
import { createRoot } from 'react-dom/client';
const domNode = document.getElementById('root');
const root = createRoot(domNode);In this example, we create a root where our entire React app could be plugged by selecting the DOM element with the id of root.
Once we have created the root, we can render our App component (which is the topmost React component for our application) like so:
root.render(<App />);This renders the whole React app inside of the DOM element with the id of root in our HTML.
React components
React allows you to build reusable UI components. It uses a virtual DOM (a lightweight in-memory representation of the actual DOM) to optimize updates and minimize the number of DOM manipulations required to keep the UI up to date.
Hence, the two pieces of the puzzle are the ReactDOM part that renders the React component and the React part that actually helps us build those components in the first place.
Other key features
- Declarative: React makes it easy to build interactive UIs by creating a declarative API for describing components and the changes that should be made to the DOM.
- Reusable components: React allows you to define your own reusable components, which can be used to build complex UIs by composing simple components together.
- React Native: React also has a sister library called React Native, which allows you to build native mobile apps using the same principles as React.