admin管理员组

文章数量:1289879

The idea

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 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:

A template for each page. Each page having one bundle. Let Django handle the routes.

• Create a seperate Django template for each page, just like a normal Django application would do.
• Use django-webpack-loader to load bundles.
• Each page has a seperate bundle. Bundles are created by adding multiple entries in webpack.config.js. This can result in a fairly large amount of entry points when we have 40+ different pages.
• URLs are handled by Django and are accessible by React via a public javascript variable in the template. Example. And other initial data for the page (such as username, avatar, profile information) are also loaded in this variable via the Django template engine.
• Dynamic features such as form validations without reloading the page are handled by React and a Django Rest API using django-rest-framework.

So?

• Is this the correct way to deal with this?
• I am having some trouble figuring out how to get a django template variable such as request.user to a javascript variable accessible by React.
• If so, how should I structure such application?
• 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.

The idea

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 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:

A template for each page. Each page having one bundle. Let Django handle the routes.

• Create a seperate Django template for each page, just like a normal Django application would do.
• Use django-webpack-loader to load bundles.
• Each page has a seperate bundle. Bundles are created by adding multiple entries in webpack.config.js. This can result in a fairly large amount of entry points when we have 40+ different pages.
• URLs are handled by Django and are accessible by React via a public javascript variable in the template. Example. And other initial data for the page (such as username, avatar, profile information) are also loaded in this variable via the Django template engine.
• Dynamic features such as form validations without reloading the page are handled by React and a Django Rest API using django-rest-framework.

So?

• Is this the correct way to deal with this?
• I am having some trouble figuring out how to get a django template variable such as request.user to a javascript variable accessible by React.
• If so, how should I structure such application?
• 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.

• javascript
• python
• django
• reactjs
• react-router

Share Improve this question Follow edited May 23, 2017 at 12:03 CommunityBot 111 silver badge asked Oct 22, 2016 at 17:28 user6827user6827 1,59655 gold badges1919 silver badges2525 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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

If you only need a few pages to have the dynamic functionality that es from React, it's probably a good idea to just plop in some self-contained React ponents and bundle them separately as you have planned. However, if most of your project will need to be dynamic, I think it would be best to forget about Django templates for most of the pages, and just create a solid API backend for React to use.

Here is a quick example of how you can configure webpack to bundle up your react ponents:

This is an excerpt from a large Django project where we are using a couple React ponents. bundle has a bunch of other javascript stuff, and report is a self-contained React ponent:

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 stick the ponent 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 might be helpful to play around with. I need to update it, but it is more of a boilerplate for using React with Django REST Framework, and foregoing the Django template system.

Hope this helps.

This is certainly a viable course.

This has a few good solutions to your question about getting template variables into JS variables for React: How do I insert a Django template variable into a React script?

You should be able to bundle any bined JS and structure your templates such that each pulls the appropriate bundle. For instance, I'd expect you to have a base template that includes the header (and any other site-wide HTML), and then extend that template for your individual pages.

本文标签： javascriptDjango back end with a React front endStack Overflow