How to install React JS on windows with ES6 way

Let's start a tutorial and see how to install React JS on windows with ES6 way because there are multiple ways to use ReactJS for your project but the best part is installed completely react with all the dependencies instead of CDN. It makes your application more stable along with upcoming updates. Tutorial quite simple among all available tutorial on the web for ReactJs with ES6 on Windows.

How to install React JS on Windows With ES6 Way:

(You should have 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 types of cache levels. This makes webpack fast and incredibly fast on incremental compilation.

npm install -g webpack

(Babel) : Babel has support for the latest version of a 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

Where --save-dev is used to save the package for development purpose and --save is used to save the package required for the application to run (you can use accordingly)

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 an 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 copy code from my GitHub repo:

https://gist.github.com/himstar/898e1a7fd92922cdf82254980817c65f(Sometimes apostrophes and hyphens get replaced if UTF version is different)

You can also copy from below code section but highly recommended to take config data from above URL (Sometimes apostrophes and hyphens get replaced if UTF version is different)

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"
};

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

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

(./example/webpack.config.js is a 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 (node package manager) using below command:

npm start

12- Create an 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 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

* Is this helped you? you can gift us a coffee or share your feedback*

Himanshu is a young engineer living in India. Currently working at BOLD.com as UI Engineer. He is an ethical hacker & blogger too, doing lots of crazy stuff... If you seems interesting, go through portfolio: www.himstar.info "Open Source. Millions of open minds can't be wrong!"

26 comments: On How to install React JS 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