CODEWITHSUNDEEP
reactjs
Stefan
Stefan

Reputation: 858

ReactJS how to structure components similar to django?

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.

Upvotes: 0

Views: 258

Answers (2)

Stefan
Stefan

Reputation: 858

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>
    )
  }
}

Upvotes: 0

Matt Brown
Matt Brown

Reputation: 355

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.

Upvotes: 1

Related Questions