Editing Integrating ReactJS With Flask

[[Category:ReactJS]][[Category:Flask]][[Category:Python]][[Category:Web Development]]
== 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>

== Front-end ==

Example can be found at [https://github.com/dbarchowsky/DailyProgress/tree/master/daily_progress/static DailyProgress] (GitHub).

=== JavaScript ===

Create a React component:

<syntaxhighlight lang="javascript"> 
/*
 * . location e.g. /my_app/js/components/App.jsx
 */
import React from 'react';

export default class App extends React.Component {
    render() {
        return (
            <div>Hello, World from React component!</div>
        );
    }
}
</syntaxhighlight>

Create an entry point, e.g. `/static/js/index.js`:

<syntaxhighlight lang="javascript"> 
/*
 *  location e.g. /my_app/js/index.js
 */
import React from 'react';
import ReactDOM from 'react-dom';
import Activities from './components/App.jsx';

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

=== Jinja2 template ===

Include the output script as defined in `webpack.config.js`:

<syntaxhighlight lang="jinja">
    <script defer src="{{ url_for('static', filename='dist/bundle.js') }}"></script>
</syntaxhighlight>

Make sure there is an element in the DOM that will match the element passed to `ReactDOM.render()` in the entry point JavaScript file.

Make sure a route is defined in the Flask app for the Jinja template.

=== Building the distribution package ===

Use any of the scripts defined in `package.json` to build the distribution, e.g.:

<syntaxhighlight lang="sh">
$ npm run watch
$ npm run bulid
$ npm run dev-build
</syntaxhighlight>

Any changes to the JavaScript requires the distribution to be rebuilt. This can be handled automatically by having `npm run watch` running in the background.

The browser will likely cache the JavaScript bundle, making it necessary to explicitly refresh it in the browser to view changes made after running the server for the first time.

=== Viewing results ===

Run the Flask server with `python run.py`.

In a browser navigate to the appropriate route in the Flask app, e.g. http://localhost:5000/

The output from the 

== Notes ==
=== See also ===

* [https://scotch.io/tutorials/setup-a-react-environment-using-webpack-and-babel Set Up A React Environment Using Webpack and Babel] - Scotch.io

=== References ===
<references />