How to install ReactJS on Windows With ES6 Way

There is multiple ways to use ReactJS for your project or learning but the best part is a complete installation with all the dependencies. It makes your application more stable along with upcoming updates, so let's start tutorial How to install React JS on Windows With ES6 Way. Tutorial quite simple among all available tutorial on the web for ReactJs with ES6 on Windows.

How to install ReactJS on Windows With ES6 Way:

(You Should already installed Node.js for Windows. If you don’t have, download from https://nodejs.org/en/download/ )

Installing React JS ES6 Way

1- Choose directory (Simply press Shift Key and Right click on mouse, you will get terminal)
Enter below command:

mkdir foldername

Quick open CMD

(in my case I'm using folder name ‘react-tut’)

And  jump to the folder you recently created using:

cd react-tut 

2- Check NPM (Node Package Manager) using below Command:

npm init --yes

3- Now run below command line:

npm install --save-dev react react-dom

4- Now, we have to install some extra packages:

(Webpack) : Helps you to real time update for CSS and JS file. Webpack uses async Input/Output and has multiple type of caching levels. This makes webpack fast and incredibly fast on incremental compilation.

npm install -g webpack

(Babel) : Babel has support for the latest version of JavaScript pattern through syntax transformers. The pack­age man­ages cul­tur­ally-de­ter­mined ty­po­graph­i­cal (and other) rules, and hy­phen­ation pat­terns for a wide range of lan­guages.

npm install --save-dev babel babel-core babel-loader

and

npm install --save-dev babel-preset-es2015 babel-preset-react

5- Install WebPack locally for peer dependencies:

npm install -save-dev webpack

Webpack dev server (configuration):

npm install --save-dev webpack-dev-server react-hot-loader

6- Creating a example directory:

mkdir example

7- Jump into example directory:

cd example

8- Create webpack server configuration:

notepad webpack.config.js

9- Open webpack.config.js and add below lines:

var webpack = require("webpack");
module.exports = {
 entry: {
 "react-reading-time": [
 "webpack-dev-server/client?http://localhost:8881/",
 "webpack/hot/only-dev-server",
 "./example/react-reading-time.jsx"
 ] },
 output: {
 path: __dirname,
 filename: "[name].js",
 publicPath: "http://localhost:8881/",
 chunkFilename: "[id].chunk.js",
 sourceMapFilename: "[name].map"
 },
 resolve: {
 extensions: ["", ".js", ".jsx", ".es6"],
 modulesDirectories: ["node_modules"]
 },
 module: {
 loaders: [
 {
 test: /\.jsx$|\.es6$|\.js$/,
 loader: "babel",
 query:
 {
 presets:["es2015", "react"]
 },
 exclude: /node_module/},
 { test: /\.scss$|\.css$/, loader: "style-loader!style!css!sass" }
 ]
 },
 plugins:
 [
 new webpack.NoErrorsPlugin()
 ],
 devtool: "eval-source-map"
};

“Or” copy from below URL:

https://gist.github.com/himstar/898e1a7fd92922cdf82254980817c65f

(Sometimes apostrophes and hyphens get replaced if UTF version is different)

10- Go to root directory of your project and open package.json file:
Add below line under scripts:

webpack-dev-server --config ./example/webpack.config.js --hot --port 8881

(./example/webpack.config.js is an config file path under project folder example)

Ex-

"scripts": {

"start": "webpack-dev-server --config ./example/webpack.config.js --hot --port 8881",
"test": "echo \"Error: no test specified\" && exit 1"
 
},

11- Start npm using below command:

npm start

12- Create a index HTML file in directory example index.html as below:

<html lang="en">
<head>
<title>My First React Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div id="react"> Hello !!</div>
</div>
<script src="/react-reading-time.js"></script>
</body>
</html>

13- Create a source directory 'src' inside example folder:

mkdir src

14- Create Babel module for ES6 (we already discussed about babel):

notepad .babelrc

15- Open .babelrc , paste below lines and save:

{
presets: ['es2015', 'react']
}

16- Now you have to start npm again:

npm start

17- Ignore console errors (We will talk about later), open your browser URL and enter:

http://localhost:8881/example/

(Your test webpage up and running well !!)

reactjs example server running up

You can also download complete setup file:

Download
*npm required

* If this Helped you! Please take a Second to like and share it. *

Himanshu is young engineer living in India. Currently working at BOLD.com as UI Engineer. He is an ethical hacker & blogger too. Doing lot's of crazy stuff... If you seems interesting, go through portfolio: www.himstar.info

16 comments: On How to install ReactJS on Windows With ES6 Way

Leave a reply:

Your email address will not be published.

Sliding Sidebar

We have 20,000+ active geeks


We are team of ' Delhi Startups ' , most active startup community with strict spam policy.
We are making !deas happen..for future, business and jobs without charging anything, with connecting entrepreneurs.. It's a reason to trust on us.
Come and join or subscribe, we will defiantly give a reason to like us.

Our Facebook Page