Shin's PHP: Ubuntu - ReactJS with Hot Loader Installation

Hi there,

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!

Shin's PHP

Wednesday 10 August 2016

Ubuntu - ReactJS with Hot Loader Installation

No comments:

Post a Comment