React Webpack Tutorial

This tutorial will cover how to get started developing a client side application using these technologies:

You can either follow the tutorial below or just jump to the resulting code with:

Cloning this repo git clone [email protected]:jansoren/react-webpack-tutorial.git
Run npm install from the myapp-folder
Run command webpack
Open /myapp/dist/index.html

If you find the tutorial helpful, and maybe learned something new, please give it a star here. If you have improvement suggestions please create an issue or a pull request. Enjoy :-)

Tutorial prerequisites

Use your preferred IDE or you can install Atom
Install NodeJS
Install Webpack - npm install -g webpack

1. Initializing your project with npm

Enter your project main folder. For this tutorial I will use myapp as folder and you will find the resulting code there
Run npm init to create the project package.json file
Press on the npm init questions to get the default value
Install Webpack with npm install --save-dev webpack. When npm uses --save-dev it automatically adds the webpack package to the package.json

You have now created an initial package.json file that we later on will fill with the necessary packages for installing the application with npm install.

2. Create initial application files

Open myapp-folder in your preferred IDE or Atom
Create your application Webpack config file webpack.config.js in main project folder with this initial content:

var config = {
  context: __dirname + "/app",
  entry: "./main.js",

  output: {
    filename: "bundle.js",
    path: __dirname + "/dist",
  },
};
module.exports = config;

Create folder myapp/app to contain all your application files.
Create your application main file main.js with this initial content:

var React = require('react');
var ReactDOM = require('react-dom');

var Content = React.createClass({
  render: function() {
    return (
      <div>
        <b>Congratulations</b>, you are now ready to implement your client side application! Enjoy :-)
      </div>
    );
  }
});
ReactDOM.render(<Content />, document.getElementById('content'));

Install React DOM and add it to your package.json file automatically using npm install --save react react-dom
Install Babel to transform the content of a .js file from ES6 to ES5 npm install --save-dev babel-preset-react babel-preset-es2015 babel-core babel-loader
In your webpack.config.js add the babel-loader that you just installed like this:

var config = {
  ...
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ],
  },
};

Create folder myapp/dist and create index.html file with content:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React Webpack Tutorial!</title>
  </head>
  <body>
    <div id="content"></div>
    <script src="bundle.js"></script>
  </body>
</html>

Run command webpack in your main folder that will result in something like this:

Hash: dd141258ef660950584c
Version: webpack 1.12.11
Time: 3711ms
  Asset    Size  Chunks             Chunk Names
bundle.js  676 kB       0  [emitted]  main
  + 159 hidden modules

Open /dist/index.html to see your client side application
If you want some pointers on developing your client side application you should check these sites out:

unam3 / react-webpack-tutorial Goto Github PK