# Wire up Django/ReactJS application

__NOTE__: I have made some changes to this. I wanted to include the redux-dev-tools library.  Refer to this [commit](https://github.com/genomics-geek/django_reactjs_boilerplate/commit/38dd16caea3a96ed788535769794bc265402e89f) to see the changes.

In this step, we will make sure Django and ReactJS are communicating. We will now be able to use Django as our backend server and ReactJS to handle all of the frontend.

## Write placeholder React Component

Write a simple React component as a placeholder for now.

```
mkdir -p static/js/src/main/components/
```

`./static/js/src/main/components/hello-world.jsx` should look like this:
```javascript
import React from 'react';

const HelloWorld = () => {
  return (
    <h1>Hello World!</h1>
  );
};

export default HelloWorld;
```

`./static/js/src/main/index.jsx` should look like this:
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import HelloWorld from './components/hello-world';

ReactDOM.render(
  <AppContainer>
    <HelloWorld />
  </AppContainer>,
  document.getElementById('react-root')
);

if (module.hot) {
  module.hot.accept('./components/hello-world', () => {
    const HelloWorld = require('./components/hello-world').default;
    ReactDOM.render(
      <AppContainer>
        <HelloWorld />
      </AppContainer>,
      document.getElementById('react-root')
    );
  });
}
```

## Update HTML template to enable hot reloading

We need to tell the Django template to load the latest javascript bundle.  Because we are using Django webpack loader, we can enable hot reloading during development ;).
The `index.html` page should now look like this:

```
{% extends 'base.html' %}
{% load staticfiles %}
{% load render_bundle from webpack_loader %}

{% block body %}
<div id="react-root"></div>
{% endblock body %}

{% block javascript %}
{% render_bundle 'main' %}
{% endblock javascript %}
```