Typically, each user interface library introduces a new template language (which we need to learn) for designing user interfaces and provides the option to write logic inside the template or separately.
Instead of introducing a new template language, React introduces three simple concepts as below –
React components are the primary building block of React applications. It uses React Elements and JSX to design its user interface.
Let us learn more about components in the React Component chapter.
Workflow of a React application
Let us understand the workflow of a React application in this chapter by creating and analyzing a simple React application.
Open a command prompt and go to your workspace.
Next, create a folder, static_site, and change the directory to the newly created folder.
Next, create a file, hello.html and write a simple React application.
Next, serve the application using the service web server.
Next, open your favorite browser. Enter http://localhost:5000 in the address bar and then press enter.
Let us analyze the code and do a little modification to understand the React application better.
Here, we are using two APIs provided by the React library.
Used to create React elements. It expects three parameters –
- Element tag
- Element attributes as object
- Element content – It can contain nested React elements as well
Used to render the element into the container. It expects two parameters –
- React Element OR JSX
- Root element of the webpage
Nested React element
As React.createElement allows nested React element, let us add nested element as shown below –
It will generate the below content –
<div><h1> Hello React!</h1></div>
Next, let us remove the React element entirely and introduce JSX syntax as shown below:
Next, run the application and open the browser. The output of the application is as follows –
Next, let us create a new React component, Greeting and then try to use it in the webpage.
The result is same and as shown below –
By analyzing the application, we can visualize the workflow of the React application, as shown in the below diagram.
The React app calls the reactdom.render method, bypassing the user interface created using the React component (coded in JSX or React Elementor format) and the container to render the user interface.
ReactDOM.render processes JSX or React Elements and emits virtual DOM.
The virtual DOM will be merged and rendered in the container.
React Application Architecture
The React library is just a UI library, and it doesn’t implement any special patterns for writing a complex application. Developers are free to choose the design pattern of their choice. The React community advocates certain design patterns.
One of the patterns is the flux pattern. React library also provides many concepts like higher order components, context, render props, refs etc. to write better code. React Hooks is developing concept to do state management in large projects. Let’s try to understand the high-level architecture of a React application.
- React app starts with a single root component.
- The core component is created by using one or more components.
- Each component can be nested with any other component at any level.
- Composition is one of the core concepts of the React library. Therefore, each component is built by composing smaller components rather than inheriting one component from another.
- Most of the components are user interface components.
- React apps may include third-party components for a specific purpose, such as routing, animation, state management, etc.