Editing Integrating ReactJS With Flask (section)

== Prerequisites ==

=== NPM ===

==== Configuration and installation ====

* [https://npmjs.com 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:<ref>[https://codeburst.io/creating-a-full-stack-web-application-with-python-npm-webpack-and-react-8925800503d9 Creating a full-stack web application with Python, NPM, Webpack and React], codeburst.io</ref>
<syntaxhighlight lang=''sh''>
$ cd app_package/static
$ npm init
</syntaxhighlight>

==== Installing dependencies ====

To install dependencies defined in `package.json`, navigate to the directory containing the `package.json`: <ref>[https://docs.npmjs.com/getting-started/using-a-package.json Working with package.json] - NPM Getting Started</ref>

<syntaxhighlight lang=''sh''>
$ cd path/to/project/
$ npm install
</syntaxhighlight>

=== Webpack ===

[https://webpack.js.org/guides/getting-started/ 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. <ref>[https://medium.freecodecamp.org/browserify-vs-webpack-b3d7ca08a0a9 Browserify vs Webpack] - Medium (2015)</ref>

==== Installation ====

Run installation from the `static` directory.

<pre>
$ npm install webpack webpack-cli --save-dev
</pre>

==== Configuration ====

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

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

Add run commands to `package.json`:

<syntaxhighlight lang="javascript" highlight="2,3,5">
"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"
},
</syntaxhighlight>

=== Babel ===

[https://babeljs.io 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.

<pre>
$ npm install babel-loader babel-core babel-preset-env babel-preset-react --save-dev
</pre>

==== Configuration ====

Add babel presets to `package.json`.

<syntaxhighlight lang="javascript">
  "babel": {
    "presets": [
      "es2015",
      "react"
    ]
  }
</syntaxhighlight>

Alternatively, the presets could be added to a `.babelrc` file:

<syntaxhighlight lang="javascript">
/* 
    ./.babelrc
*/  
{
    "presets":[
        "es2015", "react"
    ]
}
</syntaxhighlight>

Add a babel-loader rule to the Webpack config:

<syntaxhighlight lang="javascript">
module: {
  rules: [
    {
      test: /\.jsx?/,
      exclude: /node_modules/,
      use: 'babel-loader'
    }
  ]
}
</syntaxhighlight>

=== ReactJS ===

[https://reactjs.org React] installation (again, in the `static` directory):

<pre>
$ npm install react react-dom --save-dev
</pre>