In our first logical part of the Application.react.js file, we’re importing the dependency modules using the require() function:

var React = require('react');
var Stream = require('./Stream.react');
var Collection = require('./Collection.react');

Our Application component will have two child components that we need to import:

  • The Stream component will render a stream section of our user interface
  • The Collection component will render a collection section of our user interface

We also need to import the React library as another module. Notice that this code is still part of the CommonJS module pattern, not React.

The second logical part of the Application.react.js file creates the React Application component with the following methods:

  • getInitialState()
  • addTweetToCollection()
  • removeTweetFromCollection()
  • removeAllTweetsFromCollection()
  • render()

Only the getInitialState() and render() methods are part of the React API. All the other methods are part of our application logic that this component encapsulates. We’ll take a closer look at each of them right after we discuss what this component renders inside its render() function:

render: function () {
  return (
    <div className="container-fluid">

      <div className="row">
        <div className="col-md-4 text-center">

          <Stream onAddTweetToCollection={this.addTweetToCollection} />

        </div>
        <div className="col-md-8">

          <Collection
            tweets={this.state.collectionTweets}
           onRemoveTweetFromCollection={this.removeTweetFromCollection}
       onRemoveAllTweetsFromCollection={this.removeAllTweetsFromCollection} />

        </div>
      </div>

    </div>
  );
}

As you can see, it defines the layout of our web page using the Bootstrap framework. If you’re not familiar with Bootstrap, I strongly recommend that you visit http://getbootstrap.com and read the documentation. Learning this framework will empower you to prototype user interfaces in a fast and easy way. Even if you don’t know Bootstrap, it’s quite easy to understand what’s going on. We’re dividing our web page into two columns: a smaller one and a larger one. The smaller one contains our Stream React component and the larger one contains our Collection component. You can imagine that our web page is divided into two unequal parts and both of them contain the React components.

This is how we’re using our Stream component:

<Stream onAddTweetToCollection={this.addTweetToCollection} />

The Stream component has an onAddTweetToCollection property, and our Application component passes its own addTweetToCollection() function as a value for this property. addTweetToCollection()adds a tweet to a collection. It’s one of the custom methods that we define in our Application component, and we can refer to it using this keyword.

Let’s take a look at what the addTweetToCollection() function does:

addTweetToCollection: function (tweet) {
  var collectionTweets = this.state.collectionTweets;

  collectionTweets[tweet.id] = tweet;

  this.setState({
    collectionTweets: collectionTweets
  });
},