React and Wagtail

How React is integrated on the site

React was added to the site following *a modifed version of this tutorial. Which has a nice code example in GitHub.

The gist of it is, we use npm, babel and webpack to create bundles that are loaded by django-webpack-loader. This allows us to use npm to install js components and React dependencies in a way that React developers are accustomed. We then load these components into Django templates using a simple template tag.

**See:

• https://stackoverflow.com/questions/52067944/cannot-find-module-babel-core
• https://github.com/babel/babel/issues/6808
• https://stackoverflow.com/questions/47830273/babel-plugin-preset-files-are-not-allowed-to-export-objects-only-functions

Adding a React component to a Wagtail template

1. Install the the Node Package Manager and run npm install to install dependencies.
2. Add your new React component to the webpack.config.js in the entry stanza. Your new entry should look something like this: ComponentName: './app_name/static/app_name/js/ComponentName',
3. Create a ComponentName.js file in the static js directory of the app where you need it, e.g. /app_name/static/app_name/js/ComponentName.js.
4. Compile your new bundle by running npm run watch or ./node_modules/.bin/webpack --config webpack.config.js from the project root directory (library_website). You will know that your component was successfully compiled because there will now be a file called ComponentName-bundle.js in base/static/bundles/. This is the compressed javascript that Wagtail will load. Now you are ready to add the component to your Wagtail template.
5. In your template load the new React js bundle like this:

{% load render_bundle from webpack_loader %}
{% block content %}
   <div id="some-id-our-component-attaches-to"></div>
   {% render_bundle 'ComponentName' %}
{% endblock %}

Updating NPM Dependencies

1. npm outdated
2. npm update
3. npm run watch