Advanced View and Templates

Layouts

Sometimes you want the same surrounding HTML for each template - for example your head or body tags don't change with each different page.

First, pass the relevant props to a layout component.

views/layouts/default.jsx:

var React = require('react');

class DefaultLayout extends React.Component {
  render() {
    return (
      <html>
        <head><title>{this.props.title}</title></head>
        <body>{this.props.children}</body>
      </html>
    );
  }
}

module.exports = DefaultLayout;

We can use this.props.children to magically fill in things from our other file.

Then use that surrounding component inside your template.

views/index.jsx:

var React = require('react');
var DefaultLayout = require('./layouts/default');

class HelloMessage extends React.Component {
  render() {
    return (
      <DefaultLayout title={this.props.title}>
        <div>Hello {this.props.name}</div>
      </DefaultLayout>
    );
  }
}

module.exports = HelloMessage;

Sub Component Files

Components can be used to modularize views and reduce repetition. A common pattern is to move the header and footer of a page into separate views, or partials, then render them on each page.

Example

views/components/header.jsx

var React = require('react');

class Header extends React.Component {
  render() {
    return (
      <div class="header">
        <h1>This is the header</h1>
      </div>
    );
  }
}

module.exports = Header;

views/hello-message.jsx

var React = require('react');
var Header = require('./components/header');

class HelloMessage extends React.Component {
  render() {
    return (
      <Header/>
      <div>Hello {this.props.name}</div>
    );
  }
}

module.exports = HelloMessage;

results matching ""

    No results matching ""