ReactJS Tutorial - A Step-by-Step Guide

Let us start by getting an overview of what you will be going through in this ReactJS tutorial for beginners:

• ReactJS Introduction
• Prerequisites for ReactJS
• Features of ReactJS
• Advantages of ReactJS
• Disadvantages of ReactJS
• How Does ReactJS Work?
• React JS Installation
  • Setting Up a ReactJS Environment
  • Creating the First ReactJS Application
  • Creating a Component in ReactJS
  • Calling an External Component within a Component
• Conclusion

Watch this video on ReactJS Full Course:

ReactJS Introduction

Web and mobile application development occupy a major chunk of the software-related job requirements that organizations and business owners have today. A variety of frameworks, languages, libraries, and tools have been introduced in the industry to make the flow of these development activities smoother and more accessible and, in turn, to make the final product better.

Web applications usually consist of three elements, a frontend, a backend, and a database. Depending on a certain degree of compatibility clauses, technologies used in all of these three are interchangeable, as long as the use case remains the same. That being said, on the frontend side of things, React is one of the most popular and widely used libraries today.

The distinguishing feature of ReactJS, among other technologies, is that it allows us to reuse UI components very easily. We are going to explore this reusability feature.

To learn the fundamental Web Development languages, such as HTML, CSS, and JavaScript, you can enroll in our online instructor-led Full Stack Developer course now!

Prerequisites for ReactJS

Before getting started with ReactJS it is highly recommended to have some foundational knowledge of HTML, CSS, and JavaScript. ReactJS uses JSX which is mostly equivalent to HTML in syntax. Hence, prior knowledge of the HTML language is very handy. JavaScript, on the other hand, can be learned side-by-side as we implement our ReactJS project.

Thinking of getting a certification in React JS? Here is the React JS Training in Bangalore for you to enroll in!

Features of React

In the MVC (Model-View-Controller) application cycle, React, by itself, only makes up for the ‘View’ part as it is concerned with the frontend aspect. React can take advantage of Node and can be rendered on the server-side very easily, with the option of running native apps with React Native. Here are some defining features of React:

• JavaScript Syntax Extension (JSX): JSX is used to combine the web design elements of the HTML code with the JavaScript logic, using a syntax almost identical to HTML. This is used to minimize backend server load and lay emphasis on client-side resource utilization for the frontend elements of a web application.

• React Components: React allows us to create UI elements in the form of ‘components.’ The point of using components in the development life cycle is to implement code reusability, make the code lighter, and provide a proper structure to the project. The chaining of multiple React components together to implement the reusability of code is discussed with examples, later on.

• Flux: It keeps the application data flow unidirectional (one-way).

Advantages of ReactJS

The advantages of ReactJS have been mentioned below:

• Since ReactJS has a simple syntax, it is easy to learn.
• Switching to the advanced versions of ReactJS is easy.
• Skills learned in ReactJS are applicable to React Native Firebase development.
• Implementation of functional concepts (FC) is easy in ReactJS.
• ReactJS supports progressive web apps (PWAs).

Disadvantages of ReactJS

The disadvantages of ReactJS have been mentioned below:

• Integration of ReactJS in the MVC framework needs a complex configuration.
• Combining templating with logic in ReactJS can be confusing for some developers.
• ReactJS is unassertive, leaving developers to make choices of their own.
• ReactJS has poor documentation.

Preparing for a Job Interview? Check out our blog on React JS Interview Questions!

How Does ReactJS Work?

ReactJS was built because a group of Facebook developers discovered the fact that the document object model (DOM), an API for XML and HTML documents, defined the logical structure of the way these documents are accessed and dynamically changed, is not optimal with regards to time. To solve this, they developed ReactJS. ReactJS implements a virtual DOM instead of an actual DOM.

So, during each web session, instead of changing the actual DOM tree, ReactJS makes changes to the virtual DOM tree to find the least time-consuming way to update the web browser’s DOM.

Once the changes have been confirmed or decided, ReactJS DOM updates the actual DOM to match with the virtual elements. This is done so that the JavaScript code does not need to wait for the server’s response for each DOM tree manipulation request and can access it instantly with zero latency.

Check out this blog to learn about ReactJS error boundaries!

React JS Installation

To get started with the ReactJS tutorial, we need to have the environment already set up. The first and foremost prerequisite to run React is installing NodeJS.

Now that we have successfully installed and set up NodeJS, let us move on to creating a basic React application:

Setting up a React Environment

• To set up a React environment, open the desired project directory in the command-line terminal, and create a project folder

C:\Users\intellipaat\Desktop>mkdir intelliProjects
C:\Users\intellipaat\Desktop>cd intelliProjects

• Initialize the ReactJS project in the created folder

C:\Users\intellipaat\Desktop\intelliProjects>npx create-react-app my-app

After the initialization is complete, we can see that the ReactJS boilerplate project structure and code files are ready to use.

Learn how to install React on Windows also.

Creating the First ReactJS Application

First, we will need an IDE to write our React code. We can use Visual Studio Code, Atom, Sublime Text, or any IDE that we prefer.

Note: This tutorial has been created using Visual Studio Code.

• Now, start the IDE application; navigate to our project location (here, C:UsersintellipaatDesktopintelliProjectsmy-app), and see the following project structure

• Navigate to the src folder, and we will see some pre-existing boilerplate code files for a React application

• We can test the boilerplate code to see if our React environment is set up correctly. Go to the command-line terminal and run the following commands

C:\Users\intellipaat\Desktop\intelliProjects>cd my-app
C:\Users\intellipaat\Desktop\intelliProjects\my-app> npm start

• This will start a locally-hosted live development server. Now, in most cases, the default web browser will automatically launch a tab with the web application, but if it that does not happen, then simply enter the following URL in our web browser

localhost:3000

After testing the environment with the boilerplate code, now, let us create our ReactJS application.

• Switch back to the IDE, and open the App.js file in the src folder. Make sure to erase all the contents of the code file to start from scratch. Now, import all the required module(s) for a basic React application

App.js:

import React from “react”;

• Create a basic ReactJS function (component) that returns the JSX code, which will be rendered onto the browser

App.js:

function App() {
return (
<div> 
<h1>Intellipaat React Application</h1>
</div>  
);
}

• After creating the above component, export the module for it to be accessible by index.js for the render call

App.js:

export default App;

Your final App.js should contain the following now:

import React from "react";
function App() {  
return (    
<div>      
<h1>Intellipaat React Application</h1>    
</div>  
);
}
export default App;

Then, we will save the changes in the App.js file.

Now, one of the great things about React is that all changes that are saved in the code will reflect in the live server after an automatic refresh of the webpage. We can check this by simply switching back to the browser tab.

Take a look at the most asked WordPress Interview Questions and Answers! Prepared by our experts and crack the interview.

Creating a Component in ReactJS

Let us create a component in React, which returns the JSX code, containing a button. The function of the button is to print the message ‘Hello from Intellipaat!’ in the console when it is clicked.

• In the same directory, create a file with the name, intelliHello.js, and perform the import(s)

intelliHello.js:

import React from "react";

• Now, create the component skeleton

intelliHello.js:

function Hello() {  
return (
    <div>
    </div>  
);
}

• Assign the task of printing the message ‘Hello from Intellipaat!’ to a JavaScript function, messagePrompt

intelliHello.js:

function Hello() {
  const messagePrompt = () => {
    console.log("Hello from Intellipaat!\n");
  };
  return (
    <div>
    </div>
  );
}

Now, since we have the ability to use JSX, we can combine JavaScript with HTML formatting. This implies that the programming logic can be integrated seamlessly with the design elements of a web application. Let us see how this works.

• Attach the function to an ‘onClick’ clause and return the JSX code

intelliHello.js:

function Hello() {
  const messagePrompt = () => {
    console.log("Hello from Intellipaat!\n");
  };
  return (
    <div>      
<button onClick={messagePrompt}>Hello</button>
    </div>
  );
}

• Export the module after the component is coded out

export default Hello;

Check out these Web Development Courses to get an in-depth understanding of Web Development!

Calling an External Component Within a Component

Let us switch back to the code file, App.js, and implement the Hello component that we just created.

• Import the external component within the App.js file

App.js:

import Hello from './intelliHello'

• Implement the component in the return block of the parent App component

App.js:

function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}

Our new ‘App.js’ file will have the following contents.

App,js:

import React from "react";
import Hello from './intelliHello'

function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}
export default App;

• Save the changes and test the results on the web browser

To check whether the ‘onClick’ clause of the Hello button is working, we have to enable the browser’s console (F12 on Google Chrome). After enabling the console, we will click on the Hello button multiple times to see if the message ‘Hello from Intellipaat!’ is getting printed or not.

Here, we come to the end of this best React.js tutorial.

Check out the Full Stack Web Development Course video:

Conclusion

We hope after going through this blog, you have got an idea of how to use ReactJS. In this tutorial, we have also covered the advantages and disadvantages of ReactJS and practically learned how to create components in ReactJS and many other topics. It is however recommended that you get your basics strong through a proper training course to better understand the advanced features of this tool.

After going through this ReactJS Tutorial for Beginners, do you want to get proficient in technologies such as React and Redux?

Enroll in our online instructor-led React JS Training Course today!