The first step towards the react js

What is React JS?

React JS is a JavaScript library for building personal interfaces. It is evolved by FB and Instagram and it is used in their manufacturing environment. It has a declarative, green, and bendy method for building consumer interfaces.

React JS changed into created with the aid of Facebook in 2011. Its aim turned into to make the improvement of complicated use simpler and faster than what could be accomplished with other JavaScript libraries at the time, like AngularJS or spine.Js.

React JS uses a digital DOM that can render HTML on the fly while not having to reload the complete page for every replacement — this makes it tons greater efficient than AngularJS or EmberJS which need to reload the entire page each time any part of it adjustments

It’s far from the V inside the MVC sample and it stands for the View. It is an open-source mission created with the aid of Facebook and Instagram engineers.

A React application may be any front-cease or returned-give-up application that uses React as its view layer or backend.

How Does React JS work?

React components are often written as self-contained, without difficulty reusable pieces of functionality that can be composed together into large structures by way of connecting the inputs and outputs with houses. In this weblog put up, I will take you through some examples of the way to use React components to build an easy internet app.

The Family of React Component Libraries, Which One Is Right For You?

Components are the building blocks in React. You can combine and structure them in a variety of ways to create the desired webpage. The React community has created many component libraries to assist developers in getting started faster.

1. MUI

MUI is one of the most famous React components. It is well known for making web development faster and easier.

The major goal of MUI is to provide developers with a large number of clean, simple, and highly adaptable components. It offers many ready-to-use features that can be plugged into any project.

Features

• Develop design systems quickly and easily.
• Easily create and customize themes that can be used globally across your components.
• Well-organized and straightforward documentation.

Installation

You can install MUI using NPM or Yarn as follows:

// with npm

npm install @material-ui/core

// with yarn

yarn add @material-ui/core

One of the best videos for MUI

2. React-Bootstrap

React Bootstrap is one of the most popular React js libraries because the developers have the leverage to add different web components. It is a popular front-end component-based library among developers as it provides many resources and themes.

React-Bootstrap is the most stable solution to add the bootstrap features in the Virtual DOM. This library will use JSX syntax while building websites.

Features

• Develop design systems quickly and easily.
• Easily create and customize themes that can be used globally across your components.
• Well-organized and straightforward documentation.

Installation

You can install React Bootstrap using NPM or Yarn as follows:

// with npm

npm install react-bootstrap

// with yarn

yarn add react-bootstrap

One of the best videos for react-bootstrap

3. React router dom

React router dom is one of the best react libraries that provide the facility of dynamic routing in the web application. This library will provide react components that you can use for routing as per your requirements. React Router DOM contains various DOM bindings so that you can access the components of React router.

React router DOM is available for the browsers so you can only use it when you are building various web applications. So you can say that this library is the best choice for you if you are trying to build a React application that will run in different browsers.

Features

• It provides the facility of dynamic routing in the web application.
• it’s own Hooks

Installation

You can install React Router Dom using NPM or Yarn as follows:

// with npm

npm install react-router-dom

// with yarn

yarn add react-router-dom

One of the best videos for react-router dom

Prerequisites for React JS

A few things you will need to be familiar with if you want to get the most out of this React.

JavaScript

React is a JavaScript library, so it makes sense to know JavaScript before learning React, right? Don’t worry, you won’t need to know JavaScript inside out — you only need to know the basics:

• Variables, functions, data types
• Spread Operator.
• this keyword
• Arrays and Objects
• Arrays Methods and Properties [likes map(), filter(), length, find(), forEach(), etc,]
• ES6 Syntax (using let & const, Arrow Functions, Destructuring Assignment, classes, importing/exporting, etc)
• How JavaScript is used to manipulate the DOM.

HTML

In React, we use what’s called JSX to create the HTML for our web pages. We’ll explain JSX in depth later, but for now, make sure you have a good foundation when it comes to HTML:

• How to structure HTML (how to nest elements and so on)
• HTML attributes (like “id”, “class”, “onClick”, “onChange”and so on)

Getting Started with React JS

Development Environment

The first thing we’re going to do is set up a development environment.

Install

Node.js

Visual Studio Code (or your preferred IDE)

Node.js

Go here and download the right package for your OS (Mac/windows etc)

When the installation completes, open a terminal and type this command:

node -v

This should show output the version of Node you just installed:

Visual Studio Code

Visual Studio Code is a popular open-source IDE that works well for front-end development. There are a bunch of others you can try — see what your favorite is and download that if you prefer. For now, we’ll run with VS Code.

Click here and download the version for your platform:

Follow the installation steps, and you should be good to go. Go ahead and fire up Visual Studio Code.

Creating a React App

The next step is to create a React project. All we have to do is run a command within our terminal

npx create-react-app my-app

This creates a project for us called “my-app” and sets everything up automatically.

or if you want to create an app in the same folder, not the specific folder

npx create-react-app ./

This creates a project for us called in the same folder and sets everything up automatically.

Output

The create-react-app output has told us what we want to do to start the app.

Cross beforehand inside the venture folder and run the commands on your terminal

start npm

or

yarn start

Pros and Cons of ReactJS

Pros

• Easy to Learn and USE
• Creating Dynamic Web Applications Becomes Easier
• Reusable Components
• Performance Enhancement
• The Support of Handy Tools
• Known to be SEO Friendly
• The Benefit of Having a JavaScript Library
• Scope for Testing the Codes

Cons

• The high pace of development.
• Poor Documentation.
• View Part
• JSX as a barrier