Integrating ReactJS With Flask

Prerequisites

NPM

• NPM
• CSS and JavaScript should live in separate directories within the static directory, e.g. my_proj/static/css/ and my_proj/static/js/
• Create a package.json file in the project's static directory:

$ cd app_package/static
$ npm init

Webpack

Webpack is a module bundler, similar to Browserify, gulp, and grunt. Supposedly it is easier to configure in that it can intelligently make more assumptions about what needs to be accomplished. However that ease may come at the expense of defining more specific configurations with Browserify and gulp.

Installation

Run installation from the static directory.

$ npm install webpack --save-dev

Configuration

Create a configuration file named webpack.config.js in the static directory:

const webpack = require('webpack');
const config = {
    entry:  __dirname + '/js/index.jsx',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js',
    },
    resolve: {
        extensions: ['.js', '.jsx', '.css']
    },
};
module.exports = config;

Add run commands to package.json:

"scripts": {
    "build": "webpack -p --progress --config webpack.config.js",
    "dev-build": "webpack --progress -d --config webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --progress -d --config webpack.config.js --watch"
},

Babel

Babel converts JavaScript that is ahead of browser standards (e.g. React JSX) into JavaScript syntax that is compatible with all current browsers.

Installation

Run installation from the static directory.

$ npm install babel-preset-env --save-dev

Configuration

Add babel presets to package.json:

"babel": {
    "presets": [
      "dev",
      "react"
    ]
  }

ReactJS

React installation (again, in the static directory):

$ npm install react react-dom --save-dev