5 Steps to Set up React Development Environment -

React is a JavaScript library for building front-end applications and user interfaces. Before you start any React project, you need first to setup a development environment. This article will show you step by step how to configure and set up a ready-to-use React development environment .

5 steps to setup React Development Environment:

Step1: Set up Command Line application
Step2: Install and set up Node.js and NPM
Step3: Install Visual Studio Code
Step4: Create a React boilerplate application
Step5: Download and install Git CLI
You might also like:

Related Articles:

Step1: Set up Command Line application

The command line allows a user to navigate the filesystem and run built-in programs and scripts. Bash is the most used command line interface and it is the default shell for Linux and Mac.

Se tup Command Line on mac OS

For OS X users, the application used called Terminal. To access the terminal, go to Applications , open the Utilities folder, open Terminal .

Applications --> Utilities --> Terminal .

Set up Command Line on Windows

To use Bash on a Windows computer, we need first to download and install Git Bash here. Run the downloaded file and allow the application to make changes to your PC. Keep the default settings for this installation, and click Next until the final Finish.

Now open the Start menu and type “Git Bash” into the search bar then click on the icon “Git Bash Desktop App” to open Git Bash.

Start --> Git Bash --> Git Bash Desktop App

Step2: Install and set up Node.js and NPM

node.js is a JavaScript runtime environment which runs JavaScript code outside of the browser. It was created with the goal of building web servers and web applications in JavaScript. When Node is installed the npm (node-package-manage) command-line tool is downloaded as well. This command-line tool enables us to install modules and get third-party libraries via our terminal. To install node, follow this steps:

1. First, make sure that your command line is setup

2. then, navigate to the main page of Node website and click on DOWNLOADS or click here https://nodejs.org/en/download/ , make sure to download the version of Node labeled “LTS” because this version is more stable than the current version.

3. After your download is complete, open the downloaded installation package and follow the installation instructions, Keep the all the default settings and click Next.

4. To confirm that node was downloaded and installed correctly and print the filepath to Node , open a new terminal window and run the terminal command which node . You can also check which version of Node you downloaded with the node -v terminal command.

 $ which node

 $ node -v

Step3: Install Visual Studio Code

Visual Studio code (VS code) is an open source code editor developed by Microsoft and operating on Windows, Linux and Mac OS. It is written in TypeScript, JavaScript and CSS, so it offers deep built-in support for Node.js and also supports many languages like C++, Java, TypeScript, JavaScript, JSON and more, what makes Visual Studio code one of the best free Code Editors in 2020.

Visual Studio code Features

Visual Studio code is known for its :

Code refactoring & debugging
Easy extensibility and customizability
Variety of plugins and themes
Integrated Terminal (Command Line Interface)

You can download VS code for free here: https://code.visualstudio.com/

Open Visual Studio code from your Command Line Interface

To follow the rest of this article you need to have Command Line application setup.

Windows users

When you install VS code in your computer, it is added automatically to the environment path. As a result you can open VS code from the the command line by just typing code then press enter, this will open an instance of VS code in the current directory and wright where you left in the last session.

 $ code

To start a brand new project in VS code you can use the command code with -n option for new.

 $ code -n

To open Vs code in the current directory you run code command followed by a dot.

 $ code .

If you want to open a specific file in the current directory (lets say you want to open package.json) you can use this command:

 $ code --goto package.json

to get more options run:

 $ code --help

Mac OS users

For the mac OS users, you need first to add VS code to the environment path, for that follow this steps:

First, in your Terminal open file .bash_profile or .zshrc

 $ open ~/.bash_profile

 $ open ~/.zshrc

Then add to it this line of code

 $ code () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" --args $* ;}

Finally, save (command + S) .bash_profile file, and run :

 $ code .

this will open an instance of VS code in the current directory. Now you can use the same commands above.

To start a brand new project in VS code you can use the command code with -n option for new.

 $ code -n

If you want to open a specific file in the current directory (lets say you want to open package.json) you can use this command:

 $ code --goto package.json

to get more options run:

 $ code --help

Step4: Create a React boilerplate application

Now that we have node installed and our command-line interface (CLI) available, we can check if our development environment is ready and functional. To do that, we will create a new basic React project using create-react-app. create-react-app is a node module created by Facebook to generate React boilerplate applications. To install this module globally, we will use npm (node-package-manage) command.

First open your terminal and run the command:

 $ npm install -g create-react-app

 $ sudo npm install -g create-react-app

When this is done, in your terminal, navigate to the directory or folder where you would like to place your React application within. Then, run the following command, this may take some time:

 $ create-react-app   <name-of-your-project-without-capital-letters>

After that navigate to your project directory using the command:

 $ cd   <name-of-your-project>

To open your project in VS code run:

 $ code .

To start running your project type the command:

 $ npm start

Step5: Download and install Git CLI

Git is one of the most popular version control systems and it is an open source tool, so it is free. You can use Git to track and log the changes you make to your code or project over time and give you the possibility to review or restore earlier versions of your code.

Download and install Git

To use Git you have to download it first then install it locally in your computer.

You can download Git from their official site download Git.

Allow the Git installation on your computer:

Make sure to choose the LTS version corresponding to your operating system and follow the installation instructions.

To verify that your installation was successful and get the Git version, run the following command:

  $ git --version

Git configuration commands

git config is used to configure and set up Git for the first time:

 $ git config

The first step is the registration: enter your name and email using this command:

 $ git config --global user.name "your name"
 
 $ git config --global user.email "your-email"

Note that you can change your name and email by running the same commands.

To view your Git configurations run the following command:

 $ git config --list

Create and initialize a Git Repository

There are two ways to create and initialize a git repository: the first way is to clone an existing repository from GitHub. We will talk in details about this method in the next section of this article.

The second way is to initialize any regular folder in your system and set up it as a new git directory.

To create or initialize a new Git project or repository, navigate to your working directory or folder, then run the git init :

 $ cd /yourWorkingDirectory
 
 $ git init

This command creates a .git repository with all the tools and data necessary to maintain versions. It is very important to note that this command is used only once per project for an initial setup.

In order to check the status of your Git repository, use the following command :

 $ git status

The output of git status includes helpful messages to direct the user to manage their repository. It shows the user the current commitment, the modified files, the new files not being tracked by Git and which branch of the repository you’re currently working on.

The git add command is usually performed before a commit. It is used to add files to the staging area and track them for a commit. These files will be included in the next Git snapshots of the repository.

to add one file use the command:

 $ git add file_name.js

to add several files use the command:

 $ git add file_name1.js  file_name2.txt  file_name3.js

to add more than three files use the command:

 $ git add .

To add all new and updated files from all other directories inside the root directory use the command:

 $ git add --all

OR:

 $ git add -A

Now if you run git status the files will appear in the Changes to be committed section of the git status output.

To remove a file from the staging area and untrack it run:

 $ git rm --cached file_name.js

OR:

 $ git reset file_name.js

If you run git status the file_name.js will appear in the Untracked files section of the git status output.

You can find a Git commands cheat sheet HERE.

If you would like to know more about Git and how to commit and push your React project to GitHub, click HERE.

For more information about GitHub and how to clone a React project from GitHub, check out HERE.

You might also like:

3 easy steps to create React application.

How to create React Web App with a Node.js API Backend.

How to make Axios Requests in React to a nodejs API.

How to use React Hooks in Functional Components.

5 Steps to Set up React Development Environment.

How to clone GitHub repository and branches.

What are Component Lifecycle Methods in React.

How to open Visual Studio code from Command Line.

How to deploy React app to Heroku.

Complete Guide on how to use Git and GitHub.

How to get Request Origin in Express.js?

How to get the Request Host in express.js?

How to Get Current Date and Time in JavaScript.

How to add Custom Error Handler Middleware to your Node.js/Express API.

Complete JWT Authentication and Authorization System for MySQL/Node.js API.

How to Build a Complete API for User Login and Authentication using MySQL and Node.js.

Node.js + MySQL : Add Forgot/Reset Password to Login-Authentication System.

Nodemailer + Gmail: How to Send Emails from Node.js API using Gmail.

How to store Session in MySQL Database using express-mysql-session.

How to interact with MySQL database using async/await promises in node.js ?

How to use Sequelize async/await to interact with MySQL database in Node.js.

MANY-TO-MANY Association in MYSQL Database using Sequelize async/await with Node.js.

ONE-TO-ONE Association in MYSQL Database using Sequelize async/await with Node.js

ONE-TO-ONE Association in MYSQL Database using Sequelize async/await with Node.js.

How to add Routes to insert data into MySQL database-related tables in Node.js API?

Example How to use initialize() Function in Node.js/Express API .

Why is Connection Pooling better than Single Connection?.

How to create MySQL database using node.js.

5 Steps to Set up React Development Environment