step1: create a new folder
step 2: npm init
params: any or empty(entry point: index.js default)
step 3:npm install --save react react-dom
As of npm 5.0.0, installed modules are added as a dependency by default,
--save is not needed
there are the complementary options --save-dev and --save-optional which save
the package under devDependencies and optionalDependencies, respectively.
This is useful when installing development-only packages, like grunt or your testing library.
step 4:npm install webpack webpack-dev-server
webpack : for bundling to single file
webpack-dev-server: for running the server(live reload)
step 5:npm install -g --save-dev babel-cli babel-core babel-loader@7 babel-plugin-transform-object-rest-spread babel-preset-es2015 babel-preset-react babel-preset-stage-0 babel-register
babel: to convert our es6 code to es5 browser understandable code
--save-dev:only for dev server(development environment)
step 6:
setting up webpack config file
in the rootfolder/webpack/webpack.dev.config.js
var webpack = require('webpack');
var path = require('path');
var parentDir = path.join(__dirname, '../');
module.exports = {
entry: [
path.join(parentDir, 'index.js')
],
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
query: {
presets: ['react', 'es2015']
}
}
}, {
test: /\.less$/,
use: ["style-loader", "css-loder", "less-loader"]
}
]
},
output: {
path: parentDir + '/dist',
filename: 'bundle.js'
},
devServer: {
contentBase: parentDir,
historyApiFallback: true,
open: true
}
};
babel-loader for loading js/jsx files and used less-loader for loading less files.
devServer: {open: true} open inbroweser after completing
step 7:npm install --save-dev style-loader css-loader less-loader
npm install --save-dev less
step8:finally create index.html in rootfolder (place to load all)
Ideal React Seed
step9:create index.js(entry point for webpack to bundle into bundle.js)
for react default and basic be like this
import React from 'react';
import ReactDOM from 'react-dom';
// main app
import App from './containers/App';
ReactDOM.render(, document.getElementById('app'))
STEP 10 : in rootfolder/containers/App.js(can be any name(loading component app))
import React, {Component} from 'react';
export default class App extends Component {
render () {
return This is my new react app
}
}
STEP 11: in your package.json inside script object add a dev script like
"dev": "./node_modules/.bin/webpack-dev-server --config ./webpack/webpack.dev.config.js"
as
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "./node_modules/.bin/webpack-dev-server --config ./webpack/webpack.dev.config.js"
}
STEP 12:npm install -g webpack webpack-cli webpack-dev-server (FOR
STEP 13:npm run dev
STEP 14: CLT+C (EXIT SERVER)
step 15:deploy
in your package.json inside script object add a built script like
"build": "./node_modules/.bin/webpack --config ./webpack/webpack.dev.config.js"
as
as
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "./node_modules/.bin/webpack --config ./webpack/webpack.dev.config.js"
,
"dev": "./node_modules/.bin/webpack-dev-server --config ./webpack/webpack.dev.config.js"
}
Extra npm codes:npm cache clean --force