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 .

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.

nodejs download

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.

Install nodejs

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/

devdotcode-VScode

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

OR

 $ open ~/.zshrc
  • Then add to it this line of code
 $ code () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" --args $* ;}
bash_profile
.bash_profile after adding the code
  • 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

OR

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

Git download

Allow the Git installation on your computer:

Git installation

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

Git installation

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.

Translate »