Create a React Application with Webpack

This short article gives an introduction, how you can build a react application with the use of webpack, the transpiler babel and the the typesystem flow. You will see, how to configure webpack, run development and production builds and how you develope with flowjs.

Initialize Webpack

This application is - as expected a javascript application - so we need to create our npm package definitions and requirements. What we need is the following:

• webpack (you guessed it) and the webpack-server package to easily develop applications without constantly rebuilding manually
• flow - I prefer installing it in the used packages instead of installing it globally. So everytime I switch the development machine, I just need to hit npm install and do not have to search for any global dependecies
• babel - off course; we need to strip flow types and transpile jsx to standard ES5 code

1{
2 "name": "felixastner-react-application",
3 "version": "1.0.0",
4 "description": "",
5 "main": "index.js",
6 "scripts": {
7 "start": "webpack-dev-server",
8 "flow": "flow"
9  },
10 "keywords": [],
11 "author": "Felix Astner",
12 "license": "MIT",
13 "dependencies": {
14 "react": "^16.4.1",
15 "react-dom": "^16.4.1"
16  },
17 "devDependencies": {
18 "babel-cli": "^6.26.0",
19 "babel-core": "^6.26.3",
20 "babel-loader": "^7.1.5",
21 "babel-plugin-transform-async-to-generator": "^6.24.1",
22 "babel-plugin-transform-class-properties": "^6.24.1",
23 "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
24 "babel-plugin-transform-runtime": "^6.23.0",
25 "babel-preset-env": "^1.7.0",
26 "babel-preset-flow": "^6.23.0",
27 "babel-preset-react": "^6.24.1",
28 "babel-register": "^6.26.0",
29 "file-loader": "^1.1.11",
30 "flow-bin": "^0.92.1",
31 "html-webpack-plugin": "^3.2.0",
32 "webpack": "^4.16.1",
33 "webpack-cli": "^3.0.8",
34 "webpack-dev-middleware": "^3.1.3",
35 "webpack-dev-server": "^3.1.4"
36  }
37}
38
39

After this, you can initialize flow by running the following command. Flow will generate an empty configuration:

1npm run flow init

Now let's get into the webpack configuration:

1// webpack.config.js
2
3
4const process = require('process');
5const path = require('path');
6const {resolve} = path;
7
8
9
10
11const HtmlWebpackPlugin = require('html-webpack-plugin');
12
13
14module.exports = {
15 'mode': (process.env.NODE_ENV === 'production' ? 'production' : 'development'),
16 'entry': './src/index.js',
17 'output': {
18    'path': __dirname + '/static',
19    'filename': '[name].[chunkhash:8].js',
20        publicPath: '/'
21     },
22     devServer: {
23        contentBase: path.join(__dirname, 'dist'),
24        compress: true,
25        port: 3000 
26     },
27 'devtool': 'source-map',
28 'module': {
29    'rules': [
30        {
31            'test': /\.(js|jsx)$/,
32            'exclude': /node_modules/,
33            'use': {
34                    loader: 'babel-loader',
35                    options: {}
36             }
37         },
38     ]
39  },
40  'plugins': [
41        new HtmlWebpackPlugin({
42            title: 'Development'
43        })
44    ]
45};

Last but not least, we create the webpack configuration. There are a few options, which I need to explain here:

• mode: This handles the internal mode of webpack. It allows minifying and other production optimizations.
• entry: This is the file, webpack starts its process with. You can even configure an array of entry files.
• output: Defines the path, where webpack puts its bundles. If you have multiple entry points, the filename pattern describes the output filenames, where as name is the entry key. devServer applies some configuration for development, like the port, the application is running on.
• devtool allows us to define which type of source map we want to use, and if we even want to use one
• module.rules: This array lists a set of loaders. More on that later.
• plugins: Fulfill a lot of different tasks. They can further optimize the resulting bundle, handle assets or - as in this case - create a new html file.

Webpack Loaders

As you see above, we use a loader called babel-loader. Babel is a Javascript transpiler, which transpiles new Javascript (ES6/7/8) and custom Javascript language extensions like JSX into standardized Javascript, even the Internet Explorer is able to understand, but can be configurated otherwise, off course.

To be able to execute this loader, babel requires some configuration (.babelrc):

1{
2 "retainLines": true,
3 "presets": [
4       "env",
5       "react",
6       "flow"
7 ],
8 "plugins": [
9       "transform-es2015-arrow-functions",      
10       "transform-runtime",
11       "transform-async-to-generator",
12       "transform-class-properties"
13  ]
14} 

The presets handle JSX and strip flow types. The plugins allow us to write a more understandable, beautiful code. That's all about it. We can now focus on the application code.

Writing the Application

This article is just an introduction, so we just create one react component:

1// src/components/Application/Application.js
2// @flow
3import React, {Component} from 'react';
4
5
6/**
7 * Application has just one property: A title of type string
8 */
9export type ApplicationProps = {
10    title: string
11}
12
13
14/**
15 * Define the component Application.
16 */
17export default class Application extends React.Component<ApplicationProps> {
18 render() {
19    // use typesave props
20    const {title} = this.props;
21
22
23    return <div>
24        Application: <b>{title}</b>
25    </div>;
26  }
27}

The usage of the application component is as easy as follows.

1// src/index.js
2// @flow
3
4
5import React from 'react';
6import { render } from 'react-dom';
7import Application from './components/Application/Application'
8
9
10const root = document.createElement('div');
11document.body.appendChild(root);
12
13
14// use the Application component with its typesafe properties. 
15render( <Application title="Example Application" /> ,
16        root,
17);
18
19