React JS Setup using Npm Babel and Webpack:-
1 |
v8.7.0 |
So once you got the output as I have shown above that means your node JS is installed
- We Will type npm init to initialize npm .
- Will be getting one prompt so just accept the default for all the prompts whatever you get and continue.
- npm init will create a package.json file in your working directory .
- We Create One folder named as hello-world and then run npm init as shown below.
123mkdir hello-worldcd hello-orldnpm init
Configuring Babel :-
React Js Contains ES6 based code which most browsers doesn’t support at this point of time .Hence we need some tool to convert our ES6 code to plain vanilla javascript , and the tool is Babel . Let’s install all babel related dependencies one by one . Type in following commands one by one .
1 2 3 |
>npm install -g babel >npm install -g babel-cli >npm install --save babel-core babel-loader babel-preset-react babel-preset-es2015 |
Now install react related dependencies .
1 2 |
npm install --save react npm install --save react-dom |
Configuring Webpack:-
Webpack is the bundler we will use, which will bundle all our javascript files.Its is basically a module bundler which bundles all our Javascript modules and assets into one or more bundles.
let’s install webpack using NPM
1 |
npm install --save webpack |
Install webpack dev server , we use it for live reloading . It helps us to provide fast in memory access to assets bundled by webpack.
1 |
npm install --save webpack-dev-server |
Now our webpack requires some config files let’s create a file named webpack.config.js
webpack.config.js:-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
config = { entry: './main.js', output: { path:'/target', filename: 'index.js', }, devServer: { inline: true, port: 8090 }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } } ] } } module.exports = config; |
You Can see here , entry and output are mandatory to be provided in this config file .Our UI will run on port 8090 as configured in webpack.config.js Lets go ahead and create a file known as main.js under hello-world directory.
main.js
1 2 3 4 5 |
<span style="font-family: 'andale mono', monospace;">import React from 'react'; import ReactDOM from 'react-dom'; import Hello from './Hello.jsx'; ReactDOM.render(<Hello />, document.getElementById('hello'));</span> |
Create A Basic React Component :-
Create a file named Hello.jsx .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<span style="font-family: 'andale mono', monospace;">import React from 'react'; class Hello extends React.Component { render() { const element= <div> <h1>Hello World from ReactJS</h1> <hr/> Yo Yo ! Welcome! </div>; return (element); } } export default Hello;</span> |
This is our basic component which just prints a basic html .You can see we are importing this in our main.js above
Create Index File:-
We are creating a file named as index.html.Our react JS transpiled minified code is added in index.html.
index.html
1 2 3 4 5 6 7 8 9 10 11 12 |
<span style="font-family: 'andale mono', monospace;"><!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title>React App</title> </head> <body> <div id = "hello"> </div> <script src = "index.js"></script> </body> </html></span> |
A important point to remember here is that we have referred index.js here , which is referred from memory .Webpack loads index.js into memory if you are running in dev mode.Update package.json to run webpack dev server as follow add “start”: “webpack-dev-server –hot” under scripts property in package.json.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<span style="font-family: 'andale mono', monospace;">{ "name": "helo-world", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server --hot" }, "author": "", "license": "ISC", "dependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "react": "^16.2.0", "react-dom": "^16.2.0", "webpack": "^3.10.0" } } </span> |
Running the Application:-
Type “npm start” , you get following output . If you face any issues kindly comment.
output:-
Download Code
“Its Always Better To Learn and Share Instead Learn and Forget”
Related Posts:-
Overload Or Override Static Methods in Java
[…] React JS Setup using Npm Babel and Webpack […]
[…] React JS Setup using Npm Babel and Webpack […]
[…] React JS Setup using Npm Babel and Webpack […]
[…] We must always keep in mind “JSX doesn’t Separates Technologies it separates Concerns” .It helps us to write reusable code . Look at next Article on How to Setup React JS using JSX and Babel. […]
Its great as your other content : D, thankyou for putting up.