Since React is getting so much buzz these days, I decided I wanted to try it out. But the problem was, where do I start? Getting started with React has always seemed so daunting because of all of the tools you need. Webpack, Redux, ES6, JSX, crazy build processes and more. It is a pretty big task just to get started.

Enter: create-react-app. create-react-app is a boilerplate app starter from Facebook. There are pros and cons in that since the build process isn’t configurable, it might not be good for a React veteran who wants a specific build process. However I think the simplicity of the build process is what makes it great for a beginner.

Once I installed the module I was able to download a new sample app and immediately start building. Exactly what I wanted!

The first thing I built (after Hello World, of course) was a sweet movie countdown timer. You can get out the code here and see the live site here. AND! This is probably the coolest part, James England used my countdown timer to make his own countdown to the Oscars.

Let’s get started!

My First Component

React components are basically modules. You can export them and use them anywhere through out your app. React is a little weird at first because the render() function is where your HTML lives. It’s uncomfortable at first, but also a pretty neat idea.

Component.js

export default class Hello extends React.Component {
  render() {
    return(
      <h1>Hello World!</h1>
    );
  }
}

App.js

import Hello from './Components/hello.js';

class App extends React.Component {
  render() {
    return (
      <Hello></Hello>
    );
  }
}

The things you should notice here is the render() function that returns Hello World wrapped in <h1> tags in the component.

Next we’ll talk about props. A prop is an argument that is passed into the react function through the Component. It might look like this:

Component.js

export default class Hello extends React.Component {
  render() {
    return(
      <h1>Hello {this.props.name}!</h1>
    );
  }
}

App.js

import Hello from './Components/hello.js';

class App extends React.Component {
  render() {
    return (
      <Hello name="Carmen"></Hello>
    );
  }
}

Oftentimes your app is going to have data that changes and then the DOM needs to be re-rendered. First the data needs to be attached to state, which is where the constructor comes in.

Constructor.js

export default class Movie extends React.Component {
  constructor() {
    super();

    this.state = {
      name: 'Carmen'
    };
  }

  changeNameThroughForm(newName) {
    this.setState({name: newName});
  }

  render() {
    return(
      <h1>Hello {this.state.name}!</h1>
    );
  }
}

You probably will be getting data from an external source like an API. The process for rendering the API data is identical. Once you have the data back from the API you’ll use this.setState.

export default class Movie extends React.Component {
  constructor() {
    super();

    this.state = {
      name: null
    };

    this.getNameFromAPI = this.getNameFromAPI.bind(this);
  }

  componentDidMount() {
    this.getNameFromAPI().then(function(response) {
      this.setState({name: response.data.name});
    }.bind(this));
  }

  render() {
    return(
      <h1>Hello {this.state.name}!</h1>
    );
  }
}

Notice I am binding to this in the constructor, as well as in the then. If you don’t use arrow functions in react, this will default to window. The way around that is the .bind(this) that I am using.

Next let’s talk about Lifecycle Events. Lifecycle Events take place at different points while your app is loading.

componentDidMount() {
  this.getNameFromAPI().then(function(response) {
    this.setState({name: response.data.name});
  }.bind(this));
}

componentDidMount is called directly after the component is rendered, so this is a good place to make an API call. There are several different Lifecycle Events including componentWillMount, which is called before the component is rendered, and componentWillUnmount which runs after the component is removed. You can see the Lifecycle Events documentation here.

This is what I used to get started with React. I’m really looking forward to working with it more!

What did you use to learn React? Are there any resources that I should include?

Questions? Tweet me!