title: Django back end with a React front end
body: <h1>The idea</h1>
  
  <p>I've started off building this social media kind of website, which includes the basic social media pages such as a profile, a status feed, searching, events, and so on. Each page is a seperate django template and data is visualized by using variables in the django template engine. But at this point, I want to change these static pages to something more dynamic, using <strong>ReactJS</strong>.</p>
  
  <h2>But how?</h2>
  
  <p>I would like to make the pages dynamic, but it should still be a <strong>multi page</strong> website with urls like <code>/user/&lt;id&gt;</code>. I came up with the following option:</p>
  
  <p><strong>A template for each page. Each page having one bundle. Let Django handle the routes.</strong></p>
  
  <ul>
  <li>Create a seperate Django template for each page, just like a normal Django application would do.</li>
  <li>Use <a href="https://github.com/owais/django-webpack-loader" rel="noreferrer">django-webpack-loader</a> to load bundles.</li>
  <li>Each page has a seperate bundle. Bundles are created by adding multiple entries in <code>webpack.config.js</code>. This can result in a fairly large amount of entry points when we have 40+ different pages.</li>
  <li>URLs are handled by Django and are accessible by React via a public <strong>javascript</strong> variable in the template. <a href="https://stackoverflow.com/a/26484617/2315022">Example</a>. And other initial data for the page (such as username, avatar, profile information) are also loaded in this variable via the Django template engine.</li>
  <li>Dynamic features such as form validations without reloading the page are handled by <strong>React</strong> and a <strong>Django Rest API</strong> using <a href="http://www.django-rest-framework.org/" rel="noreferrer">django-rest-framework</a>.</li>
  </ul>
  
  <h2>So?</h2>
  
  <ul>
  <li>Is this the correct way to deal with this?</li>
  <li>I am having some trouble figuring out how to get a django template variable such as <code>request.user</code> to a javascript variable accessible by React.</li>
  <li>If so, how should I structure such application?</li>
  <li>Is it alright to have a bundle for each separate page? All pages have the same header for example. Including this header in each bundle seems overkill.</li>
  </ul>