Home Front-end Development Setting up the React Development Environment

Setting up the React Development Environment


In my earlier tutorial I have given the details on what is React, basic concept of using components and why react is so important.

Now here in this tutorial I will guid you on how you can make your system ready for developing React application.

Install NodeJS

Okay so the first thing you should install is the NodeJS, so if you don’t NodeJS on your machine then head over to nodejs.org and download and install the latest stable version.

Download and install NodeJS

Install Create React App Package

Ones your done installing open up the terminal on mac, linux or command prompt on windows and run this command:

We have used -g option we want this package to install globally.

We are gone use this package to create new React Apps now if you are on Mac and you have configured permission properly you need to put sudo in the front of this command with this it will run this command under administrative privileges.

Installing Create React App
Installing Create React App Globally

Installing CodeEditor

Next is we need is the code editor, the code editor I prefer to use is the Visual Studio Code (VS Code) editor, because is the beautiful light wight and cross platform editor.

If you don’t have Visual Studio code editor and head over to code.visualstudio.com and download it according the operating system you use.

Download and install VS Code
Download and install VS Code

Install VS Code Extensions:

We are gone install two extensions to VS code that make it easier to build react applications.

So go ahed and open you VS code editor and click on Extension button on left to open up Extension panel.

VS code Extention button

Search for Simple React Snippets

Installing Simple React Snippets in VS Code
Installing Simple React Snippets in VS Code

The extension we are gone install is development by Burke Holland it most popular extension right now for React Snippets on VS code, so click install button to install it and then you will have to reload VS code.

The extension we are gone install is Prettier so search for Prettier in extension panel:

Installing Prettier Extension In VS Code
Installing Prettier Extension In VS Code

This extension is developed by Esben Petersen, so click install and reload VS code, we use this extension to reformat our code.

Enable Format On Save Option in VS Code

I want you do so is to Enable formatting on Save in VS code, so whenever you save the changes in VS code this extension will automatically reformat your code.

okay to do that you need to open settings on mac you can go to Preferences -> settings and search for Format on Save and check the box.

Enable Format on Save Option in VS Code
Enable Format on Save Option in VS Code

Okay now your system should be ready now you can work or start learning React application by doing.

What’s Next

I would suggest to create new react application, you read following tutorial to setup your new react application:

Ultimate way create your First React Application

Enjoy this tutorial? Get iTech Empires updates delivered straight to your inbox.

No Spam, ever. We'll never share your email address and you can opt out at any time.

Yogesh Kolihttp://www.itechempires.com
Yogesh Koli is a software engineer & Blogger lives in India. He's driven by an addiction to learning and a love for adventure. he has 6+ years of experience working with the front-end and back-end web application development.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Notify of

Tutorials You May Like!

- Advertisement -