Quickstart

A quick dive into getting started with Lore

Step 2: Add Feed to Routes

In this step we're going to create a Feed component to display the tweets, and add it to the routes for our application.

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

Create the Feed Component

Run this CLI command to generate the Feed component:

lore generate component Feed

Then update the code to look like this:

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

export default createReactClass({
  displayName: 'Feed',

  render() {
    return (
      <div className="feed">
        <h2 className="title">
          Feed
        </h2>
        <ul className="media-list tweets">
          {/* Tweets */}
        </ul>
      </div>
    );
  }

});

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

class Feed extends React.Component {

  render() {
    return (
      <div className="feed">
        <h2 className="title">
          Feed
        </h2>
        <ul className="media-list tweets">
          {/* Tweets */}
        </ul>
      </div>
    );
  }

}

export default Feed;

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

class Feed extends React.Component {

  render() {
    return (
      <div className="feed">
        <h2 className="title">
          Feed
        </h2>
        <ul className="media-list tweets">
          {/* Tweets */}
        </ul>
      </div>
    );
  }

}

export default Feed;

Routes.js

Next open the routes.js file at the root of your project. It should look like this:

import React from 'react';
import { Route, IndexRoute, Redirect } from 'react-router';

import UserIsAuthenticated from './src/decorators/UserIsAuthenticated';
import Master from './src/components/Master';
import Layout from './src/components/Layout';

export default (
  <Route component={UserIsAuthenticated(Master)}>
    <Route path="/" component={Layout} />
  </Route>
);

This file declares the route hierarchy for your application, which is a set of instructions that determine what gets rendered based on the URL in the browser. If you've used react-router before, this file should look familiar.

Lore makes no modifications to these routes or to the behavior of react-router, so all of React Router's documentaion and examples will be directly applicable to your project.

You can learn more about this file here.

Add Feed to Routes.js

Import the Feed component into routes.js and update the code to look like this:

// routes.js
...
import Feed from './src/components/Feed';

export default (
  <Route component={UserIsAuthenticated(Master)}>
    <Route path="/" component={Layout}>
      <IndexRoute component={Feed} />
    </Route>
  </Route>
)

Here we've added an IndexRoute inside the root route and configured it to render the Feed. This configuration gives us the flexibility to change what should be displayed on the homepage later, while also declaring that the default view should be the Feed.

Render Route Children in Layout

If you refresh the application right now, you'll notice the Feed component isn't being displayed, and that's because we haven't told the Layout where to render it yet.

To fix this, open the Layout component and find the code in the render() method that looks like this:

// src/components/Layout.js
<div className="col-md-offset-3 col-md-6">
  {/* Feed goes here */}
</div>

Modify that code to look like this:

// src/components/Layout.js
<div className="col-md-offset-3 col-md-6">
  {React.cloneElement(this.props.children)}
</div>

When we added the Feed component to routes.js, we listed it as a child of the Layout. The code we just pasted says "clone my children and render them here", which means the Layout will be inserted into that div tag.

With this change in place, refresh the application and you should now see "Feed" displayed in the middle of the page.

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/Feed.js

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

export default createReactClass({
  displayName: 'Feed',

  render() {
    return (
      <div className="feed">
        <h2 className="title">
          Feed
        </h2>
        <ul className="media-list tweets">
          {/* Tweets */}
        </ul>
      </div>
    );
  }

});

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

class Feed extends React.Component {

  render() {
    return (
      <div className="feed">
        <h2 className="title">
          Feed
        </h2>
        <ul className="media-list tweets">
          {/* Tweets */}
        </ul>
      </div>
    );
  }

}

export default Feed;

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

class Feed extends React.Component {

  render() {
    return (
      <div className="feed">
        <h2 className="title">
          Feed
        </h2>
        <ul className="media-list tweets">
          {/* Tweets */}
        </ul>
      </div>
    );
  }

}

export default Feed;

routes.js

import React from 'react';
import { Route, IndexRoute, Redirect } from 'react-router';

/**
 * Wrapping the Master component with this decorator provides an easy way
 * to redirect the user to a login experience if we don't know who they are.
 */
import UserIsAuthenticated from './src/decorators/UserIsAuthenticated';

/**
 * Routes are used to declare your view hierarchy
 * See: https://github.com/ReactTraining/react-router/blob/v3/docs/API.md
 */
import Master from './src/components/Master';
import Layout from './src/components/Layout';
import Feed from './src/components/Feed';

export default (
  <Route component={UserIsAuthenticated(Master)}>
    <Route path="/" component={Layout}>
      <IndexRoute component={Feed} />
    </Route>
  </Route>
);

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">
              {React.cloneElement(this.props.children)}
            </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">
              {React.cloneElement(this.props.children)}
            </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">
              {React.cloneElement(this.props.children)}
            </div>
          </div>
        </div>
      </div>
    );
  }

}

export default Layout;

Next Steps

Next we're going to learn about the data structure Lore uses and add some mock data to our application .