Cleaning up and Preparing for a Real Project

At this point you're probably wondering where this tutorial is going, so let me summarise where you are so far:

1. How to install Webpack, Babel and React for development with ES6.
2. How to create a basic React component and import it into an application.
3. How to write simple JSX to render content.
4. How to use props to give a component values.
5. How to render several elements at once.
6. How to handle events such as onClick.
7. How to use state, and how it differs from props.
8. How to loop over and render data in an array.

All this will begin to come together now: we're going to use an Ajax call to fetch data from GitHub. Well, technically it's Ajaj rather than Ajax, because GitHub provides JSON rather than XML, but still: it's our next big task. If you've never used Ajax before, it's just a way to fetch data remotely using the web browser.

I chose GitHub for this task because it has a flexible, interesting API that is open to the public – you don't need to register for an API key in order to use it. That being said, GitHub does have API limits in place when you access it for free, so if you intend to make heavy use of it you might want to get an API key.

In the terminal, quit Webpack Dev Server by pressing Ctrl+C and run this command:

npm install --save superagent

SuperAgent is a ridiculously lightweight Ajax client with clear, simple syntax that makes it easy to learn and use. We're going to replace this whole "Hello, Scott from Scotland!" thing with the results of an Ajax call to GitHub that will pull in a list of commits to the React project. This will require making quite a few changes, but it's almost all stuff you've seen before.

Note: when SuperAgent has finished installing, make sure you run webpack-dev-server again.

First, find these lines in your constructor:

src/pages/Detail.js

const people = [];

for (let i = 0; i < 10; i++) {
    people.push({
        name: chance.first(),
        country: chance.country({ full: true })
    })
}

this.state = { people };

…then delete them all. We don't need people any more. While you're deleting stuff, go ahead and remove the import Chance from 'chance' line and the whole buttonClicked() method too; these aren't needed right now. Don't worry: all that stuff you learned will prove useful in an upcoming chapter, its just that for now we don't need it.

Instead, we're going to create some very simple initial state: an empty array of commits. This will be filled by SuperAgent when its Ajax call completes. So, where those lines in your constructor were just a moment ago, put this instead:

src/pages/Detail.js

this.state = { commits: [] };

As for the render() method, we're going to change the variable names but otherwise just print out static data – we'll fill in the specifics soon enough, don't worry. Change it to be this:

src/pages/Detail.js

render() {
    return (<div>
    {this.state.commits.map((commit, index) => (
        <p key={index}>Some commit data here.</p>
    ))}
    </div>);
}

Just to make sure you're following along, here's how your component should look right now:

src/pages/Detail.js

class Detail extends React.Component {
    constructor(props) {
        super(props);

        this.state = { commits: [] };
    }

    render() {
        return (<div>
        {this.state.commits.map((commit, index) => (
            <p key={index}>Some commit data here.</p>
        ))}
        </div>);
    }
}

Once you save that file, your web page will go blank. This is because the commits array starts empty and never gets filled. Let's fix that now…

Copyright ©2016 Paul Hudson. Follow me: @twostraws.