Thinkster
React
Creating A Basic React-Redux Project

Usage Across Multiple Components

Now that you've got react-redux running, let's add some new components. So far, all you have is this App component, which doesn't do much. First up is the "Header" component. It's going to display the nav bar that you see up at the top when you visit the Conduit site.

Add in a Header.js file
'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;
Update the App component to expose the application's name

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>
        <Header appName={this.props.appName} />
        <Home />
      </div>
    );
  }
}

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

Next, let's build up the 'Home' component. This component is going to contain the global feed. The Home component is going to be pretty complicated, so let's separate it out into it's own directory. The top-level component is going to take in the top-level app name as a property from react-redux:

Create the Home component
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 have 2 sub-components: Banner and MainView. The Banner component is going to take in a property, the 'appName', which the Home component gets from react-redux. The Banner component is this big hero banner. The component's pretty straightforward, just HTML and CSS.

Create the Banner component
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;

Notice that, in this case, the component is a function, not a class. This function shorthand lets you declare simple components more easily.

Next up, let's create the 'MainView' component. This component will get a list of articles from the redux state and pass the list off to an "ArticleList" component.

Create the MainView component
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);

The ArticleList component will be responsible for actually rendering the list of articles, so let's implement that.

Create the ArticleList component
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;

If articles is undefined, we'll assume the articles are loading. If there are no articles, we'll put a preview message, and otherwise we'll display an H2 with the article title.

Great! So now when you pull up your local server you'll see this "Loading..." message. Next step is to actually run the HTTP request and put the result into the redux state.

Check your work

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