We should begin by installing NodeJs and npm in order to set up React on our local machine.
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.
After Node has been installed. To verify the version of Node.Js, please launch the command prompt in Node.Js.
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.
Make sure you don’t start the project with a capital letter.
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.
Download and install Visual Studio Code from the following URL
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:
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.
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.
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.