Learn React v2: Webpack

Saturday, March 26, 2016

Overview

I made several posts on react, but the web has changed a lot over the past year and I needed to make an updated post on how to Javascript. The two things that have changed Javascript are Babel(Lets you write ES6 and ES7 code) and Webpack (Which bundles modules and loads them for you at the right time). I’m going to go over how to use Babel and Webpack together with React. This post is just a short summary of this amazing post and the source code.

Content

The end structure will look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13

node_modules
app
    components
        App.jsx
        MyText.jsx
    index.css
    index.jsx
build
    bundle.js
    index.html
.babelrc
package.json
webpack.config.js

package.json

You should start out with an empty package.json file.

1
2
3
4

{
  "name": "my-package",
  "version": "1.0.0",
}

We have to load the necessary modules.

1
2
3
4
5
6
7
8
9
10

# install npm if you haven't already
curl -L https://www.npmjs.com/install.sh | sh

# babel-loader lets you work with babel and webpack nicely
npm i babel-{loader,core} --save-dev

npm i react react-dom --save
npm i webpack webpack-dev-server webpack-merge --save-dev

npm i css-loader style-loader --save-dev

Webpack

Now we have to configure Webpack to do things in webpack.config.js.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

'use strict';

const path = require('path');
const merge = require('webpack-merge');

const PATHS = {
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build')
};

const common = {
  entry: {
    app: PATHS.app
  },

  resolve: {
    extensions: ['', '.js', '.jsx']
  },

  output: {
    path: PATHS.build,
    filename: 'bundle.js'
  },

  module: {
    loaders: [
      {
        test: /\.css$/,
        loaders: ['style', 'css'],
        include: PATHS.app
      },

      {
        test: /\.jsx?$/,
        loaders: ['babel?cacheDirectory'],
        include: PATHS.app
      }
    ]
  }
};

module.exports = merge(common, {});

We have to break down what each property does because that’s a bunch of code.

  • entry: This one is obvious. This is the app’s entry point.

  • resolve: This is amazing. It will let you just write import Thing from './myScript' and it will look for a js file called myScript in the current working directory.

  • output: Where to build the bundle file that gets generated.

  • module: loaders will let you require .css and .jsx files.

Babel

Right now, babel isn’t doing anything, we need a .babelrc. That’s because we haven’t told babel what to do. Babel runs on two types of plugins. There are syntax plugins and transform plugins. To make things easier for devs, babel supports presets (in our case, we want babel to be preset to developing react).

1

npm i babel-preset-{es2015,react} --save-dev

Extra features

We’ll also add extra functionality from this plugin. We’ve added the following features.

  • Property initializers: Allows us to use the syntax myMethod = (arguments) => {}

  • Decorators: Gives us the ability to annotate classes to give them additional functionality using the syntax @MyDecorator(DoThing). Decorators exists by default in other languages like python, c# and java. They’re very powerful.

  • Object rest/spread: Lets us do let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; and now z = {a:3, b:4}.

1

npm i babel-preset-survivejs-kanban --save-dev

Loading the Babel Settings

We load all these settings into our .babelrc file which will preset babel to work with reactjs.

1
2
3
4
5
6
7

{
  "presets": [
    "es2015",
    "react",
    "survivejs-kanban"
  ]
}

Creating the App class

app/components/App.jsx

1
2
3
4
5
6
7
8

import React from 'react';
import MyText from './MyText.jsx';

export default class App extends React.Component {
  render() {
    return <MyText />;
  }
}

Creating the MyText class

app/components/MyText.jsx

1
2
3

import React from 'react';

export default () => <div>My random note</div>;

Entry point

app/index.jsx

1
2
3
4
5
6
7

import './index.css';

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

Index.html

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React1</title>
  </head>
  <body>
    <div id="app"></div>

    <script src="./bundle.js"></script>
  </body>
</html>

Index.css

1
2
3

body {
  background-color:lightgrey;
}

Conclusion

To build the js, write npm run build in the terminal. To start the page, write npm run start in the terminal.

Title

Random Posts