React

How To Set Up Development Environment For React

In this blog, you will see how to set up development environment for React.

React

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.

Prerequisites

Node.js

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

NPM

Node Package Manager (NPM) is used to install the packages that you want to use, and provides a useful interface to work with them.

Install Node.js and NPM

Visual Studio Code

Install VS Code

Steps Involved

  • The following steps are needed to be followed to set up development environment for React.

  • Open Command Prompt.

  • Navigate to the respective folder to create the root folder for React.

    cd D:\ReactJS

  • Create the root folder, as shown below.

    mkdir helloworld

  • Run the following command in the console to create empty package.json file. Please refer this blog for more details.

    npm init

  • Run the following command to install webpack bundler.

    npm install webpack --save

  • Run the following command to install webpack-dev-server.

    npm install webpack-dev-server --save

  • Run the following command to install react.

    npm install react --save

  • Run the following command to install react-dom.

    npm install react-dom --save

  • Run the following command to install babel plugins.

    npm install babel-core

    npm install babel-loader

    npm install babel-preset-react

    npm install babel-preset-es2015

  • Manually create the following files in the root folder helloworld.

    index.html

    App.jsx

    main.js

    webpack.config.js

  • Open the root folder in Visual Studio Code by running the following command.

    code .

  • Open webpack.config.js file and add the below code snippet.

  1. var config = {  
  2.     entry: './main.js',  
  3.   
  4.     output: {  
  5.         path: '/',  
  6.         filename: 'index.js',  
  7.     },  
  8.   
  9.     devServer: {  
  10.         inline: true,  
  11.         port: 8080  
  12.     },  
  13.   
  14.     module: {  
  15.         loaders: [  
  16.             {  
  17.                 test: /\.jsx?$/,  
  18.                 exclude: /node_modules/,  
  19.                 loader: 'babel-loader',  
  20.   
  21.                 query: {  
  22.                     presets: ['es2015', 'react']  
  23.                 }  
  24.             }  
  25.         ]  
  26.     }  
  27. }  
  28.   
  29. module.exports = config;   
Open index.html file and add the below code snippet.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="UTF-8">  
  6.     <title>React App</title>  
  7. </head>  
  8.   
  9. <body>  
  10.     <div id="app"></div>  
  11.     <script src="index.js"></script>  
  12. </body>  
  13.   
  14. </html>   
Open App.jsx file and add the below code snippet.
  1. import React from 'react';  
  2.   
  3. class App extends React.Component {  
  4.     render() {  
  5.         return (  
  6.             <div>  
  7.                 Hello World!!!  
  8.          </div>  
  9.         );  
  10.     }  
  11. }  
  12.   
  13. export default App;   
Open main.js file and add the below code snippet.
  1. import React from 'react';  
  2. import ReactDOM from 'react-dom';  
  3. import App from './App.jsx';  
  4.   
  5. ReactDOM.render(<App />, document.getElementById('app'));   
Open package.json file and update the scripts (highlighted).
  1. {  
  2.   "name": "helloworld",  
  3.   "version": "1.0.0",  
  4.   "description": "helooworld",  
  5.   "main": "index.js",  
  6.   "scripts": {  
  7.     "start": "webpack-dev-server"  
  8.   },  
  9.   "author": "",  
  10.   "license": "ISC",  
  11.   "dependencies": {  
  12.     "react": "^15.4.2",  
  13.     "react-dom": "^15.4.2",  
  14.     "webpack": "^2.2.1",  
  15.     "webpack-dev-server": "^2.4.1"  
  16.   }  
  17. }   

Testing

Run the following command to start the Server. Open the browser and type http://localhost:8080/

npm start



Summary

In this blog, you have seen how to set up development environment for React.
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs