React JS Introduction : Easy Way Guide

In this article, we’ll see React JS Introduction.

What is React?

React is a UI library developed at Facebook to facilitate the creation of interactive, stateful & reusable UI components. It is used on Facebook in production, and Instagram.com is written entirely in React.

One of its unique selling points is that not only does it perform on the client side, but it can also be rendered server side, and they can work together inter-operably.

It also uses a concept called the Virtual DOM that selectively renders subtrees of nodes based upon state changes. It does the least amount of DOM manipulation possible in order to keep your components up to date.

Why Us React?

Firstly he is really fast. Another thing is that he is really understandable. Anyone with a basic previous knowledge of programming can easily understand React while Angular and Ember are referred to as ‘Domain specific Language’, implying that it is difficult to learn them. Another cool feature of React is that it can be used to create mobile applications (React Native). And React is a die-hard fan of reusability, meaning extensive code reusability is supported (using components ). Another main feature is that he supports server-side rendering, which helps in solving performance and SEO problems.

Features of React JS:

  • Adaptability: One of the most heartwarming features of React JS is its adaptability. What makes React JS usage a piece of cake is its capacity to get adopted with ease and convenience. Because of the shortlist of lifecycle approaches, this is very easy to understand and use. With the advent of ES2015 and ES2016, more functional and user-friendly programming has become a cyber norm, and the render function of React JS makes it easy for React JS to comply with a user-friendly and functional programming style.
  • Usefulness of JSX: The separation of HTML from Java is still a hot debate among programmers. The makers of React JS believe that this separation is indeed a very shallow one as both of them were very well integrated. Thus the introduce JSX and React JS features make it very easy because JSX makes the reasoning of a module easier than ever.
  • Free and Open Source: If the software is free and it is open source, there is needless to say that it is going to be the new favorite of programmers and the relevant community. React JS usage although subject to curation by Facebook’s developers, is still free and open-source, which gives you a chance to get codes developed by elite and enthusiastic developers.
  • ECMAScript: The programmer community believes that React JS features will touch new heights because of the availability of ECMAScipt6 and 7. While the latter is still in progress, its features are being used by big-shot libraries. With the help of any good ES transpiler, you can use these stunning features.
  • Decorators from ES7: As it has been mentioned before, you do not need to wait for the ES7 features to be supported by Internet Explorer; you can use a transpiler for that. Decorators are one of the most useful features of React JS and they allow you to augment a function’s behavior by simply wrapping that in a different function.
  • Server-side Communication: One of the main reasons why people expect a mass use of React JS is because of React JS features like server-side communication. The library of React JS empowers programmers by giving them lifecycle “hooks” to enable the serve requests. With the help of this feature, you understand the mechanism of XHR requests and thus easily update your library to use them.
  • Light Railing for Applications: React JS is being used by different companies, developers, and programmers, but one reason why every IT company should consider React JS features, is its lifecycle methods, state, and props’ capacity to provide enough railing to create useful apps. This railing, however, would not smother the free use of different libraries.
  • Asynchronous Functions & Generators
    One of the main reasons for the immense React JS usage is the asynchronous functions and generators offered by ES6. The freedom to pause and resume the execution of a JavaScript function makes these generators popular among developers and programmers.
  • Flux Library: Like it has been said, React JS is actually a library made of Java scripts. Flux is one of the best libraries that complement React JS and make it very easy for programmers to manage data across the whole application.
  • Destructuring Assignments: In ES6, Destructuring Assignments were introduced to the programmers. They allow the programmers to bring a compound object on the left side of an assignment. Having such an amazing feature, one can save some keystrokes and also load only a subset of a required module.
    Our verdict goes in favor of React JS and considering the very useful features that React JS introduces to the community, we can predict that React JS features will only make it skyrocket in the coming years.

Installation:

Before starting the installation of React.js, you must have Node.js and npm (Node Package Manager) preinstalled on your device.

Step 1: Open the terminal and run the “npm install -g create-react-app” command to install the Create-React-App module, making creating and deploying React into projects with a single command effortless.
Step 2: Run the “create-react-app –version” command to verify the installation.
Step 3. Create a project directory by running the “mkdir react-js” command.
Step 4. Go to your project directory by running the “cd react-project” command in your terminal.
Step 5. Run the “create-react-app my-first-react-app” command to create an application
Step 6: Go to your application directory by running the “cd my-first-react-app” command in your terminal.
Step 7: Run the “npm start” command to start your application

There is another way of installation

Step 1. Open your terminal and create a project directory by running the “mkdir react-js” command.
Step 2. Go to your project directory by running the “cd react-project” command in your terminal.
Step 3. Initialize a new node project by running “npm init -y” and answer questions during the setup process
Step 4. After that, run the “npm install react react-dom” command in your terminal to Install React.js and React DOM packages as dependencies.
Step 5. Create a new file named index.js in your project directory, which will be the entry point for your React application.
Step 6. Add the following code index.js file

import { createRoot } from 'react-dom/client';

// Clear the existing HTML content
document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

Step 7: Run the “npm start” command to run your application

You can follow the below video for React JS Installation process:

Advantages and Disadvantages

Advantages

  • Virtual DOM in ReactJS makes the user experience better and developers work faster
  • ReactJS permits reusing code components – significantly saving time
  • An open-source library: constantly developing and open to contributions

Disadvantages

  • The high pace of development
  • Poor documentation
  • React.js is only a view layer.
  • Integrating React.js into a traditional MVC framework such as rails would require some configuration (i.e., substituting erb with React.js).
  • There is a learning curve for beginners who are new to web development.

I hope this article helps!

Last updated on July 16th, 2023.