Some components have to be special. Those components get defined with class.

class ClapCounter extends React.Component {
  render() {
    return (
      <div>
        👏 <i> be the first to clap</i>
      </div>
    );
  }
}

It’s not much to look at now. We’ll fill it in this week.

Some ground rules

Component classes extend React.Component and define a render() method.

For comparison, here’s what Greeting looks like as a component class.

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

What speshul powerz they got?!

Unlike function components, class components have an instance—this. This gives us lifecycle methods and state APIs for some seriously cool interactivity.

Sooooooo much ahead!

Tinker with it

Use the workspace below and play with component classes.

• Convert Greeting to a component class and back to a function.
• Define a new component using class. Be sure not to forget extends, render() and this.