ReactJS how to structure components similar to django?

Question

From Django I am used to following frontend structure:

<body>
    <div id="main_container">
        <div id="header">
            {% include "topbar.html" %}
        </div>

        <div id="leftbox_scroll">
            {% include "left_up.html" %}
        </div>

        <div id="ggladsleftcontain">
            {% include "ggladsleft.html" %}
        </div>

        <div id="main_content_wrap">
            <div id="main_content">
                {% block main_content %}



                {% endblock %}
            </div>
        </div>

        <div id="rightside">
            {% include "right_side.html" %}
        </div>

        <div class="clearer"> </div>
    </div>
</body>

This setups the basic structure of the page: header, bars to left,right, scrollmenu and a content area. When the user navigates somewhere the server responds with a content file. Such files contains only the requested content that replaces the "block main content" area. The header and sidebars are called by "extends home.html" at the top of the content file.

Is similar functionality possible in React or should my render method for every page contain header and bars? I would hope for something like this:

//main.jsx
    render() {
    return (
        <div>
            <PublicHeader/>
            <LeftBar/>
            <Content page={this.page}/>
            <RightBar/>
            <Footer/>
        </div>
    )
}

I have only a vague idea how that content would catch the current page the user navigated to and even a less claer idea of how he would process and show the page. So, probably this is the wrong way of thinking about it ... but still do I have to header and bars defined in every page?

EDIT: I have abandoned django's frontend completely, everything is going to jsx files, only the bundle.js is placed in to a simple index.html.

score 1 · Answer 1 · answered Nov 02 '16 at 20:39

1

Yes, you're going down the correct route.

So you could build a basic element for the body of the page as you have already done. Next, you should make a call to ReactDOM to render this in a DOM element:

<script type="text/javascript">
ReactDOM.render(React.createElement(page, {name: "home"}), document.getElementById("content"));
</script>

In this example, 'page' is the react element for your page as you've defined above. This is followed by an the props passed to the 'page' element. You can now access this from within the 'page' react element as this.props.name.

Using this method, you do not need to re-define the basic structure of your page for each page.

answered Nov 02 '16 at 20:39

Matt Brown

355
1
4
12

I forgot to mention that I don't use django as frontend at all (question updated). This method is ment to be inserted to django templates, right? I have only one template and it contains bundle.js, the whole frontend is now in jsx. – Stefan Nov 02 '16 at 20:50
Sure. No this is not intended for Django templates. The idea is that you use the snippet to create a root node in the file you serving, however you may be doing that. – Matt Brown Nov 02 '16 at 20:58

score 0 · Answer 2 · edited May 23 '17 at 12:19

Matt hinted at the way to do it, but I found the actual solution in another SO thread:

// think of it outside the context of the router, if you had pluggable
// portions of your `render`, you might do it like this
<App children={{main: <Users/>, sidebar: <UsersSidebar/>}}/>

// So with the router it looks like this:
const routes = (
  <Route component={App}>
    <Route path="groups" components={{main: Groups, sidebar:     GroupsSidebar}}/>
     <Route path="users" components={{main: Users, sidebar: UsersSidebar}}>
      <Route path="users/:userId" component={Profile}/>
    </Route>
  </Route>
)

class App extends React.Component {
  render () {
    const { main, sidebar } = this.props;
    return (
      <div>
        <div className="Main">
          {main}
        </div>
        <div className="Sidebar">
          {sidebar}
        </div>
      </div>
    )
  }
}

class Users extends React.Component {
  render () {
    return (
      <div>
        {/* if at "/users/123" `children` will be <Profile> */}
        {/* UsersSidebar will also get <Profile> as this.props.children,
            so its a little weird, but you can decide which one wants
            to continue with the nesting */}
        {this.props.children}
      </div>
    )
  }
}

ReactJS how to structure components similar to django?

2 Answers2