• Introduction
• Setup
• Overview
• 1. Install the CLI
• 2. Create the App
• 3. Run the App
• 4. Setup the API
• Layout
• Overview
• 1. Install Bootstrap
• 2. Add Custom Styles
• 3. Add the Header
• Routing
• Overview
• 1. Convert Title to a Link
• 2. Add Feed to Routes
• Data Structure
• Overview
• 1. Add Mock Data to Feed
• 2. Create Tweet Component
• 3. Add Mock User Data
• Fetching Data
• Overview
• 1. Set API Location
• 2. Create Tweet Model
• Convention over Configuration
• 3. Connect Feed Component
• 4. Display Loading Message
• 5. Fetch User for Tweet
• Authentication
• Overview
• 1. Add Profile to Layout
• 2. Add Auth0 Config
• 3. Add Login Page
• 4. Redirect to Login
• 5. Add Callback Route
• 6. Add Logout Page
• 7. Fetch Current User
• 8. Save User to Context
• Server
• Overview
• 1. Clone the API Server
• 2. Parse the Collection
• 3. Parse the Model
• 4. Add Unauthorized Experience
• 5. Add Authorization Header
• Pagination
• Overview
• 1. Add Pagination Metadata
• 2. Paginate the Tweets
• 3. Add Pagination Links
• 4. Improve User Experience
• Infinite Scrolling
• Overview
• 1. Create Load More Button
• 2. Create Infinite Scrolling List
• 3. Convert the Feed
• Cleanup
• Overview
• 1. Remove Unnecessary Code
• Dialogs
• Overview
• 1. Add Create Button
• 2. Mounting Dialogs
• 3. Add Create Dialog
• 4. Simplify the Dialog
• 5. Generate Dialog via Hook
• 6. Add Edit Dialog
• 7. Add Delete Dialog
• Authorization
• Overview
• 1. Hide Edit Link
• 2. Hide Delete Link
• 3. Alternative Approach
• Optimistic Updates
• Overview
• 1. Freeze Pagination Data
• 2. Display New Tweets
• 3. Display Optimistic Tweets
• 4. Add Optimistic Values
• 5. Show Optimistic Visual Cues
• 6. Hide Deleted Tweets
• Normalization
• Overview
• 1. Normalize Tweet Response
• Filtering
• Overview
• 1. Add Filter
• 2. Display User Tweets
• WebSockets
• Overview
• 1. Add WebSocket Support
• 2. Send Client ID to API
• Publishing
• Overview
• 1. Create Production Build
• 2. Deploy to Production
• 3. Create Production Config
• 2. Redeploy to Production
• Next Steps
• Overview
• Misc
• Installing Node
• Completed Project

Step 1: Convert Header Title to Link

In this step we'll use react-router to convert the title in the header to a clickable link that will always take the user back to the homepage. We won't make use of the functionality in this Quickstart, but it's a good practice to follow.

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

Update the Header

Open the Header component and find this line:

// src/components/Header.js
<div className="navbar-brand">
  Lore Quickstart
</div>

Next, import the Link tag from react-router and update the code to look like this:

// src/components/Header.js
import { Link } from 'react-router';
...
<Link className="navbar-brand" to="/">
  Lore Quickstart
</Link>

In the code above, we've converted the div tag into a clickable link, and set the to property to the root URL (/). Now whenever you click the link, you'll be taken back to the homepage.

Visual Check-in

If everything went well, your application will look the same visually, but now the title in the header will be a clickable link that takes you back to the homepage.

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';
import { Link } from 'react-router';

export default createReactClass({
  displayName: 'Header',

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

import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router';

class Header extends React.Component {

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

}

export default Header;

import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router';

class Header extends React.Component {

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

}

export default Header;

Next Steps

Next we're going to create a Feed component for displaying tweets and add it to the routes.