Quickstart

A quick dive into getting started with Lore

Step 3: Add the Header

In this step we're going to lay out the application and add a Header at the top of the page.

You can view the finished code for this step by checking out the layout.3 branch of the completed project.

Generate the Header

The Lore CLI includes a number of commands to create various types of project files. One of those commands isgenerate, and we'll be using it to generate the Header component.

Run this command from the CLI:

lore generate component Header

You can learn more about the generate component command here.

This command will generate a component called Header and place it at src/components/Header.js. The syntax of this file will match whichever version of JavaScript you specified when you created the project (ES5, ES6 or ESNext) and will look like this:

import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';

export default createReactClass({
  displayName: 'Header',

  propTypes: {},

  render() {
    return (
      <div></div>
    );
  }
});

import React from 'react';
import PropTypes from 'prop-types';

class Header extends React.Component {

  constructor(props) {
    super(props);

    // Set your initial state here
    // this.setState = {};

    // Bind your custom methods so you can access the expected 'this'
    // this.myCustomMethod = this.myCustomMethod.bind(this);
  }

  render() {
    return (
      <div></div>
    );
  }
}

Header.propTypes = {};

export default Header;

import React from 'react';
import PropTypes from 'prop-types';

class Header extends React.Component {

  static propTypes = {}

  render() {
    return (
      <div></div>
    );
  }

}

export default Header;

Modify the Header

Next, modify the render() method to look like this:

// src/components/Header.js
...
  render() {
    return (
      <nav className="navbar navbar-default navbar-static-top header">
        <div className="container">
          <div className="navbar-header">
            <div className="navbar-brand">
              Lore Quickstart
            </div>
          </div>
        </div>
      </nav>
    );
  }
...

Add Header to Layout

Finally, let's render the Header in the browser. Open the Layout component and import the Header. Then update the render() method to look like this:

// src/components/Layout.js
import Header from './Header';
...
  render() {
    return (
      <div>
        <Header />
        <div className="container">
          <div className="row">
            <div className="col-md-offset-3 col-md-6">
              {/* Feed will go here */}
            </div>
          </div>
        </div>
      </div>
    );
  }
...

// src/components/Layout.js
import Header from './Header';
...
  render() {
    return (
      <div>
        <Header />
        <div className="container">
          <div className="row">
            <div className="col-md-offset-3 col-md-6">
              {/* Feed will go here */}
            </div>
          </div>
        </div>
      </div>
    );
  }
...

// src/components/Layout.js
import Header from './Header';
...
  render() {
    return (
      <div>
        <Header />
        <div className="container">
          <div className="row">
            <div className="col-md-offset-3 col-md-6">
              {/* Feed will go here */}
            </div>
          </div>
        </div>
      </div>
    );
  }
...

Visual Check-in

If everything went well, your application should now look like this.

Code Changes

Below is a list of files modified during this step.

src/components/Header.js

import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';

export default createReactClass({
  displayName: 'Header',

  render() {
    return (
      <nav className="navbar navbar-default navbar-static-top header">
        <div className="container">
          <div className="navbar-header">
            <div className="navbar-brand">
              Lore Tutorial
            </div>
          </div>
        </div>
      </nav>
    );
  }

});

import React from 'react';
import PropTypes from 'prop-types';

class Header extends React.Component {

  render() {
    return (
      <nav className="navbar navbar-default navbar-static-top header">
        <div className="container">
          <div className="navbar-header">
            <div className="navbar-brand">
              Lore Quickstart
            </div>
          </div>
        </div>
      </nav>
    );
  }

}

export default Header;

import React from 'react';
import PropTypes from 'prop-types';

class Header extends React.Component {

  render() {
    return (
      <nav className="navbar navbar-default navbar-static-top header">
        <div className="container">
          <div className="navbar-header">
            <div className="navbar-brand">
              Lore Quickstart
            </div>
          </div>
        </div>
      </nav>
    );
  }

}

export default Header;

src/components/Layout.js

/**
 * This component is intended to reflect the high level structure of your application,
 * and render any components that are common across all views, such as the header or
 * top-level navigation. All other components should be rendered by route handlers.
 */

import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import Header from './Header';

export default createReactClass({
  displayName: 'Layout',

  render() {
    return (
      <div>
        <Header />
        <div className="container">
          <div className="row">
            <div className="col-md-offset-3 col-md-6">
              {/* Feed will go here */}
            </div>
          </div>
        </div>
      </div>
    );
  }

});

/**
 * This component is intended to reflect the high level structure of your application,
 * and render any components that are common across all views, such as the header or
 * top-level navigation. All other components should be rendered by route handlers.
 */

import React from 'react';
import PropTypes from 'prop-types';
import Header from './Header';

class Layout extends React.Component {

  render() {
    return (
      <div>
        <Header />
        <div className="container">
          <div className="row">
            <div className="col-md-offset-3 col-md-6">
              {/* Feed will go here */}
            </div>
          </div>
        </div>
      </div>
    );
  }

}

export default Layout;

/**
 * This component is intended to reflect the high level structure of your application,
 * and render any components that are common across all views, such as the header or
 * top-level navigation. All other components should be rendered by route handlers.
 */

import React from 'react';
import PropTypes from 'prop-types';
import Header from './Header';

class Layout extends React.Component {

  render() {
    return (
      <div>
        <Header />
        <div className="container">
          <div className="row">
            <div className="col-md-offset-3 col-md-6">
              {/* Feed will go here */}
            </div>
          </div>
        </div>
      </div>
    );
  }

}

export default Layout;

Next Steps

Next we're going to setup routing.