Quickstart

A quick dive into getting started with Lore

Step 1: Add Profile to Layout

In this step we're going to update the layout to include profile information about the current user.

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

Create Profile Component

Create a Profile component to display profile information about the current user:

lore generate component Profile

Update the component to look like this. Note that we're also adding a mock user in the getDefaultProps() method. We'll replace this mock data with real user information soon.

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

export default createReactClass({
  displayName: 'Profile',

  propTypes: {
    user: PropTypes.object.isRequired
  },

  getDefaultProps() {
    return {
      user: {
        id: 1,
        data: {
          nickname: 'ayla',
          avatar: 'https://cloud.githubusercontent.com/assets/2637399/19027069/a356e82a-88e1-11e6-87d8-e3e74f55c069.png'
        }
      }
    };
  },

  render() {
    const { user } = this.props;

    return (
      <div className="card profile">
        <div className="card-block">
          <img
            className="img-circle avatar"
            src={user.data.avatar} />
          <h4 className="card-title">
            Hi {user.data.nickname}!
          </h4>
          <div className="card-text">
            <p>You have permission to perform the following:</p>
            <ul className="permissions">
              <li>Create Tweets</li>
              <li>Edit your own tweets</li>
              <li>Delete your own tweets</li>
            </ul>
          </div>
          <button className="btn btn-primary">
            Log out
          </button>
        </div>
      </div>
    );
  }

});

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

class Profile extends React.Component {

  render() {
    const { user } = this.props;

    return (
      <div className="card profile">
        <div className="card-block">
          <img
            className="img-circle avatar"
            src={user.data.avatar} />
          <h4 className="card-title">
            Hi {user.data.nickname}!
          </h4>
          <div className="card-text">
            <p>You have permission to perform the following:</p>
            <ul className="permissions">
              <li>Create Tweets</li>
              <li>Edit your own tweets</li>
              <li>Delete your own tweets</li>
            </ul>
          </div>
          <button className="btn btn-primary">
            Log out
          </button>
        </div>
      </div>
    );
  }

}

Profile.propTypes = {
  user: PropTypes.object.isRequired
};

Profile.defaultProps = {
  user: {
    id: 1,
    data: {
      nickname: 'ayla',
      avatar: 'https://cloud.githubusercontent.com/assets/2637399/19027069/a356e82a-88e1-11e6-87d8-e3e74f55c069.png'
    }
  }
};

export default Profile;

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

class Profile extends React.Component {

  static propTypes = {
    user: PropTypes.object.isRequired
  };

  static defaultProps = {
    user: {
      id: 1,
      data: {
        nickname: 'ayla',
        avatar: 'https://cloud.githubusercontent.com/assets/2637399/19027069/a356e82a-88e1-11e6-87d8-e3e74f55c069.png'
      }
    }
  };

  render() {
    const { user } = this.props;

    return (
      <div className="card profile">
        <div className="card-block">
          <img
            className="img-circle avatar"
            src={user.data.avatar} />
          <h4 className="card-title">
            Hi {user.data.nickname}!
          </h4>
          <div className="card-text">
            <p>You have permission to perform the following:</p>
            <ul className="permissions">
              <li>Create Tweets</li>
              <li>Edit your own tweets</li>
              <li>Delete your own tweets</li>
            </ul>
          </div>
          <button className="btn btn-primary">
            Log out
          </button>
        </div>
      </div>
    );
  }

}

export default Profile;

Add Profile to Layout

Now that we've created our Profile component, let's modify the Layout to display it. Open your Layout and import the Profile component we just created. Then update the render method to look like this:

Note that we have adjusted the col-md-* classes to make room for the Profile.

// src/components/Layout.js
...
import Profile from './Profile';

...

  render() {
    return (
      <div>
        <Header />
        <div className="container">
          <div className="row">
            <div className="col-md-3">
              <Profile />
            </div>
            <div className="col-md-offset-1 col-md-6">
              {React.cloneElement(this.props.children)}
            </div>
          </div>
        </div>
      </div>
    );
  }

...

Refresh the page and should now see the Profile component displayed on the left side of the screen.

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

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

export default createReactClass({
  displayName: 'Profile',

  propTypes: {
    user: PropTypes.object.isRequired
  },

  getDefaultProps() {
    return {
      user: {
        id: 1,
        data: {
          nickname: 'ayla',
          avatar: 'https://cloud.githubusercontent.com/assets/2637399/19027069/a356e82a-88e1-11e6-87d8-e3e74f55c069.png'
        }
      }
    };
  },

  render() {
    const { user } = this.props;

    return (
      <div className="card profile">
        <div className="card-block">
          <img
            className="img-circle avatar"
            src={user.data.avatar} />
          <h4 className="card-title">
            Hi {user.data.nickname}!
          </h4>
          <div className="card-text">
            <p>You have permission to perform the following:</p>
            <ul className="permissions">
              <li>Create Tweets</li>
              <li>Edit your own tweets</li>
              <li>Delete your own tweets</li>
            </ul>
          </div>
          <button className="btn btn-primary">
            Log out
          </button>
        </div>
      </div>
    );
  }

});

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

class Profile extends React.Component {

  render() {
    const { user } = this.props;

    return (
      <div className="card profile">
        <div className="card-block">
          <img
            className="img-circle avatar"
            src={user.data.avatar} />
          <h4 className="card-title">
            Hi {user.data.nickname}!
          </h4>
          <div className="card-text">
            <p>You have permission to perform the following:</p>
            <ul className="permissions">
              <li>Create Tweets</li>
              <li>Edit your own tweets</li>
              <li>Delete your own tweets</li>
            </ul>
          </div>
          <button className="btn btn-primary">
            Log out
          </button>
        </div>
      </div>
    );
  }

}

Profile.propTypes = {
  user: PropTypes.object.isRequired
};

Profile.defaultProps = {
  user: {
    id: 1,
    data: {
      nickname: 'ayla',
      avatar: 'https://cloud.githubusercontent.com/assets/2637399/19027069/a356e82a-88e1-11e6-87d8-e3e74f55c069.png'
    }
  }
};

export default Profile;

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

class Profile extends React.Component {

  static propTypes = {
    user: PropTypes.object.isRequired
  };

  static defaultProps = {
    user: {
      id: 1,
      data: {
        nickname: 'ayla',
        avatar: 'https://cloud.githubusercontent.com/assets/2637399/19027069/a356e82a-88e1-11e6-87d8-e3e74f55c069.png'
      }
    }
  };

  render() {
    const { user } = this.props;

    return (
      <div className="card profile">
        <div className="card-block">
          <img
            className="img-circle avatar"
            src={user.data.avatar} />
          <h4 className="card-title">
            Hi {user.data.nickname}!
          </h4>
          <div className="card-text">
            <p>You have permission to perform the following:</p>
            <ul className="permissions">
              <li>Create Tweets</li>
              <li>Edit your own tweets</li>
              <li>Delete your own tweets</li>
            </ul>
          </div>
          <button className="btn btn-primary">
            Log out
          </button>
        </div>
      </div>
    );
  }

}

export default Profile;

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';
import Profile from './Profile';

export default createReactClass({
  displayName: 'Layout',

  render() {
    return (
      <div>
        <Header />
        <div className="container">
          <div className="row">
            <div className="col-md-3">
              <Profile />
            </div>
            <div className="col-md-offset-1 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';
import Profile from './Profile';

class Layout extends React.Component {

  render() {
    return (
      <div>
        <Header />
        <div className="container">
          <div className="row">
            <div className="col-md-3">
              <Profile />
            </div>
            <div className="col-md-offset-1 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';
import Profile from './Profile';

class Layout extends React.Component {

  render() {
    return (
      <div>
        <Header />
        <div className="container">
          <div className="row">
            <div className="col-md-3">
              <Profile />
            </div>
            <div className="col-md-offset-1 col-md-6">
              {React.cloneElement(this.props.children)}
            </div>
          </div>
        </div>
      </div>
    );
  }

}

export default Layout;

Next Steps

Next we're going to configure Auth0 as our authentication service.

About
  • Lore is a convention-driven framework for React, built with love by @_jchansen and @mikrofusion, to help you launch your ideas sooner and scale them into legend.
Links
Connect