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.

var config = {
entry: './main.js',
output: {
path: '/',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;

Open index.html file and add the below code snippet.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React App</title>
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>

Open App.jsx file and add the below code snippet.

import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;

Open main.js file and add the below code snippet.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));

Open package.json file and update the scripts (highlighted).

{
"name": "helloworld",
"version": "1.0.0",
"description": "helooworld",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
}
}

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.