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:

npm i -g create-react-app

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 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

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.

Search for Simple React Snippets

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

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

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

Yogesh Koli

Software engineer & Blogger live in India, has 8+ years of experience working with the Front-end and Back-end Web Application Development.

Recent Posts

Complete guide of using Laravel 6 Eloquent Subquery Enhancements

Learn How to use laravel frameworks new improved feature called Eloquent Subquery and get example…

1 year ago

3 Useful examples of using Array Map function in PHP – Best Practices

Learn how to use php array map function with easy and essential tutorial to modify…

1 year ago

Working with PHP Array Filter Function – Best Practices

Learn how to use php array filter function with easy and essential tutorial to filter…

1 year ago

How to add Access Modifiers with Constructor Parameters in TypeScript

Want to know how to refactor your Typescript class, Learn here utilising Typescript of the…

1 year ago

What is Access Modifiers and how to use Access Modifiers in TypeScript ?

What is Access Modifiers in typescript, how to use Access Modifiers, when to use them,…

1 year ago

Top 10 Super Useful Packages to Improve Laravel applications in 2019

This tutorial provide ultimate list of package those are top 10 on packagist and super…

1 year ago