Django React Front End

Question

Idea

I started creating this website for social networks, which includes the main pages of social networks such as profile, status feed, search, events, etc. Each page is a separate django template, and data is rendered using variables in the django template engine. But at this point I want to change these static pages to something more dynamic using ReactJS .

But how?

I would like to make the pages dynamic, but it should still be a multi page website with URLs like /user/<id> . I came up with the following option:

Template for every page. Each page has one bunch. Let Django handle the routes.

• Create a separate Django template for each page, as a normal Django application does.
• Use django-webpack-loader to download packages.
• Each page has a separate set. Bundles are created by adding multiple entries to webpack.config.js . This can lead to a fairly large number of entry points when we have 40+ different pages.
• URLs are handled by Django and are accessible to React through the public javascript variable in the template. An example . And other source data for the page (such as username, avatar, profile information) is also loaded into this variable using the Django template engine.
• Dynamic functions, such as validating the form without reloading the page, are handled by the React and Django Rest APIs using the django-rest-framework .

So?

• Is this the right way to handle this?
• I am having trouble figuring out how to get a django template variable like request.user , the javascript variable available for React.
• If so, how do I structure such an application?
• Is it good to have a kit for every single page? For example, all pages have the same title. Including this header in every bundle seems redundant.

Answer 1

Your plan should work, but I think you should think about how much your application you want to be dynamic.

If you only need a few pages for the dynamic functionality that comes from React, it would probably be nice to just spit on some of the standalone React components and bundle them separately as you planned. However, if most of your project should be dynamic, I think it would be better to forget about Django templates for most pages and just create a robust API for using React.

Here is a brief example of how you can configure webpack to combine your responsive components:

This is an excerpt from a large Django project in which we use a couple of React components. bundle has tons of other javascript stuff, and report is a standalone React component:

webpack.config.js

  ... entry: { bundle: './server/apps/core/static/core/app.js', report: './server/apps/reports/static/reports/js/app.jsx' }, output: { path: path.resolve('./server/apps/core/static/core/bundles'), path: path.resolve('./server/apps/core/static/core/bundles'), filename: 'bundle.js' + filename: '[name].js' }, resolve: { extensions: ['', '.js', '.jsx'] }, ... 

And then in the template that you want to insert the component, it:

 {% block content %} <div id="root"></div> {% endblock content %} {% block extrascripts %} <script type="text/javascript"> var dataUrl = "{% url 'reports:data-chart' %}"; </script> <script src="{% static 'core/bundles/report.js' %}"></script> {% endblock extrascripts %} 

I have another example here that may be useful for the game. I need to update it, but it is more likely a template for using React with the Django REST Framework and comes before the Django template system.

Hope this helps.

Answer 2

This is certainly a viable course.

This has some good solutions to your question about getting template variables in JS variables for React: How to insert a Django template variable in a React script?

You should be able to bind any unified JS and structure your templates so that everyone pulls out the appropriate package. For example, I expect you to have a basic template that includes a headline (and any other HTML site), and then expand that template for your individual pages.