This is an example for ReactJS with Hot Loader:
- You must have NodeJS installed:
- https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions
- Running these commands:
- npm init
- npm install -S express lodash react react-dom
- npm install babel-core babel-loader babel-preset-es2015 babel-preset-react react-hot-loader webpack webpack-dev-server --save-dev
- npm install -g webpack webpack-dev-server
- Create webpack-dev-server global command in case it not works:
- Create bash file bash.sh:
#!/bin/bash path=$(readlink -f .) path="$path/node_modules/.bin/webpack-dev-server" sudo ln -s $path /usr/local/bin echo "DONE!";
- sudo bash.sh
- Create webpack.config.js file:
var webpack = require('webpack'); var path = require('path'); module.exports = { devtool: 'inline-source-map', entry: [ 'webpack-dev-server/client?http://127.0.0.1:8080/', 'webpack/hot/only-dev-server', './src' ], output: { path: path.join(__dirname, 'public/build'), filename: 'bundle.js', sourceMapFilename: 'bundle.map', publicPath: '/' }, resolve: { modulesDirectories: ['node_modules', 'src'], extensions: ['', '.js'] }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015'] } ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ], devServer: { contentBase: "./public", hot: true } };- Create index.html file:
<html> <head> <title>React</title> </head> <body> <div id="app"></div> <script src="build/bundle.js"></script> </body> </html>- Create index.js file:
import React from 'react'; import { render } from 'react-dom'; import App from 'components/app'; render(<App />, document.getElementById('app')); - Create app.js file:
import React from 'react'; export default class App extends React.Component { render() { return ( <div> <h1>Hello world!</h1> </div> ); } }- At the end, you might have a directory tree like this:
- Rebuild:
- webpack
- Run server:
- webpack-dev-server
- or
- node_modules/.bin/webpack-dev-server
- Open web browser:
- http://localhost:8080/
Good luck!
