How to integrate Django API project with nodejs and react on frontend?

Question

I have a project in Django of an API and I want to use node js together with django and know if you can use react in conjunction with both to realize the frontend of my application and if possible it would be advisable to develop the application this way? Or which would be a better option to work with these technologies?

In django I'm using

->Django Rest Framework

Node js I want to use it to give Real-Time to my application

-->Socket.io

React

-->Redux -->React-router

Thank you very much for your time and your attention.

Answer 1

Solution was to abandon the single page app model, and instead let Django serve each page individually, with a root React component for each page. Our base site components that don't change between pages (eg navbar, footer) are provided by the Django templates, and the content specific to each page (eg poker interface, leaderboard) are composed within React.

1. Abandon the SPA, why would you say such a horrible thing?! Single page apps are not always the solution, we've gained stability (bugs are limited to only one page), easier debugging, easy search engine indexing, and easier static page management by having page boilerplate and routing handled by Django
2. It's much easier to create non-React pages for static content (eg about page, login page) when you have all your page boilerplate in Django templates
3. No need to deal with React routers, the History API, or async fetching of page content behind the scenes (more on how we do page hotloading without refreshes in a later post)

For React Component

import React from 'react'
import ReactDOM from 'react-dom'

const Leaderboard = ({users}) =>
    <div>
        <h1>Featured Players</h1>

        {users.map(user =>
            <a href={`/user/${user.username}/`}>
                {user.username}
            </a>)}
    </div>


ReactDOM.render(
    React.createElement(Leaderboard, window.props),    // gets the props that are passed in the template
    window.react_mount,                                // a reference to the #react div that we render to
)