Using create-react-app to boilerplate a react application

$ create-react-app [DIRECTORY_NAME]

$ cd [DIRECTORY_NAME]

yarn start

After creating a react app, the file structure should look like this:

Inside of App.js we can build out a constructor function and add some state to the component. We’re going to render a list of animals. The way we’re going to do this, is to import in an array of animals from a separate file, and set the on our state.

import animals from "./animalsData";

class App extends Component {
  constructor() {
    super();
    this.state = {
      animals: animals
    };
  }

We should be able to tell if something is wrong pretty quickly, conversely we should be able to see if it worked. Now that our server is up and running, we can head to localhost:3000 to see if we can inspect with the react-dev-tools in the browser.

Last thing we’ll do is iterate over those animals and create a list of elements based on their ‘name’ and ‘species data.

<div>
  {this.state.animals.map(a => (
    <div key={a.species}>
      <p>
        Name: {a.name} Species: {a.species}
      </p>
    </div>
  ))}
</div>