Chapter 7. Build Complex React Components

In this chapter, we'll put everything we learned so far about React components in action by building the most complex components in our application, that is, child components of our Collection component. Our aim in this chapter is to gain a solid React experience and grow our React muscle. Let's get started!

Creating the TweetList component

As you know, our Collection component has two child components: CollectionControls and TweetList.

We'll first build the TweetList component. Create the following ~/snapterest/source/components/TweetList.react.js file:

var React = require('react');
var Tweet = require('./Tweet.react.js');

var listStyle = {
  padding: '0'
};

var listItemStyle = {
  display: 'inline-block',
  listStyle: 'none'
};

var TweetList = React.createClass({

  getListOfTweetIds: function () {
    return Object.keys(this.props.tweets);
  },

  getTweetElement: function (tweetId) {
    var tweet = this.props.tweets[tweetId];
    var handleRemoveTweetFromCollection = this.props.onRemoveTweetFromCollection;
    var tweetElement;

    if (handleRemoveTweetFromCollection) {
      tweetElement = (
        <Tweet
          tweet={tweet}
          onImageClick={handleRemoveTweetFromCollection} />
      );
    } else {
      tweetElement = <Tweet tweet={tweet} />;
    }

    return...

Creating the CollectionControls component

Now, when we understand what the Collection component renders, let's discuss its child components. We'll start with CollectionControls. Create the following ~/snapterest/source/components/CollectionControls.react.js file:

var React = require('react');
var Header = require('./Header.react');
var Button = require('./Button.react');
var CollectionRenameForm = require('./CollectionRenameForm.react');
var CollectionExportForm = require('./CollectionExportForm.react');

var CollectionControls = React.createClass({

  getInitialState: function () {
    return {
      name: 'new',
      isEditingName: false
    };
  },

  getHeaderText: function () {
    var numberOfTweetsInCollection = this.props.numberOfTweetsInCollection;
    var text = numberOfTweetsInCollection;

    if (numberOfTweetsInCollection === 1) {
      text = text + ' tweet in your';
    } else {
      text = text + ' tweets in your';
    }

    return (
      <span>
        {text} <...

Creating the CollectionRenameForm component

First, let's create the ~/snapterest/source/components/CollectionRenameForm.react.js file:

var React = require('react');
var ReactDOM = require('react-dom');
var Header = require('./Header.react');
var Button = require('./Button.react');

var inputStyle = {
  marginRight: '5px'
};

var CollectionRenameForm = React.createClass({

  getInitialState: function() {
    return {
      inputValue: this.props.name
    };
  },

  setInputValue: function (inputValue) {
    this.setState({
      inputValue: inputValue
    });
  },

  handleInputValueChange: function (event) {
    var inputValue = event.target.value;
    this.setInputValue(inputValue);
  },

  handleFormSubmit: function (event) {
    event.preventDefault();

    var collectionName = this.state.inputValue;
    this.props.onChangeCollectionName(collectionName);
  },

  handleFormCancel: function (event) {
    event.preventDefault();

    var collectionName = this.props.name;
    this.setInputValue...

Creating the Button component

Create the following ~/snapterest/source/components/Button.react.js file:

var React = require('react');

var buttonStyle = {
  margin: '10px 10px 10px 0'
};

var Button = React.createClass({
  render: function () {
    return (
      <button
        className="btn btn-default"
        style={buttonStyle}
        onClick={this.props.handleClick}>{this.props.label}</button>
    );
  }
});

module.exports = Button;

The Button component renders a button. You might be wondering what's the benefit of creating a dedicated component for a button if you could just use the <button> element? Think of a component as a wrapper for a <button> element and something else that comes with it. In our case, most <button> elements come with the same style, so it makes sense to encapsulate both the <button> and style objects inside a component, and reuse that component. Hence, the Button component. It expects to receive two properties from a parent component:

• The label property is a label for a button

• The handleClick property is a callback function that is called when a user clicks on this button

Now, it's time to create our CollectionExportForm component.

Creating the CollectionExportForm component

The CollectionExportForm component is responsible for exporting a collection to a third-party website (http://CodePen.io). Once your collection is on CodePen, you can save it and share it with your friends. Let's take a look at how this can be done.

Create the ~/snapterest/source/components/CollectionExportForm.react.js file:

var React = require('react');

var formStyle = {
  display: 'inline-block'
};

var CollectionExportForm = React.createClass({
  render: function () {
    return (
      <form action="http://codepen.io/pen/define" method="POST" target="_blank" style={formStyle}>
        <input type="hidden" name="data" value={this.props.htmlMarkup} />
        <button type="submit" className="btn btn-default">Export as HTML</button>
      </form>
    );
  }
});

module.exports = CollectionExportForm;

The CollectionExportForm component renders a form with the <input> and <button> elements. The <input...

Summary

In this chapter, you created the TweetList, CollectionControls, CollectionRenameForm, CollectionExportForm, and Button components. You completed building a fully functional React application. In our next chapters, we'll test it with Jest and enhance it with Flux.