React Fundamentals - Day Two

Introduction

In the second day of my React article series, we are going to learn how to setup a React development environment. Before moving to environment setup, please read my previous article:

• React Introduction – Day One

Prerequisites

Let's get started with React, before starting with React you need the following knowledge:

1. HTML
2. JavaScript
3. CSS
4. Basic knowledge of NPM (Node Package Manager)

Environment Setup

There are multiple ways you can start developing React applications:

• Using Visual Studio 2017
• Using Node.js (NPM) etc.

In this article, we are going to setup a development environment using NPM.

Code Editor

Nowadays there's a variety of free tools available that enable us to do rapid client-side development. Following are some code editors you can choose to start:

• Visual Studio Code
• Sublime Text
• Atom
• Deco IDE
• WebStorm etc.

We will be using VS code (https://code.visualstudio.com/) which is a good, light-weight and cross-platform editor from Microsoft.

Setting Up

Following are the steps to configure or setup React environment using NPM,

1. Installing Node
   First, we need to install NodeJS. NodeJS is a server-side language and we don’t need it because we are not writing any server-side code. We mostly need it because of its npm or Node Package Manager. npm is very popular for managing dependencies of your applications. We will use npm to install other later tools that we need.

Get the latest version of NodeJS from nodejs.org and install it on your machine. Installing NodeJS should be pretty easy and straightforward. (Download - https://nodejs.org/en/)

2. Open Node.js command prompt

You can choose which node version is installed using the following command:

‘node -v’ and press enter you can see the latest version like below screenshot.

For npm version enter the following command:

‘npm -v’ and press enter you can see the latest version like below screenshot.

3. Installing Create-React-App
   ‘create-react-app’ is the best way to start building a new React single page application. It sets up our development environment so that we can use the latest Javascript features and optimization for our app. It is a Command Line Interface tool that makes creating a new React project, adding files and other on-going development tasks like testing, bundling and deployment easier. It uses build tools like Babel and Webpack under the hood and provides a nice developer experience for us that we don’t have to do any manual configurations for it.

To install‘create-react-app’ from the command line, run the following:

‘npm install -g create-react-app’ and press it will installed this package globally on your machine.

4. Creating a new project using ‘create-react-app’
   First, navigate to the folder where you want to create your React project. Next, create a new React project and skeleton application with the following command:
   
   ‘create-react-app PROJECT_NAME’ and press enter you can see as above screenshot.
   
   

5. After creating the project, navigate to the created project folder by typing following command,
   
   ‘cd PROJECT_NAME’ and press enter.

6. After navigation to that project folder, now run the created application, and for that you need to run the following command:
   
   ‘npm start’
   
   The above command launches the server, watches your files and rebuilds the app as you make changes to those files. You can also run the ‘npm run build’ command which creates a production-ready bundle that has been transpiled and minified. You can see the output of the above command in the terminal like in the below screenshot:
   
   
   If it doesn't open in the browser you can manually hit the localhost as shown in the above screen shot and you can see the output as follows,
   
   

Project Files

Now let’s look at the project files that have been created for us. When you open the project folder in VScode editor, you will find a couple of files like the below screenshots.

We are not going through all the files, but our focus is to get started with our first React app, but we will go through some of the more important files and folders.