Settings Required By React Js App for Local Development

In this post, we will discuss the steps to setup ReactJs App in our local computer. Here we will be discussing about many extensions and tools that we professional programmers use for react development and we will be discussing about those tools, Also We also will be discussing various useful extensions that we will be needing while developing our react app. By the end of this post, you will be ready for react development.

Hold on, If you are wondering what the hell we are doing here please go and refer our previous post that discusses about React Js. And you will get some overview of React JS.

Install Node JS in your computer

Node js helps your react app to run and manage its modules and packages without this we won’t be able to run our react js app in our local. That’s why lets get it.

• For Windows
  • Download NODE JS software from this url for your specific windows machine. While installing this software make sure to check set environmental variable checkbox during the installation otherwise manually you have to set the environment variable by yourself.
• For MAC OS:
  • You can download and run the installer at this link or you can use HomeBrew to do the installation for you.
  • For HomeBrew installation you can use below command:
    • brew install node from your mac this will take care of everything.

When you are done with the installation, You can check the version of node you are using by using below command from your Terminal or CMD

Node -v this should give the below result as per the version you are using.

Installing React using nmp (Node Package Manager).

• Hit bellow command to install create-react-app to your local

Creating your first React project.

After when your 2nd steps successfully completes then you can hit below command to create a React Project.

Create-react-app <app-name>

OR

Directly without step 2 you can hit  ngx create-react-app <app-name>

 Note: This command will create your react app without installing create-react-app module to your local. That means when you are using this step then you can skip step 2.

Install Editor For Your React Code.

Get the code editor of your choice. Here we will be using Visual Code. You can get it from following link, I personally prefer this because we get multiple extensions that will help format and compile your react code.

 Installing Required Extensions for React Development in Visual Code.

We will be installing below list of extensions.

• Babel Javascript
• Prettier: This is a Code Formatter and helps you to format your code when you save.
• Simple Reacts Snippets: This will help in Auto-generation of the component code and many other

Adding Chrome Extension React Developer Tool  to debug you code.

Go and search for React Developer Tool for chrome extension at this link

and add it to chrome. Using this you can see each component and its state value. As shown below.

Running Your React APP

Go to the app directory which got generated in step 3 using terminal or CMD command cd <app-name>

Hit npm start . This will start the server at default port i.e 3000.

Go to browser and hit http://localhost:3000/ and will see this screen.

Common commands you will be using frequently are.

 npm start
	    Starts the development server.
	
npm run build
	    Bundles the app into static files for production.
	
npm test
	    Starts the test runner.
	
npm run eject
	    Removes this tool and copies build dependencies, 
            configuration files and scripts into the app directory. If 
            you do this, you can’t go back!
	
We suggest that you begin by typing:
cd <app-name>
npm start

Conclusion

If you are seeing this section of the post that means you have gone through all above material for setting up react development environment at your local computer/machine. Let’s have quick overview of what you read in this React Tutorial.

In this React tutorial you learned about the basic software and setup required to start your react js project. Yeah, You guessed it correct, We require Node JS installed in or system to start our react development.

After this we Installed react module called “create-react-app”, That will be used for generating react app using the command npm i -g create-react-app.

Secondly, we learnt how generate our React project using “create-react-app” module. Yahh that’s correct we will used create-react-app <app-name> command.

Then we downloaded Visual Code and installed extensions like prettier, React Snippets, Bable Javascript that will help in react development.

Then we learned how to start react server using command npm start.

Thanks, Note

Thanks for spending you valuable time on this post hope this post was use full to you and you learned something new today. If you like our post please share our post.