ReactJS Architecture

The React library is built on a solid foundation. It is simple, flexible and extensible. As we learned earlier, React is a library for creating user interfaces in a web application. The primary objective of React is to enable the developer to create user interfaces using pure JavaScript.

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 elements

JavaScript representation of HTML DOM. React provides an API, React.createElement to create React Element.

JSX

A JavaScript extension for designing user interfaces. JSX is an XML based, extensible language that supports HTML syntax with slight modifications. JSX can be compiled for React Elements and used to build user interfaces.

React Component

React components are the primary building block of React applications. It uses React Elements and JSX to design its user interface.

React Component is a JavaScript class (extends the React Component class) or a pure JavaScript function. React components have properties, state management, lifecycle and event handlers. React components can be able to do simple as well as advanced logic.

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.

mkdir static_site 
cd static_site

Example

Next, create a file, hello.html and write a simple React application.

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="UTF-8" /> 
      <title>React Application</title> 
   </head> 
   <body> 
      <div id="react-app"></div> 
      <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
      <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> 
      <script language="JavaScript"> 
         element = React.createElement('h1', {}, 'Hello React!') 
         ReactDOM.render(element, document.getElementById('react-app')); 
      </script> 
   </body> 
</html>

Next, serve the application using the service web server.

Output

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.

React.createElement

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

ReactDOM.render

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 -

Example

<script language="JavaScript">
   element = React.createElement('div', {}, React.createElement('h1', {}, 'Hello React!'));
   ReactDOM.render(element, document.getElementById('react-app')); 
</script>

Output

It will generate the below content -

<div><h1> Hello React!</h1></div>

Use JSX

Next, let us remove the React element entirely and introduce JSX syntax as shown below:

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="UTF-8" /> 
      <title>React Application</title> 
   </head> 
   <body> 
      <div id="react-app"></div> 
      <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
      <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> 
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> 
      <script type="text/babel"> 
         ReactDOM.render(
            <div><h1>Hello React!</h1></div>, 
            document.getElementById('react-app') 
         ); 
     </script> 
   </body> 
</html>

Here, we have included babel to convert JSX into JavaScript and added type="text/babel" in the script tag.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> 
<script type="text/babel"> 
   ... 
   ... 
</script>

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.

<script type="text/babel"> 
   function Greeting() {
      return <div><h1>Hello JSX!</h1></div> 
   } 
   ReactDOM.render(<Greeting />, document.getElementById('react-app') ); 
</script>

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.

Next TopicReactJS PropTypes

← prev next →