Getting Data with React.js

This lesson in the React.js tutorial I'm doing focused on getting data from the GitHub API and displaying it, dealing with user input, and looping through an array of items and outputting them.

Getting Data

Getting the data was actually quite simple, by using jQuery to make a $.get call to an endpoint that returned a GitHub user's information in JSON format. It looked like the following:

var Card = React.createClass({
  getInitialState: function () {
    return {};
  },
  componentDidMount: function () {
    var component = this;
    $.get('https://api.github.com/users/' + this.props.login, function (data) {
      component.setState(data);
    });
  },
  render: function () {
    return (
      <div>
        <img src={this.state.avatar_url} width="80" />
        <h3>{this.state.name}</h3>
        <hr />
      </div>
    );
  },
});

As you can see, we grabbed the data that returned from the AJAX call and added it to the state object, and then output the avatar and the user's name. Simple enough. The new part here really was the componentDidMount Lifecycle hook. In this case, React.js lets us know as soon as the component is there and available. This function is called at that point, and we get the data we want and output it.

Dealing with User Input

Dealing with the user input wasn't too bad either. We made a Form component, and added in a text input and a button. To be able to access the value of the input field, we added a ref attribute to the input, and then called that inside the handleSubmit function. In that function, we also called a function from the parent component, but we went over that in the last lesson so it's nothing new. Below is an example:

var Form = React.createClass({
  handleSubmit: function (e) {
    e.preventDefault();
    var loginInput = React.findDOMNode(this.refs.login);
    this.props.addCard(loginInput.value);
    loginInput.value = '';
  },
  render: function () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" placeholder="GitHub Login" ref="login" />
        <button>Add</button>
      </form>
    );
  },
});

Again, getting that input from the user really wasn't that hard. Setting a ref attribute on the input so it can be accessed later, using React.findDOMNode to find that node based on the ref, and then processing the input as needed or wanted. Simple enough.

Looping through an array

I have to admit, this is one of the things I was excited to see. In Angular, where I have more experience, ng-repeat is one of my favorite directives for easily outputting a list. Well in React it might be even easier than that.

var Main = React.createClass({
  getInitialState: function () {
    return { logins: [] };
  },
  addCard: function (loginToAdd) {
    this.setState({ logins: this.state.logins.concat(loginToAdd) });
  },
  render: function () {
    var cards = this.state.logins.map(function (login) {
      return <Card login={login} />;
    });
    return (
      <div>
        <Form addCard={this.addCard} />
        {cards}
      </div>
    );
  },
});

All we did here was make a variable, cards, that mapped to an array and output a <Code /> component for each entry in the array. Then we output that cards array. React takes care of the showing of the data for us. Simple and easy.

Conclusion

In the end, it was really simple to get information from an API, so I imagine getting data from a database is similarly simple (although admittedly different than what we did here) and then looping through items to output them all is quick and easy as well.

If you'd like to see the plunk I made while doing this, click here. Thanks for reading!