Post
Ask Question

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:

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

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

React

For  npm version enter the following command:

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

React

React

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

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

    React
  1. After creating the project, navigate to the created project folder by typing following command,

    ‘cd PROJECT_NAME’ and press enter.
  1. 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:
    React

    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,

    React

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.

React

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.

All React components, css styles, images and anything else our app needs go to the ‘src’ folder.

In the src folder, we have index.js which is the main entry point for our app. In index.js, we render the App React element into the root DOM node. Applications built with just React usually have a single root DOM node.

File : index.js

  1. ---------code start---------  
  2. import React from 'react';  
  3. import ReactDOM from 'react-dom';  
  4. import './index.css';  
  5. import App from './App';  
  6. import registerServiceWorker from './registerServiceWorker';  
  7.   
  8. ReactDOM.render(<App />, document.getElementById('root'));  
  9. registerServiceWorker();  
  10. ---------code end---------  

In index.js, we import both React and ReactDOM which we need in order to work with React in the browser. React is the library for creating views. ReactDOM is the library used to actually render the UI in the browser.

index.js imports index.css, App component and registerServiceWorker with the following lines:

  1. ---------code start---------  
  2. import './index.css';   
  3. import App from './App';   
  4. import registerServiceWorker from './registerServiceWorker';  
  5. ---------code end---------  
  6. It then resnders app with:  
  7. ---------code start---------  
  8. ReactDOM.render(<App />, document.getElementById('root'));  
  9. ---------code end---------  

The last line registerServiceWorker() is meant to create progressive web apps (PWA) which are necessary for mobile React Native apps to work offline.

File: App.js

  1. ---------code start---------  
  2. import React, { Component } from 'react';  
  3. import logo from './logo.svg';  
  4. import './App.css';  
  5.   
  6. class App extends Component {  
  7.   render() {  
  8.     return (  
  9.       <div className="App">  
  10.         <header className="App-header">  
  11.           <img src={logo} className="App-logo" alt="logo" />  
  12.           <h1 className="App-title">Welcome to React</h1>  
  13.         </header>  
  14.         <p className="App-intro">  
  15.           To get started, edit <code>src/App.js</code> and save to reload.  
  16.         </p>  
  17.       </div>  
  18.     );  
  19.   }  
  20. }  
  21.   
  22. export default App;  
  23. ---------code end---------  

Every React application has at least one component: the root component, named App in App.js which extends the Component class provided by React library.

The package.json is the node package configuration which lists the third party packages our project uses.

Node_modules folder is created by Node.js and puts all third-party modules listed in package.json in it.

First React Component

So far we have just created the new React application name ‘hello_world’ time print the message on default component created by the ‘create-react-app’ command. Open the ‘App.js’ file and replace the line no.14 with the below line:

---------code start---------

<h1> My First Hello World React Application! </h1>

---------code end---------

After replacing the above line, save the changes. Notice that the browser reloads automatically with the revised title. Because React compiler is running in the ‘watch’ mode, it detects that there is a file change and re-compiles the file. In the Chrome browser, the app gets refreshed automatically so you don’t have to refresh the page every time your code changes. Please see the final output in the below screenshot:

React

Summary

I hope that beginners, as well as students, understood how to set up the development environment for React. If you have any suggestions regarding this article, please contact me. 

Stay tuned for other concepts of React coming soon!

“Learn It, Share it.”

 <= Previous Article   Next Article =>


Similar Articles