react js-tutorial

ReactJS Installation

We should begin by installing NodeJs and npm in order to set up React on our local machine.

Install Nodejs

The installation of Node.js is recommended because it provides a platform on which JavaScript can be run independently of a web browser. The packages for React and Angular are managed and shared using NPM, the Node package manager.

Together, Nodejs and NPM will be set up in your system. You can get Node.js from the NodeJs website and use it on your computer.

https://nodejs.org

After Node has been installed. To verify the version of Node.Js, please launch the command prompt in Node.Js.

Install Create-React-App Tool

Next, utilise NPM to put in place create-react-app. With this solution, we can quickly and simply build React applications within our infrastructure. It can be installed permanently on the system or just temporarily in a folder. Using the following command, we can install it anywhere.

npm install -g create-react-app

Creating a new react project

After create-react-app is installed, we can create our first react application. Let’s pretend I’ve settled on D:React Programs as the location to house my new project or app. I’ll make this directory and then use the change directory command to make the command prompt use it.

Let’s start fresh with a new Project by running the command.

create-react-app test-project

Make sure you don’t start the project with a capital letter.

Invoking the React App

Let’s conduct a version control update on our newly minted Project and then execute it locally with npm start. Get online and head to http://localhost:3000 in your browser. When we run our React application, the browser will display the first answer.

cd test-project
npm start

We have successfully launched a brand-new React-based project that we developed from the ground up.

As developers, however, we care more about the details of the resulting Project, its architecture, and the opportunity to experiment with it. Thus, it is time to hire an Editor. A number of different integrated development environments (IDEs) are available, including Visual Studio Code, React IDE, Sublime Editor, Atom Editor, Webstorm, and a few others. To edit our code, we’ll be using Visual Studio Code.

When it comes to creating and fixing bugs in web apps, Microsoft’s free IDE, Visual Studio Code, is hard to beat. It features integrated Git control & terminal. VS code’s IntelliSense allows Visual Studio Code to give you with useful suggestions and auto-completion features while you code. So the next step is to install the Visual Studio Code.

Install Visual Studio Code

Download and install Visual Studio Code from the following URL

https://code.visualstudio.com/download

After Visual Studio Code is installed, launch it and go to the Project folder we created previously. Here are the three sections of the Project:

  • node_modules
  • public
  • src

The file Index.html in the public folder is responsible for the output we see when we run the Project.

A single div tag with the id root can be found in the index.html file.

<div id="root"></div>

To learn how this index.html is related to the output we see, open the src/app.js file. Everything that appears in the browser, including images and text, originates here. Let’s make a little adjustment to the text, save it, and check it out in the browser. The shifts are visible, and they occur rapidly.

In subsequent videos, we’ll show you how to connect index.html and App.js. With this we have the react environment setup on our local machine and we are ready to investigate React.

Online Compilers

We can use an online code playground like CodePen, CodeSandbox, or Glitch if we’re at the workplace and have a little downtime during which we’d like to experiment with React.

Let’s imagine we want to use CodePen to build a react project. Follow this link to https://codepen.io/ and then select the button labelled “Start Coding” to begin using the website.

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published. Required fields are marked *