Usage Across Multiple Components

Outline

Now that you've got react-redux running let's add some new components. Let's start with building out the Header component which will display the nav bar at the top of the Conduit site.

Create the Header.js file with the following code:

src/components/Header.js

'use strict';

import React from 'react';

class Header extends React.Component {
  render() {
    return (
      <nav className="navbar navbar-light">
        <div className="container">

          <a className="navbar-brand">
            {this.props.appName.toLowerCase()}
          </a>
        </div>
      </nav>
    );
  }
}

export default Header;

Let's now import our Header component into our App

Add the Header to the App component

Notice that we're importing a home component that doesn't exist... yet :)

+ import Header from './Header';
+ import Home from './Home';
import React from 'react';
import { connect } from 'react-redux';

const mapStateToProps = state => ({
  appName: state.appName
});

class App extends React.Component {
  render() {
    return (
      <div>
-      {this.props.appName}
+       <Header appName={this.props.appName} />
        <Home />
      </div>
    );
  }
}

export default connect(mapStateToProps, () => ({}))(App);

Next, let's create the Home component that will contain the global feed. The Home component will consist of other components, so we'll create a Home directory to organize these components. Our Home component will live in a file called "index," as if it's the index file for the Home directory.

Note that we are importing the Banner and MainView components that will be built shortly.

Create the Home component

components/Home/index.js

import Banner from './Banner';
import MainView from './MainView';
import React from 'react';
import { connect } from 'react-redux';

const mapStateToProps = state => ({
  appName: state.appName
});

class Home extends React.Component {
  render() {
    return (
      <div className="home-page">

        <Banner appName={this.props.appName} />

        <div className="container page">
          <div className="row">
            <MainView />

            <div className="col-md-3">
              <div className="sidebar">

                <p>Popular Tags</p>

              </div>
            </div>
          </div>
        </div>

      </div>
    );
  }
}

export default connect(mapStateToProps, () => ({}))(Home);

This component is going to comprise of the Banner and MainView components.

Let's start with Banner. This component is what is known as a Stateless Functional Component. These type of components are used when we don't need the full functionality of a class. Here the banner is only rendering HTML and CSS to the DOM. In this case, it is rendering appName that was passed via props from the Home component.

Create the Banner component

components/Home/Banner.js

import React from 'react';

const Banner = ({ appName }) => {
  return (
    <div className="banner">
      <div className="container">
        <h1 className="logo-font">
          {appName.toLowerCase()}
        </h1>
        <p>A place to share your knowledge.</p>
      </div>
    </div>
  );
};

export default Banner;

Next up is the MainView component. This component will get a list of articles from the redux state and pass the list to an ArticleList component.

Create the MainView component

components/Home/MainView.js

import ArticleList from '../ArticleList';
import React from 'react';
import { connect } from 'react-redux';

const mapStateToProps = state => ({
  articles: state.articles
});

const MainView = props => {
  return (
    <div className="col-md-9">
      <div className="feed-toggle">
        <ul className="nav nav-pills outline-active">

        <li className="nav-item">
          <a
            href=""
            className="nav-link active">
            Global Feed
          </a>
        </li>

        </ul>
      </div>

      <ArticleList
        articles={props.articles} 
      />
    </div>
  );
};

export default connect(mapStateToProps, () => ({}))(MainView);

Now let's build the ArticleList component that will be responsible for rendering the list of articles.

Create the ArticleList component

components/ArticleList.js

import React from 'react';

const ArticleList = props => {
  if (!props.articles) {
    return (
      <div className="article-preview">Loading...</div>
    );
  }

  if (props.articles.length === 0) {
    return (
      <div className="article-preview">
        No articles are here... yet.
      </div>
    );
  }

  return (
    <div>
      {
        props.articles.map(article => {
          return (
            <h2>{article.title}</h2>
          );
        })
      }
    </div>
  );
};

export default ArticleList;

Above we account for two scenarios: articles not existing and having no articles. Articles not existing will occur when we're waiting for data to be sent back from our server. Therefore we display the "Loading..." message. If there are no articles received, then we let the user know that there aren't any articles.

Great! You'll now see the "Loading..." message on your localserver. The next step is to implement a request for the articles from our server.

Check your work

You can view the completed & working code from this tutorial here:

Go Pro to unlock all content & remove ads

Usage Across Multiple Components

Outline

Outline

Check your work

I finished! On to the next tutorial