Adding React inside a Django project

Question

I am a Django developer just getting started with adding React to one page of my app, and really enjoying it so far. (It's a normal Django app with a home page, an about page, etc, but also a "chart" page with an interactive chart, and I want to build the interactive part in React.)

The problem is that I've started with the downloadable React starter kit and I'm not sure how to do things the 'right' way, and it's complicated by using Django to serve my project (all the tutorials seem to assume you're using node, which I'm not).

Right now I just have this in my Django template:

<div id="myapp"></div> <script src="/static/js/vendor/react.js"></script> <script src="/static/js/vendor/JSXTransform.js"></script> <script src="/static/js/myapp.js"></script> 

And myapp.js has all the React code. I'm aware this isn't really the grown-up modern JS way of doing things.

Now I want to use React Bootstrap, but it seems that the only sensible way to do that is with npm. So it's time to make the switch, but I'm not completely sure how.

I have run npm install react and npm install react-bootstrap from inside my static/js directory in Django. This has created a node_modules folder with various files inside.

So three questions from a confused newbie:

1. Where should I put my React code to work with these npm modules (should I use var React = require('react')?
2. Do I need to compile this code somehow (using webpack?)
3. How do I then integrate this with Django? Should I compile it all to myapp.js and just include that in my HTML template?

Answer 1

I'm also doing the same thing right now - moving away from embedded HTML script tags into require land. Here is the tutorial I am following, and here is my file system so far. I am doing it in Node but it shouldn't be that different for a Django project as the React frontend code is decoupled from any backend other than API URL's.

Your node_modules folder contains react-bootstrap. In your myapp.js, use the require('react-bootstrap') to load up the library which is contained in your node_modules folder.

1. Where should I put my React code to work with these npm modules (should I use var React = require('react')?

You can put the code anywhere. If your file system looks like this:

project/   react/     myapp.js   node_modules/     react source code     react bootstrap stuff 

Then you can just do var React = require('react'); in myapp.js.

2. Do I need to compile this code somehow (using webpack?)

Yes, I would consult the webpack tutorial I linked earlier, it should explain how to compile all your React code into a single bundle.js. Here is also another good tutorial. This bundle.js file contains all the source code of your requires. So if your myapp.js looks something like

var React = require('react'); var ReactBootstrap = require('react-bootstrap'); 

then the bundle.js now contains all of the React and react-bootstrap javascript code, along with the myapp.js source code.

3. How do I then integrate this with Django? Should I compile it all to myapp.js and just include that in my HTML template?

I've only done work on Nodejs, but my React code so far hasn't touched any Node code, and I don't think it will touch any Django code (again I've never done Django so I might be wrong). All you need to do is compile with webpack, which spits out a bundle.js. You put that bundle.js in your HTML and it'll load up myapp.js.