ReactJS | Architecture - WebDesignTutorialz

Hello folks! welcome back to a new edition of our ReactJS tutorial. In this tutorial post, we are going to be studying about ReactJS architecture.

React library is built on a strong foundation. It's simple, flexible and extensible. From our previous tutorial, we have learnt that React is a library to create user interface in a web application. React's main goal is to enable the developer to create user interface using pure JavaScript. Conventionally, every user interface library introduces a new template language for designing of the user interface and provides an option to write logic, either inside the template or separately.

Rather than introducing brand new template language, React introduces three concepts as given below -

React elements

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

JSX

A JavaScript extension used to design user interface. JSX is an XML based, extensible language that supports HTML syntax with a little modifications. JSX can be compiled to React element and used for creating a user interface.

React component

React component is the main building block of React application. It uses React element and JSX to design it's user interface. React component is mainly a JavaScript class or pure JavaScript function. React component has properties, state management, life cycle and event handler. React component can do simple as well as advanced logic.

READ: ReactJS | Installation

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.

cd /go/to/your/workspace

Next, create a folder, static_site and change directory to newly created folder.

mkdir static_site 
cd static_site

Example

Next, create a file, hello.html and then 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 serve web server.

serve ./hello.html

Output

Next, open your favorite web browser. Enter http://localhost:5000 in the address bar and press enter.

Let us analyse the above code and do little modifications to it to better understand the React application.

Here, we are using two API provided by the React library.

React.createElement

This API is used to create React element. It expects three parameters -

Element tag.

Element attributes as object.

Element content - it can contain nested React element as well.

ReactDOM.render

This API is 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's add nested element as shown below -

Example

Following below is a simple example -

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

Output

When the above example is executed, it will generate the below content -

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

Use JSX

Now let's 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 web browser. The output of the application is as follows -

Next, let us create a new React component, Greeting and 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>

Output

The output of the above example is shown below -

By analyzing the application, we can picture the workflow of the React app shown in the diagram below -

React app calls ReactDOM.render method by passing the user interface created using the React component and the container to render the user interface.

The ReactDOM.render processes the JSX or React element and emits virtual DOM.

Virtual DOM will be merged and rendered into the container.

Architecture of the React Application

React library is just a UI library and it does not enforce any specific pattern for writing complex application. Developers are free to choose the design pattern they wish to use. React community advocates certain design pattern. One of the patterns is Flux pattern. React library also provides lots of concepts such as Higher Order components, Context, Render prop, Refs etc., to write better code. Let us now try to understand the high level architecture of a React application.

The React app begins with a single root component.

Root component is built using one or more components.

Each component can be nested with other components to any level.

Composition is one of the core concepts of React library. So, each component is built by composing smaller components instead of inheriting one component from another component.

Most of the components are user interface components.

React application can include third party component for specific purpose such as routing, animation, state management, etc.

READ: ReactJS | Introduction

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial post, we are going to be discussing about how to create a React Application.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

WebDesignTutorialz

ReactJS | Architecture

React elements

JSX

React component

Workflow of a React Application

Example

Output

React.createElement

ReactDOM.render

Nested React element

Example

Output

Use JSX

Output

Architecture of the React Application

Post a Comment

Get new posts by email:

Python Tkinter Colors

Html Layout

Python Tkinter Relief Styles

WordPress Optimization Tips Tutorial

Html-Comments