Skip to content

This is a tutorial on how to get started developing a client side application using ReactJS, Webpack and Npm

Notifications You must be signed in to change notification settings

jansoren/react-webpack-tutorial

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 

Repository files navigation

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:

  1. Cloning this repo git clone git@github.com:jansoren/react-webpack-tutorial.git
  2. Run npm install from the myapp-folder
  3. Run command webpack
  4. 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

1. Initializing your project with npm

  1. Enter your project main folder. For this tutorial I will use myapp as folder and you will find the resulting code there
  2. Run npm init to create the project package.json file
  3. Press on the npm init questions to get the default value
  4. 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

  1. Open myapp-folder in your preferred IDE or Atom
  2. 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;
  1. Create folder myapp/app to contain all your application files.
  2. 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'));
  1. Install React DOM and add it to your package.json file automatically using npm install --save react react-dom
  2. Install Babel to transform the content of a .js file from ES6 to ES5 npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
  3. 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', 'env']
        }
      }
    ],
  }
};
  1. 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>
  1. Run command webpack in your main folder that will result in something like this:
Hash: 35d746ba5bf01c587890
Version: webpack 3.10.0
Time: 829ms
  Asset    Size  Chunks                    Chunk Names
bundle.js  728 kB       0  [emitted]  [big]  main
[81] ./main.js 572 bytes {0} [built]
  + 183 hidden modules
  1. Open /dist/index.html to see your client side application

  2. If you want some pointers on developing your client side application you should check these sites out:

About

This is a tutorial on how to get started developing a client side application using ReactJS, Webpack and Npm

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published