How to install react scripts in your localhost – 2023

Leave a Comment / React.js, coding, education, javascript, Technolgy, web development / By Aniket shanker

Introduction to React

React is a open – source Javascript library for building user interfaces. And React is very helpful in building UI of a website and application.

What is an UI?

The User interface is the point of human-computer interaction and communication in a device. This can include display screens, keyboards, a mouse and the appearance of a desktop.

React Is a javascript library or frameworK?

React.js is not a framework. React.js is a JavaScript library for building user interfaces (UI).

React is also known as ReactJS and React.js.

History of React

React was first designed by Jorden Walke, a software engineer at Facebook and it was first deployed for facebook news feed around 2011. In 2013, React was open sourced at JS conference.

Also Read: 6 best books for SEO 2022.

How to install react scripts using npm?

• To install React.js first of all you need to intsall Node.js in your computer.
• Click here to install Node.js directly or you can intsall it through google by simply searching for nodejs.
• Now open your comand prompt (cmd) in your pc.
• Now check that the node js you have intalled is successfully installed or not by checking node js version and npm version in cmd.
• 👇👇

node -v (to check node version)
npm -v (to check npm version)

• Now after sucessfully intalling node js its time to move further to install react.

Install React in Terminal

• Firstly you need to type npm install -g create-react-app in your cmd to create react app and it will start installing react app in your pc.
• Secondly type, create react-app – version in cmd to check the version of installed react. Now if you are able to see the verison of react that mean react is installed globally in your pc. Now you can create a react app in any folder.
• At third type create react-app <projectname>.👇👇Now you need to wait for 5-10 minutes and you will see Happy hacking message at the bottom of the cmd that means you have sucessfully created a react folder.

npm install -g create-react-app

create-react-app - version

create-react-app <projectname>.

Now you can easily open the react in terminal by simply typing👇

1} cd <projectname>
2} npm start

Now after sucessfully installed all the packages open you code editor in your pc. I suggest you to use Vs code for react as it is an awseome app. Now open the folder that you have created before through cmd or search for the project name and open it in vscode. Now you will see a lot of folder like this👇👇

Now you can simply start using react by opening index.js file to edit your UI with react.

React module.

What is JSX in React?

JSX is an XML or extension that enables us to write Html code in React. Here we dont call <h1></h1>,<div></div>,<section></section> and so on as html ,we call it JSX in React.js and this is the beauty of React.

You delete all the written code from index.js files and you can start fresh.To start writing on react you need to write this two code as compulsory and this is called React Module👇and this is compulsory to write if you are working on React.js

import React from 'react';
import ReactDom from 'react-dom';

React module.

To use JSX you need to put the above code to the top of your index.js file and you will be able compile your file and you can bring your JSX to live on browser.

Why should we use React module?

We use react module so that we can bring Jsx to live on browser. For Example👇👇

import React from 'react';
import ReactDom from 'react-dom';
 ReactDom.render(what to show,
where to show);

import React from 'react';
import ReactDom from 'react-dom';
 ReactDom.render(<h1>I love to code</h1>,
 document.getElementById('root'));

Here we have brought JSX to live on browser By simply adding ReactDom.render and getting the elementbyid i.e ‘root’ which is saved in index.html file.

The ReactDOM.render is what?

Two arguments, HTML code and an HTML element, are required by the ReactDOM.render() function. The function’s goal is to display the designated HTML code inside the designated HTML element.

You can simply use the above code and run cmd and start npm. You will see that your JSX will go live on browser.👇

Alright guys so today we have learned How to install react scripts in your localhost – 2022 and also we have learned how to bring your first Jsx code live on React local host.

Next Learn: How to render multiple elements using ReactDom.render in reactjs.

Also Read: What is SEO Website design.