Encapsulating HTML

We create new JSX elements so that we can encapsulate larger structures. This means that instead of having to type out complex markup, you can use your custom tag. The React component returns the JSX that goes where the tag is used. Let's look at the following example:

import React, { Component } from 'react';
import { render } from 'react-dom';

class MyComponent extends Component {
  render() {
    return (
      <section>
        <h1>My Component</h1>
        <p>Content in my component...</p>
      </section>
    );
  }
}

render(<MyComponent />, document.getElementById('root'));

Here's what the rendered output looks like:

This is the first React component that we've implemented, so let's take a moment to dissect what's going on here. We created a class called MyComponent, which extends the Component class from React. This is how we create a new JSX element. As you can see in...