React JS Tutorial

In this React JS Tutorial article, we will cover the basic and advanced concepts of ReactJS. Let us start by getting an overview of what we’ll be going through in this ReactJS Beginner Tutorial.

Let me begin with an overview of what I'm going to cover in this ReactJS tutorial.

Table of Content - ReactJS tutorial

What is ReactJS? What is the use of ReactJS? Why learn React JS?  Features of ReactJS Pros and cons of ReactJS ReactJS Installation  ReactJS Components    ReactJS-Component Life Cycle  React Forms Conclusion

What is ReactJS?

ReactJS is one of the most widely popular open-source JavaScript libraries developed by Facebook. It is responsible for managing the view layer for both web and mobile-based applications. The primary use of React is in building reusable UI components. 

ReactJS is user-friendly and therefore has a strong foundation and community behind it. 

Interested to learn more about React framework - Then check out our Online React Js Certification Training to gain expertise to build React JS Applications.

What is the use of ReactJS?

The main feature of ReactJS is developing a User Interface (UI) to improve application speed. The JavaScript virtual DOM, which is faster than the regular DOM, makes it possible to enhance its performance. 

A ReactJS application consists of multiple components, where each is responsible for producing a small, reusable part of HTML code. You can nest these components with other ones to build complex applications with simple building blocks. 

React’s components and data patterns boost readability and help handle large applications. You can make use of ReactJS on both the client, server-side, and other frameworks. 

ReactJS Tutorial For Beginners | Getting started with React JS 

Why learn React JS? 

There are several JavaScript frameworks available, but React is one of the most popular ones among them. The difference between the older frameworks and React is that the former ones use a traditional data flow structure, using the DOM (Document Object Model). 

But, what is DOM? A browser creates objects every time you load a web page. Data is added or removed at the back end after any modifications, and every time a new DOM is created for the same page. Hence, memory is wasted unnecessarily due to the repeated procedure, leading to reduced application performance. 

To solve the above problem, Facebook invented ReactJS. Although it still follows the traditional data flow structure, it does not directly operate on the browser’s DOM (Document Object Model) but a virtual DOM instead. Therefore, it fixes any DOM changes built and run in the memory itself. 

Features of ReactJS

1. JSX: It is a JavaScript syntax extension. JSX stands for JavaScript XML. Although it is not necessary to use JSX, it is recommended to use it. 
2. Components: Components are the core of React. They are essential when you are handling the code for large-scale projects. 
3. One-way data-binding: React applies a one-way data-binding or a unidirectional data flow. The advantage of this is that it gives the user better control over the application. Flux ensures the unidirectional flow of data. It increases efficiency by improving the application’s flexibility. 
4. Simplicity: The JSX file in ReactJS simplifies the application. 
5. Performer: React’s performance is excellent. The main reason behind it is that it uses a virtual DOM, unlike the other frameworks. 
6. License: ReactJS is licensed under Facebook Inc. 

Advantages and Disadvantages of ReactJS

ReactJS is the most popular and widely used open-source JavaScript library. You can create excellent web apps with minimal effort. There are, however, several pros and cons of ReactJS. Let’s look at some of them. 

Advantages of ReactJS:

Here are important pros/benefits of using ReactJS:

• It is user-friendly. React provides its users with helpful documentation, training resources, and in-depth tutorials. 
• You can quickly build dynamic web applications with ReactJS as it offers high functionality. It uses the JSX (JavaScript Extension) that allows you to create an app with minimal coding. 
• React’s components are reusable, which makes it easier to develop and maintain your apps. 
• React provides its developers several handy tools. 
• React uses a virtual DOM. This JavaScript object improves the app’s performance because the virtual DOM is faster than the regular DOM. 
• You can use React on the client, server-side, and other frameworks as well. 
• The data and component patterns in React optimize readability, which is useful when handling larger apps. 

Disadvantages of ReactJS:

Here are the cons/ drawbacks of using ReactJS:

• To obtain the complete development toolset, you have to choose different technologies since React covers only its view layer. 
• Developers usually do not prefer React’s usage of JSX and inline templating. 
• Developers might find it challenging to adopt continuous updates in React. They have to keep upgrading their skills to keep up. 
• Since React is a continually updating technology, it isn't easy to make proper documentation for it. Therefore, developers usually end up writing instructions on their own. 

Related Article: AngularJS vs ReactJS

ReactJS Installation 

There are two main ways to install the ReactJS application. 

1. Using the npm command 

Steps to follow to install ReactJS using the npm command are: 

1. Install NodeJS and NPM. They are platforms that are required to develop ReactJS applications. 

2. Install React and React DOM. 

• Make a root folder and name it reactApp. 
• Create a package.json file. 
• Install react along with its DOM packages 

3. Install Webpack. Its functions include module packaging, development, and production pipeline automation. 

Leave an Inquiry to learn React JS Online Course Bangalore

4. Install Babel. It is a JavaScript transpiler and compiler that converts one source code to others. 

5. Add the files—index.html, App.js, main.js, webpack.config.js, and .babelrc in your project folder. 

6. Configure webpack in the webpack.config.js file. 

7. App.jsx and main.js is the first React component. 

8. Create a .babelrc file. 

9. After the installation process and setting up the app, you can start the server. 

10. Generate the bundle for your app. Bundling is when you follow imported files and merge them into a single file? called?a bundle. 

2. Using the create-react-app command 

Steps to follow to install ReactJS using the create-react-app command are:

• Install NodeJS and NPM. They are platforms you require to develop ReactJS applications. 
• Install React using the .npm package manager. 
• Create a new React project using the create-react-app command. 
• After you complete the installation process, you can now start the server. 

Related Article: Reactjs Interview Questions and Answers

What is React JSX?

ReactJS is a JavaScript extension. With this template script, you can use HTML and JavaScript together. 

An example of a JSX code is: 

const h1tag="<h1>Hello, from Mindmajix Tutorials!</h1>";

Reasons to use JSX in React

In React, you can write HTML/XML structures in the same file as the JavaScript code. Then, the preprocessor converts the expressions into JavaScript code. Additionally, you can also manage the state changes in the dom in the most effective manner. 

JSX tags include a tag name, attributes, and children. 

Some of the reasons to use JSX in React are: 

• It works at a more incredible speed than regular JavaScript. While it translates the code to JavaScript, it also performs optimization. 
• It makes use of components that include both markup and logic. 
• You can find the errors during the compilation time as it is type-safe. 
• You can easily create templates in JSX. 

Moving ahead in this ReactJS tutorial, Now, let's see What are Components in ReactJS?

Related Article: Goldman Sachs Interview Questions

ReactJS Components 

Components are the core building blocks of React applications. They are logical groups of code that make up the entire application. With the use of components, you can build UIs quickly. Every component works independently, and you can merge them into a parent component. 

React components have their unique structure, methods, and APIs. Additionally, they are also reusable. 

There are two types of components in ReactJS: 

1. Functional components 
2. Class components 

1. Functional Components 

You can only write components using a render method with functional components. These are JavaScript functions that may or may not receive data as parameters. Functional components are also called stateless components since they do not manage the local state. Given below is an example of a functional component:

function WelcomeMessage(props) {
    return <h1>Welcome to the,{props.name}</h1>;
}  

2. Class Components 

Class components are more complicated than functional components since you have to extend from React. They are also called stateful components since they manage the local state. You can perform the following with class components: 

• You can move data from one class to another class component. 
• You can create a class by defining a class that has a render function. 

Given below is an example of a class component: 

class MyComponent extends React.Component {
  render(){
return(
<div>This is main component.</div>
);
  }
}

Moving on to the core aspect of our ReactJS tutorial, let us discuss what is a State in ReactJS?

ReactJS State 

In ReactJS, the state contains information about the components and can change over time. It can either be a response to user action or a system event. Data collected in a state is a private object. 

Components within the state are called stateful components. They regulate the component’s behavior and make it more interactive. 

You can access or modify the state only inside the component or directly by the component. You should always simplify your state as much as possible and reduce the number of stateful components. For example, if you have ten components requiring data from the state, you should create a single container component that will keep the state for all the components. 

Related Article: React Hooks Interview Questions

ReactJS Props

What are Props in ReactJS?

Props are nothing but properties you can use inside a component. They are read-only variables that store the value of attributes of a tag. Props are similar to function arguments because you can pass them to the components in a similar way as arguments. 

You cannot modify props from inside the components. Instead, you can add attributes called props. 

Props to Function Component:

Given below is an example of moving props to a function component. 

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Mindmajix Tutorials!" />;
export default Hello_comp;

As you can see in the above example, the msg attribute is added to the <Hello/> component. You can also access it as props inside the Hello function. It will include the details of the msg attribute. 

ReactJS - Component Life Cycle 

There are four phases in a component’s lifecycle. They are: 

1. Initial phase
2. Mounting phase
3. Updating phase 
4. Unmounting phase 

1. Initial Phase 

This phase is considered the birth phase in a ReactJS component’s lifecycle. In this, the component begins its way to the DOM. During this phase, the component includes both default Props and the initial State. 

The initial phase includes the following methods: 

• getDefaultProps(): It defines the default value of this.props. 
• getInitialState(): It defines the default value of this.state. 

2. Mounting Phase 

In the mounting phase, you create the component instance and insert it into the DOM. It has the following methods: 

• componentWillMount(): You call this method before the rendering of a component into the DOM. The component will not re-render when you call setState() in this method. 
• componentDidMount(): You call this method after rendering a component and placing it on the DOM. Then, you can perform DOM querying operations. 
• render(): You define this method in every component. You cannot return a single root HTml node element. However, you can return a null or false value if you don’t want to render anything. 

Visit here to Learn React JS Certification Course in Hyderabad

3. Updating Phase 

In this phase, you can handle the user interaction and communication with the hierarchy of components. In this phase, the priority is to make sure that the component’s latest version is displayed. Unlike the previous stages, the updating phase repeats over and over again. It includes the following methods: 

• componentWillReceiveProps(): You call this method when a component receives a new prop. 
• shouldComponentUpdate(): You call this method when a component decides it wants to make changes to the DOM. You can control the component’s behavior when it gets updated. 
• componentWillUpdate(): You call this method before the component update. You cannot use the this.setState() method to change the component state. Further, if shouldComponentUpdate() returns false, then this method will not be called. 
• render(): You call this to inspect this.props and this.state. It returns any of the following: Arrays and fragments, String and Number, Booleans or null, React elements. 
• componentDidUpdate(): You immediately call this method when the component is updated. 

4. Unmounting Phase 

The unmounting phase is the last phase of the React component lifecycle. It is invoked in a situation when a component instance is unmounted and destroyed from the DOM. It contains only one method, as given below: 

• componentWillUnmount(): You call this component before a component is unmounted and eliminated permanently. This method performs cleanup tasks like event listening, canceling network requests, invalidating timers, cleaning up DOM elements, etc.

React Forms 

Forms are useful in web applications as they make it possible for the users to interact with the application. They can perform various tasks such as adding users, searching, filtering, ordering, booking, etc. Forms can contain elements such as text fields, buttons, radio buttons, checkboxes, etc. 

Creating Form in ReactJS 

In ReactJS, the component handles the React form. There are two different types of forms: 

1. Uncontrolled components
2. Controlled components

Controlled components	Uncontrolled components
In controlled components, the parent component controls the data.	In uncontrolled components, the DOM handles the data.
It permits validation control.	It does not permit validation control.
Here, the internal state is not maintained.	Here, the internal states are maintained.
It accepts current values as a prop.	It uses a ref for its current values.
It holds better control over the elements and data in forms.	It holds limited control over elements and data in forms.

ReactJS Events 

Events are actions that are triggered by either system-generated events or user actions. A few examples of events are loading a web page, resizing a window, pressing keys, etc. 

React’s event-handling system is called synthetic events and is similar to the system on DOM elements. 

You can use the setState() method to update the state during user interaction with an HTML element. 

ReactJS Router 

When a user is directed to a page based on their action or request, the process is called routing. The primary function of a ReactJS Router is to develop Single Page Web Applications. For example, when a user types a URl in their browser, they will be redirected to a route that matches the URL path. 

In React, routing is created using the React Router package. 

Why do you need a React Router?

The most important reason why you need a React router is to show multiple views in single-page applications. Several popular social media websites like Instagram, for example, use React Router to display multiple views. 

What are the components in React Router? 

React Router includes two types of router components: 

• BrowserRouter: This component handles the dynamic URL. 
• HashRouter: This component handles the static request. 

Conclusion 

In summary, ReactJS is an open-source JavaScript library maintained by Facebook to build user interfaces. Today, many companies around the world use it for UI development. 

The main features of ReactJS are JSX, props, state, functional and class-based components, and component lifecycle.  

Many modern websites are built on the MVC (Modern View Controller) architecture, where V represents React. 

With a variety of JavaScript frameworks available to learn, React is still a popular choice. 

This brings us to the end of this React JS tutorial blog. Hope each and every aspect discussed above is clear to all. To learn more about React JS, check out our ReactJS Courses.