React Tutorials - Day Two - Environment Setup

This is the second article of this series, in previous articles we had a brief introduction to React and covered the required concepts of React like JSX, Virtual DOM and one way data binding. If you didn'tt read the previous article then I recommended you first read it.

• React Tutorials - Day One - React Introduction

Today we will learn how to set up a development environment for React. I discuss three different methods to setup a React project. These three methods are

• Using the NPM
• Using Visual Studio 2017 SPA templates
• Using the Webpack and Babel

Let’s read about each method one by one. Before starting any method there will be npm installed in your system, without npm we can’t setup the React environment. So if npm is not installed in your system then first of all go to the Node.js official website and download and install the node.js . When you install the Node.js npm will be automatically installed in your system.



Using the NPM

Download React Global Packages

Now open your command line terminal and paste the following line of code and press enter.

“npm install -g create-react-app”

Above command install the global packages for React.



Create React App

After installing the React global packages now run “create-react-app reactapp” command, this command will create a React project and name this project as “reactapp”.



Run the Project:

After creating the project now change the directory and run “cd reactapp” command. Now you are in root directory of the project again run the “npm start” command this command run the React project on “3000” port.



In my case port number 3000 is used by another application so it runs the project on 3001 port. When you open the “localhost:3000” URL in your browser you will get following output.


If you are getting the above screen, then congratulations you successfully configure and run the React application. Don’t worry about the code written into the project code we will cover all the topics in the next article.

Using Visual Studio SPA Templates

If you are using Visual Studio 2017 then the easiest way to get started is by using one of the project templates which are made available. These plug into the standard dotnet new command and work on Windows and Mac in addition to Linux. To install the (Single Page Application)SPA templates, open the command prompt and run the command given below.

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*



The command given above takes some time and installs several templates for SPA like Angular, Knockout.js, React etc. The benefit of all these templates are that we don’t need to worry about the whole setup process.

To generate a new project, create an empty folder and name this project as reactCore here. After creating an empty folder, now change the directory and go to this project. Now, run the command “dotnet new React“



This command creates a template project for React Application. Now, run “dotnet restore” commanpm nd. This command builds MSBuild file and restore all .NET dependencies.



After installing all the .NET dependencies, now we install Node.js dependencies. Run “npm install” command. This command takes a couple of minutes to install the required Node.js dependencies.



After creating the template project and installing all the required dependencies, now run “start reactCore.csproj” command. This command will open your project in Visual Studio.





Now, press Ctrl + F5 and run the project. When you run this project you will get the following screens.





Using Webpack and Babel

So far we set up the React Environment set up using the npm and Visual Studio 2017 SPA templates. Now we will focus on the Webpack and babel to setup the React project. I like this method and recommend this method among all three methods because it provides a full functionality to install the required packages and makes the configuration manually. If you see the project structure of the project created in Visual Studio 2017 then you will find that webpack and babel is also used there. So now we create the same project with manual configuration. Let’s start the setup.

First of all create an empty folder and name this folder as “reactwebpack”, after creating the folder now open this folder into any IDE; here I am using the Visual Studio Code. If you are new to Webpack then read this article. From this article you will get a brief intro about the webpack and learn what webpack is and how it works.

 

• React Tutorials - Day One - React Introduction

 

Step 1 Create Package.json file

Now open the command line terminal and run the “npm init” command. When you run this command it will ask several question, you don’t need to answer all the questions just press enter and skip the questions.



After completing this process you will find that a “package.json” file has been created in your project. Package.json is main configuration file of our project and contains the information of the packages uses in our project.



Step 2 Install the Required Libraries

Now we needs to install the required libraries to run and configure the application. Let’s install all these libraries.

Now run “npm install react react-dom --save” command; this command installs the react and react-dom packages into our project.



Now we install the webpack dependencies, for this run the “npm install webpack webpack-dev-server –save-dev” command.


Let’s install the react related packages. For this run the “npm install babel-core babel-loader babel-preset-react babel-preset-es2015 babel-preset-stage-2 --save-dev” command, this command install the several babel packages.



Here babel-core and babel-loader are main dependencies and other dependencies provide the set of rules to babel for the react development. Babel is the heart of any react application.



In React we use the JSX and write the JavaScript code into ES6 format and all the browsers don’t understand the ES6 format. So we need an intermediary that can convert the ES6 code to ES5 code. So babel runs the ES6 code in our browser.



After installing all the required packages, you will find that all the dependencies are configured in your package.json file.

Step 3 Configure the web server and loaders.

Now create a “webpack.config.js” file in root directory of the project and paste the following code into this file.

var path=require("path");

var srcPath=path.resolve(__dirname,"src");
var distPath=path.resolve(__dirname,"dist");

var config={
    entry: srcPath+"/app/app.js",
    output:{
        path:srcPath+"/app",
        filename:"bundle.js",
        publicPath:"/app/"
    },
    devServer: {
      inline: true,
      port: 4500
   },
   resolve: {
    extensions: [ '.js', '.jsx']
  },
    module:{
        loaders:[
            {
                test:/\.jsx?$/,
                exclude: /node_modules/,
                include: /src/,
                loader:"babel-loader",
                query: {
               presets: ['es2015','stage-2','react']
            }

            }
        ]
    }
}

module.exports=config;

This file contains the configuration settings for the webpack, here we defined the entry point and output path for the webpack. Using the “devServer” we defined the port number on which our application will run. The resolve is used to defined the file extensions for which our loaders will run. In module section we define the loader for “jsx” files and make the required configurations.



Our configuration file is ready for the webpack but we need to write the code that can start the webpack-server, so open “package.json” file and write following code into script section.

"start": "webpack-dev-server"



Step 4 Create the require files

Now create a folder in root directory of the project and name this folder as “src”. After creating the “src” folder now create another “app” and “main” folder in “src” folder. Now create an “app.js” file in “app” folder and paste the following code into this file.

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import Main from '../main/main.jsx';

ReactDOM.render(<Main/>, document.getElementById('app'));

Now create a “main.jsx” file into “main” folder and paste the following code into this file.

Main.jsx

import React from 'react';

class Main extends React.Component {
   render() {
      return (
         <h2>
            Hello React!!!
         </h2>
      );
   }
}

export default Main;

After creating all the required files now we need to create an “index.html” file so create a “index.html” file in root directory of the application and paste the following code into this file.

Index.html

<!DOCTYPE html>
<html lang = "en">

   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>

   <body>
      <div id = "app"></div>
      <script src = "/app/bundle.js"></script>
   </body>

</html>

Now the following will be the structure of our project.



After all these things now our project is ready to run, so open the command line terminal and run “npm run start” command.



When you run this command it will start the webpack-server and run the application on 4500 port. Now open the “http://localhost:4500/” URL in your browser.


If you are getting the above screens that means you successfully configured the React environment using the webpack and babel.

Conclusion

In this article we learned how to set up a development environment for React. In the next article we will start the work on actual concepts of React. If you have any issues or get any errors related to environment setup then write it in the comment sections.

Thanks for reading the article.