React JS Tutorial-1

What is React JS?

1. React JS is an open-source JavaScript library.
2. It is used to build SPA(Single Page Application) and reusable UI Components.
3. React follows declarative and component based approach.

React Declarative and Component Based Approach

React Component based approach

1. React uses Component based approach to build Single Page Application.
2. Component based approach increases the scope for scalability.

Let’s understand Single Page applications first. For example, you have Home, About, Contact Us, etc., sections on your page. When you click on the About section, it will redirect you to about.html. Now, suppose you have Navigation Bar and Footer on your all page. So, What you will do? You will just copy and paste the navigation bar and footer code into all of your pages. And, after a few hours/days/month you want to add a few more sections to your navigation bar and do some changes in its styling. So, you have to do changes in all of your pages which will somewhere impact the scalability.
React JS provides component based approach to solve this problem. But How? You can segment your code into smaller components and reuse it wherever needed.

You can build a user-defined component. Let’s name it NavBar. And you can use this component wherever it’s required by just writing it as <NavBar/>

Now, let’s understand how this user-defined component can increase the scope for scalability. For example, In the new update of your application, you want to add two more items to your navigation bar and change the existing styling. So, with a component based approach, you have to do changes only in your NavBar component and it will save your time to do changes in all the files.

React Declarative based Approach

1. Declarative approach helps coder to easily understand the code.
2. Debugging gets easier.
3. It increases the scope for scalability.

Let’s understand React Declarative Approach with one example. Your friend made a counter application. It has two buttons, plus, and minus. Clicking on plus displays a green text and minus represents red text on the screen. Your friend requested you to do some changes. Your friend wants that on clicking of the plus button, plus button should turn green and on click of a minus button should turn red. So, to implement this functionality you need to understand the code and update the new functionality. You went to code and you found that on click of these buttons states are changing and based on that your friend was displaying red and green text. Now, as you understand the code, it would be easier for you to update its existing functionality.

Setting up the React Project

1. Node and npm/yarn should be installed on the machine.
2. Node version ≥ 14.0.0 and npm version ≥ 5.6.

Command: npx create-react-app your-app-name

Go to that folder and run npm start in command prompt. It will start your react application.