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;
- <!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>
- import React from 'react';
-
- class App extends React.Component {
- render() {
- return (
- <div>
- Hello World!!!
- </div>
- );
- }
- }
-
- export default App;
- import React from 'react';
- import ReactDOM from 'react-dom';
- import App from './App.jsx';
-
- ReactDOM.render(<App />, document.getElementById('app'));
- {
- "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
![]()
SummaryIn this blog, you have seen how to set up development environment for React.