[Fixed]-How to integrate Django API project with nodejs and react on frontend?

by

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 (e.g. navbar, footer) are provided by the Django templates, and the content specific to each page (e.g. 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 (e.g. 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
)
👤Atom101

Leave a comment