ReactJS Tutorial

This ReactJS tutorial includes all of the most recent updates up to version 18.2.0 and covers every topic, from fundamental to advanced. React is the most recommended JavScript library to learn now because of its core foundation of features and large community.

What is ReactJS?

ReactJS is an open-source JavaScript library for building dynamic and interactive user interfaces(UIs). React is developed and released by Facebook. Facebook is continuously working on the React library and enhancing it by fixing bugs and introducing new features.

Who should learn ReactJS?

This tutorial is prepared for beginners to working professionals who are aspiring to make a career in the field of developing front-end web applications. This tutorial is intended to make you comfortable in getting started with the React concepts with examples.

Why Learn ReactJS?

There are several reasons to learn ReactJS, as per the demand in the development industry of React developers and features React has to offer that can not be replaced by other frameworks or libraries.

  • Ease of Use: ReactJS does not require writing lengthy codes as it supports the Components concept so a small amount of code can be created and can be used in multiple places.
  • Multiple Module Support: There are so many modules in ReactJS that can be used to make your development more scalable, and manageable at a fast pace.
  • Multiple Apps Development: By using React knowledge we can create Web Pages, Web Apps, Mobile Apps, and VR Apps. There are a lot of websites that are using ReactJS like Airbnb, Cloudflare, Facebook, Instagram, etc.
  • Easy Migration: Because of its easy learning curve migration from other technologies became so easy. There are tons of resources to learn ReactJS from basics to advanced.
  • Large Community: ReactJS has one of the largest communities to help you when you are in trouble debugging your codes or get stuck learning new things.

ReactJS Example Code

import React from ‘react’; import ReactDOM from ‘react-dom/client’; function Greeting(props) { return <h1>Welcome to TutorialsPoint</h1>; } const container = document.getElementById(“root”);
const root = ReactDOM.createRoot(container);
root.render(<Greeting />);

Features of ReactJS

ReactJS plays an essential role in the front-end ecosystem. There are so many important features of ReactJS as it is the most demanding library for front-end development.

  • Virtual DOM: Virtual DOM is a special kind of DOM that is used in ReactJS. Virtual DOM represents the real DOM of the current HTML document. Whenever there is a change in the HTML document, React checks the updated virtual DOM with the previous state of the Virtual DOM and updates only the difference in th actual/real DOM.
  • Reusable Components: Components need to be written a single time and can be used multiple times by just calling that component where we require that component.
  • One-Way Data Binding: One-way data binding prevents the data in a component from flowing backward. A component can pass the data to its child component only. This will simplify the data handling and reduce the complexity.

ReactJS – Introduction

ReactJS is a free and open-source front-end JavaScript library which is used to develop various interactive user-interfaces. It is a simple, feature rich and component based UI library. When we say component based, we mean that React develops applications by creating various reusable and independent codes. This UI library is, thus, widely used in web development.

ReactJS can be used to develop small applications as well as big, complex applications. ReactJS provides minimal and solid feature set to kick-start a web application. React community compliments React library by providing large set of ready-made components to develop web application in a record time. React community also provides advanced concept like state management, routing, etc., on top of the React library.

React versions

Reactjs library was founded by Jordan Walke, a software engineer at Facebook in 2011. Then the initial version, 0.3.0 of React is released on May, 2013 and the latest version, 17.0.1 is released on October, 2020. The major version introduces breaking changes and the minor version introduces new feature without breaking the existing functionality. Bug fixes are released as and when necessary. React follows the Semantic Versioning (semver) principle.

What is the need for ReactJS?

Even though there are various libraries that provide a medium to develop user-interfaces, ReactJS still stands tall in terms of popularity. Here’s why −

  • Component Based − ReactJS makes use of multiple components to build an application. These components are independent and have their own logic which makes them reusable throughout the development process. This will drastically reduce the application’s development time.

  • Better and Faster Performance − ReactJS uses Virtual DOM. Virtual DOM compares the previous states of components of an application with the current states and only updates the changes in Real DOM. Whereas, conventional web applications update all components again. This helps ReactJS in creating web applications faster.

  • Extremely Flexible − React allows developers and teams to set their own conventions that they deem are best suited and implement it however they see fit, as there are no strict rules for code conventions in React.

  • Creates dynamic applications easily − Dynamic web applications require less coding while offering more functionality. Thus, ReactJS can create them easily.

  • Develops Mobile Applications as well − Not only web applications, React can also develop mobile applications using React Native. React Native is an open-source UI software framework that is derived from React itself. It uses React Framework to develop applications for Android, macOS, Web, Windows etc.

  • Debugging is Easy − The data flow in React is unidirectional, i.e., while designing an app using React, child components are nested within parent components. As the data flows is in a single direction, it gets easier to debug errors and spot the bugs.

Applications

Few popular websites powered by React library are listed below −

  • Facebook, popular social media application − React was originally developed at Facebook (or Meta), so its only natural that they use it to run their application. As for their mobile application, it uses React Native to display Android and iOS components, instead of DOM. Facebook’s codebase now includes over 20,000 components and uses the React version that is public.
  • Instagram, popular photo sharing application − Instagram is also completely based on React, as it is powered by Meta as well. The main features to show its usage include Geo-locations, Hashtags, Google Maps APIs etc.
  • Netflix, popular media streaming application − Netflix switched to React in 2015. The factors that mainly influenced this decision are the 1) startup speed to reduce the processing time to render the homepage and enabling dynamic elements in the UI, 2) modularity to allow various features that must coexist with the control experience and 3) runtime performance for efficient UI rendering.
  • Code Academy, popular online training application − Code Academy uses React as the “script is battle-tested, easy to think about, makes SEO easy and is compatible with legacy code and flexible enough for the future”.
  • Reddit, popular content sharing application − Reddit is also developed using React from the scratch.

As you see, most popular application in every field is being developed by React Library.

ReactJS – Roadmap

This Roadmap will guide you to master ReactJS. You will learn core concepts, advanced techniques, and best practices by following mentioned topics. This step-by-step path will help you as a beginner.

What is a Tutorial Roadmap?

Tutorial Roadmap typically covers the journey from beginner to advanced user, including key concepts, practical applications, and best practices.

ReactJS Roadmap

Master ReactJS from beginner to expert with our comprehensive 2024 roadmap. Learn about static typing, interfaces, generics, and advanced type operations. Includes practical examples, learning resources, and a structured timeline for becoming a ReactJS expert.

How ReactJS Roadmap Can help you?

This ReactJS roadmap includes essential programming concepts, hands-on coding exercises, and valuable learning resources. Calculate your learning timeline, implement strategic coding practices, and build a solid foundation in ReactJS development with our clear, structured approach.

ReactJS – Installation

This chapter explains the installation of React library and its related tools in your machine. Before moving to the installation, let us verify the prerequisite first.

React provides CLI tools for the developer to fast forward the creation, development and deployment of the React based web application. React CLI tools depends on the Node.js and must be installed in your system. Hopefully, you have installed Node.js on your machine. We can check it using the below command −

node --version

You could see the version of Nodejs you might have installed. It is shown as below for me,

v14.2.0

If Nodejs is not installed, you can download and install by visiting https://nodejs.org/en/download/.

Toolchain

To develop lightweight features such as form validation, model dialog, etc., React library can be directly included into the web application through content delivery network (CDN). It is similar to using jQuery library in a web application. For moderate to big application, it is advised to write the application as multiple files and then use bundler such as webpack, parcel, rollup, etc., to compile and bundle the application before deploying the code.

React toolchain helps to create, build, run and deploy the React application. React toolchain basically provides a starter project template with all necessary code to bootstrap the application.

Some of the popular toolchain to develop React applications are −

  • Create React App − SPA oriented toolchain
  • Next.js − server-side rendering oriented toolchain
  • Gatsby − Static content oriented toolchain

Tools required to develop a React application are −

  • The serve, a static server to serve our application during development
  • Babel compiler
  • Create React App CLI

Let us learn the basics of the above mentioned tools and how to install those in this chapter.

The serve static server

The serve is a lightweight web server. It serves static site and single page application. It loads fast and consume minimum memory. It can be used to serve a React application. Let us install the tool using npm package manager in our system.

npm install serve -g

Let us create a simple static site and serve the application using serve app.

Open a command prompt and go to your workspace.

cd /go/to/your/workspace

Create a new folder, static_site and change directory to newly created folder.

mkdir static_site 
cd static_site

Next, create a simple webpage inside the folder using your favorite html editor.

<!DOCTYPE html> <html> <head> <meta charset=“UTF-8” /> <title>Static website</title> </head> <body> <div><h1>Hello!</h1></div> </body> </html>

Next, run the serve command.

serve .

We can also serve single file, index.html instead of the whole folder.

serve ./index.html

Next, open the browser and enter http://localhost:5000 in the address bar and press enter. serve application will serve our webpage as shown below.

Hello

The serve will serve the application using default port, 5000. If it is not available, it will pick up a random port and specify it.

 Serving!                                        
                                                  
    - Local: http://localhost:57311               
    - On Your Network: http://192.168.56.1:57311  
                                                  
    This port was picked because 5000 is in use.  
                                                  
    Copied local address to clipboard!

Babel compiler

Babel is a JavaScript compiler which compiles many variant (es2015, es6, etc.,) of JavaScript into standard JavaScript code supported by all browsers. React uses JSX, an extension of JavaScript to design the user interface code. Babel is used to compile the JSX code into JavaScript code.

To install Babel and it’s React companion, run the below command −

npm install babel-cli@6 babel-preset-react-app@3 -g
... 
... 
+ babel-cli@6.26.0 
+ babel-preset-react-app@3.1.2 
updated 2 packages in 8.685s

Babel helps us to write our application in next generation of advanced JavaScript syntax.

Create React App toolchain

Create React App is a modern CLI tool to create single page React application. It is the standard tool supported by React community. It handles babel compiler as well. Let us install Create React App in our local system.

> npm install -g create-react-app
+ create-react-app@4.0.1 
added 6 packages from 4 contributors, removed 37 packages and updated 12 packages in 4.693s

Updating the toolchain

React Create App toolchain uses the react-scripts package to build and run the application. Once we started working on the application, we can update the react-script to the latest version at any time using npm package manager.

npm install react-scripts@latest

Advantages of using React toolchain

React toolchain provides lot of features out of the box. Some of the advantages of using React toolchain are −

  • Predefined and standard structure of the application.
  • Ready-made project template for different type of application.
  • Development web server is included.
  • Easy way to include third party React components.
  • Default setup to test the application.

ReactJS – Features

ReactJS slowly becoming one of the best JavaScript framework among web developers. It is playing an essential role in the front-end ecosystem. Following are the important features of ReactJS

  • Virtual DOM

  • Components

  • JSX

  • One way data binding

  • Scalable

  • Flexible

  • Modular

Virtual DOM

Virtual DOM is a special DOM created by React. Virtual DOM represents the real DOM of the current HTML document. Whenever there is a change in the HTML document, React checks the updated virtual DOM with the previous state of the Virtual DOM and update only the different in th actual / real DOM. This improves the performance of the rendering of the HTML document.

For example, if we create a React component to show the current time by periodically updating the time through setInterval() method, then React will update only the current time instead of updating the whole content of the component.

Components

React is build upon the concept of components. All modern front end framework relies on the component architecture. Component architecture enables the developer to break down the large application into smaller components, which can be further break down into even smaller component. Breaking down the application into smaller component simplifies the application and make it more understandable and manageable.

JSX

JSX is a JavaScript extension to create arbitrary HTML element using syntax similar to HTML. This will simplify the HTML document creation as well as easy to understand the document. React will convert the JSX into JavaScript object consisting of React’s createElement() function call before executing it. It improves the performance of the application. Also, React allows the HTML document creation using pure createElement() function without JSX as well. This enables the developer to directly create HTML document in a situation where JSX does not fit well.

One way data binding

One way data binding prevents the data in a component to flow backward. A component can pass the data to its child component only. The data cannot be passed by a component to its parent component in any situation. This will simplify the data handling and reduce the complexity. Two way data binding may seems mandatory at first but a closer look suggests that the application can be done with one way data binding only and this simplifies the application concept as well.

Scalable

React can be used to create application of any size. React component architecture, Virtual DOM and one way data binding properly handle large application in a reasonable time frame required for a front end application. These features make React a scalable solution.

Flexible

React only provides only few basic concept to create truly scalable application. React does not restrict the developer in any way to follow a rigid process. This enables the developer to apply their own architecture on top the basic concept and makes it flexible.

Modular

React component can be created in a separate JavaScript file and can be made exportable. This enables the developer to categories and group certain components into a module so that it can be imported and used wherever needed.

ReactJS – Advantages & Disadvantages

React is a library for building composable user interfaces. It encourages the creation of reusable UI components, which present data that changes over time. Lots of people use React as the V in MVC.

React abstracts away the DOM from you, offering a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using React Native. React implements one-way reactive data flow, which reduces the boilerplate and is easier to reason about than traditional data binding.

Advantages of ReactJS

Following are the main advantages of ReactJS −

  • Performance

  • Easy to learn

  • Huge collection of third party components

  • Large community

  • SEO Friendliness

  • Easy kick-starting of the React project

  • Rich set of developer tools

  • Handle large application

Performance

React uses Virtual DOM concept to check and update the HTML document. Virtual DOM is a special DOM created by React. Virtual DOM represents the real DOM of the current document. Whenever there is a change in the document, React checks the updated virtual DOM with the previous state of the Virtual DOM and update only the different in th actual / real DOM. This improves the performance of the rendering of the HTML document.

For example, if we create a React component to show the current time by periodically updating the time through setInterval() method, then React will update only the current time instead of updating the whole content of the component.

Easy to learn

The core concept of React can be learned in less than a day. React can be coded in either Plain Javascript (ES6) or Typescript. To start with React, the basic knowledge of the JavaScript is enough. For advanced developer, Typescript provides type safety and rich language feature. A react component can be created by a developer in few hours by learning JSX (similar to HTML) and properties (props). Learning React state management will enable the developer to create dynamic component, which updates the content whenever the state changes. React provides simple lifecycle for its component, which can be used to properly setup and destroy the component.

Huge collection of third party components

In addition to core react library (which is only a few KB in size), React community provides a large number of component for a wide range of application from simple UI component to full fledged PDF Viewer component. React provides multiple option in each category. For example, the advanced state management can be done using either Redux or MobX library. Redux and Mobx are just two popular library to do state management. React has more than 10 library to archive the same functionality. Similarly, React community provides lot of third party library in each category like routing, data grid, calendar, form programming, etc.,

Large community

React developer community is a huge community with lot of activities. React community is very active that you can get answer for any react related question / doubts in a few minutes through google, stackoverflow, etc.,

SEO friendliness

React is one of the few JavaScript library to support SEO features. Since React components and JSX are similar to HTML elements, SEO can be easily achieved without much code / setup.

Easy kickstart of React project

React provides a CLI application, create-react-app to create a new react application. create-react-app application not only create a new application, it also build and run the application in the local environment without any other dependencies. create-react-app allows the developer to choose a template, which allows the application to include more boilerplate code during initial setup itself. This allows the developer to kickstart small application to large application in few clicks.

In addition to create-react-app, React community additional tools such as nextjs, gatsby, etc., which allows developer to create advanced application in a short period of time.

Rich set of developer tools

React community provides essential developer tools to enhance the developer productivity. React developer tool for chrome, edge and firefox browser enables developer to select a react component and see the current state of the component. Also, it enables the developer to has clear picture of the view of the component hierarchy by show it as a tree of component in the Developer Tab of the browser.

Handle large application

React uses composition to merge multiple component into one bigger component, which in turn allows to create much more larger component. React component can be created in a single JavaScript file and can be set as exportable. This feature allows multiple component to be grouped under a common category as module and can be reused in other places.

Composable and modular features of the React library allows developer to create large application, which is relatively easy to maintain when compared to other front end framework.

Disadvantages of React

Even through React library has lot of positives, it has some of the drawbacks as well. Some of the drawbacks are as follows −

  • Lack of quality documentation

  • No standard / recommended way to develop application

  • Fast development pace

  • Advanced use of JavaScript

  • JavaScript extension

  • Just a UI library

Lack of quality documentation

React library has a decent documentation in its primary website. It covers the basic concept with few examples. Even though, it is a good start to understand the basic of React concept, it does not provides a deep and detailed explanation with multiple examples. React community steps in and provides lot of articles with varying level of complexity and quality. But, they are not organized under one place, where the developer can easily learn.

No or Less standard way to develop application

React is just a UI library with few concept and standard recommendation. Even through React can be use to create large / complex application, there is no standard or recommended way to create a application. As there is no standard way, React community uses multiple architecture to build their application. Developer are free to choose a methodology for their application. A wrong choice at the beginning of the application development complicates the application as well as delay the development of the application.

Fast development pace

React releases new version of the library few times in a year. Each release has few addition feature and few breaking changes. Developer need to learn fast and apply the new concept to stabilize the application.

Advanced use of JavaScript

Even through the core concept of the React library is quite simple and easy to learn, the advanced concept are quite complex as it exploits advanced features of JavaScript. Also, React has lot of advanced concept to address many of the complex scenarios of the HTML / Form programming. The shear number of advanced concept is really quite a challenge for the developer to learn and master it.

JavaScript Extension

JSX is an extension of JavaScript language. JSX is similar to HTML and simplifies the component development. JSX also has few differences with the HTML Programming and need to be careful to apply it correctly. Additionally, JSX needs to be complied to JavaScript before executed in the browser which is addition step / burden for the application.

Just a UI library

As we learned earlier, React is just a UI library and not a framework. Creating a React application with good architecture needs careful selection and application of additional third party react library. A bad design may affect the application in the later / final stage of the application development.