Chapter 02 (npm, babel, and webpack) - Intuit-London/imperial-react-workshop GitHub Wiki

npm, webpack, babel

  1. Create an empty folder say chapter02 and run npm init
  2. Install react and react-dom using npm command npm install --save react react-dom
  3. Install dev dependencies of babel by using the npm npm install --save-dev babel-preset-react babel-loader babel-core
  4. Install dev dependencies of babel to use es2015 by using command npm install --save-dev babel-preset-es2015
  5. Webpack is a module bundler, lets install that using npm npm install --save-dev webpack
  6. Webpack-dev-server gives a node express server. Lets install that using npm install --save-dev webpack-dev-server
  7. Create src folder under chapter02.
  8. Create React class with the filename App.js under src folder.
import React, { Component } from 'react';
class App extends Component {
  render() {
      var elapsed = Math.round(this.props.elapsed  / 100);
      var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
      var message =
        'React has been successfully running for ' + seconds + ' seconds.';

      return (
        <div>{message}</div>
      );
  }
}
export default App;
  1. Use the above created React component and render it to a root node by creating a index.js file under src folder.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
//import './index.css';

// https://facebook.github.io/react/docs/top-level-api.html#react.createfactory
var AppFactory = React.createFactory(App);
var start = new Date().getTime();

setInterval(function() {
  // https://facebook.github.io/react/docs/top-level-api.html#reactdom.render
  ReactDOM.render(
    AppFactory({elapsed: new Date().getTime() - start}),
    document.getElementById('root')
  );
}, 100);
  1. Create empty index.html under chapter02/build folder
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Chapter 02</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
  1. Create webpack.config.js 
var webpack = require('webpack');
var path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'src');
module.exports = {
     entry: './src/index.js',
     output: {
         path: './build',
         filename: 'app.bundle.js',
     },
     devServer: {
        inline: true
     },
     module: {
         loaders: [{
             test: /\.js$/,
             exclude: /node_modules/,
             loader: 'babel-loader',
             query:{ presets:["es2015", "react"] }
         }]
     }
 }
  1. Bundle the code using webpack (with React as a loader) to create a app.bundle.js file under build folder using the command ./node_modules/webpack/bin/webpack.js
  2. Start the webpack dev server using the command ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --content-base build/
  3. Goto http://localhost:8080/
  4. Add the app.bundle.js in the index.html and refresh the browser.
<script src="./app.bundle.js"></script>

html-loader and html-webpack-plugin

  1. Install a html-webpack-plugin using npm install --save-dev html-webpack-plugin and update the webpack.config.js as follows after the modules section
const HtmlWebpackPlugin = require('html-webpack-plugin');
.......
.......
plugins: [
        new HtmlWebpackPlugin({
          title: 'Chapter02',
          template: 'src/index.html'
        })
    ]
  1. Add empty index.html file under the src folder
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Chapter 02</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
  1. Install a npm install --save-dev html-loader and update the webpack.config.js by appending the following code to the loaders section
{
  test: /\.html$/,
  loader: 'html'
}
  1. Rebuild the project using the commands below and check the results on the browser
  2. ./node_modules/webpack/bin/webpack.js
  3. ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --content-base build/

npm commands

  1. Open package.json and replace the existing script section with the below content.
"scripts": {
    "build": "node_modules/.bin/webpack",
    "start": "node_modules/.bin/webpack-dev-server --content-base build/" ,
    "test": "echo \"Error: no test specified\" && exit 1"
  }
  1. Now use the npm commands to build and run the server as follows.
  2. npm build.
  3. npm start

Useful Links

  1. https://facebook.github.io/react/
  2. https://facebook.github.io/react/docs/top-level-api.html#reactdom.render
  3. https://facebook.github.io/react/docs/top-level-api.html#react.createfactory
  4. http://buildwithreact.com/tutorial/jsx
  5. https://www.npmjs.com/
  6. http://babeljs.io/
  7. http://es6-features.org/#ValueExportImport
  8. https://webpack.github.io/
  9. http://webpack.github.io/docs/using-loaders.html
  10. http://webpack.github.io/docs/using-plugins.html
  11. https://facebook.github.io/react/docs/react-component.html
  12. https://facebook.github.io/relay/docs/api-reference-relay.html#content
  13. https://facebook.github.io/relay/docs/api-reference-relay-mutation.html#content
⚠️ **GitHub.com Fallback** ⚠️