For setting up React in our local system, the first step is to Install NodeJs and npm.
NPM will be installed along with Nodejs. Node.js can be downloaded and installed from the official NodeJs website.
Once the Installation of Node is complete. Open Node.Js Command Prompt and we can check the version as well.
Install Create-React-App Tool
The next step is to install a tool called create-react-app using NPM. This tool is used to create react applications easily from our system. You can install this at the system level or temporarily at a folder level. We will install it globally by using the following command.
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 say I want to create the project or application in D:\React_Programs. I will create this folder and let our command prompt point to it by using the change directory command.
Let’s create a new Project now using the command.
Remember not to create the project with an upper case character In it.
Running the React Application
Let’s do CD to the Project we have created and run it locally on our system using npm start. Launch the browser and visit http://localhost:3000. We can then see our first React Application response in the browser.
We have created a New Project using React and executed the Project.
But as a developer, we would be more interested to know about the Project which is created, its structure and we would like to play around with it. So it is time for us to get an Editor. When we think of IDE, we have a variety of choices like Visual Studio Code, React IDE, Sublime Editor, Atom Editor, Webstorm and a few others. We will use the VS Code as our Editor.
Visual Studio Code is a free IDE from Microsoft built for developing and debugging web applications. It has integrated Git control & terminal. VS code’s IntelliSense allows Visual Studio Code to provide you with useful hints 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
After the installation, open the Project we have created earlier using the VS Code. The Project has the following 3 folders
The output we have seen when the Project is executed comes from a file called Index.html which resides inside the public folder.
In index.html we have one div tag with id as root.
To understand the relation between the output we see and this index.html, Open src/app.js file. The image and the text we see in the browser are coming from here. Let’s make a small change in the text, save it and let’s have a look at the browser. We can see the changes and it happens very fast.
How the index.html is linked to App.js will be discussed in our upcoming videos. With this we have the react environment setup on our local machine and we are ready to explore React.
React online editors
Let’s say we are in office, we have some free time and we’re interested in playing around with React, then you can use an online code playground like CodePen, CodeSandbox, or Glitch.
For example, let’s say we want to create react project using CodePen. In the browser, navigate to https://codepen.io/ and click on Start Coding.
Create a simple div in HTML section.
<h1>Welcome to React World</h1>,
Go to Pen Settings section of Js and add,
With the above settings, you should have the output produced as expected.
I hope we are clear on doing the React setup and creating our first Project using React.