Editing Integrating ReactJS With Flask (section)

== 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