React 16 Essentials - Second Edition

Creating your first stateless React component

Let's take a look at the following example of how to create a React component:

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

class ReactClass extends Component {
  render () {
    return (
      <h1 className="header">React Component</h1>
    );
  }
}

const reactComponent = ReactDOM.render(
  <ReactClass/>,
  document.getElementById('react-application')
);
export default ReactClass;

Some of the preceding code should already look familiar to you, and the rest can be broken down into two simple steps:

1. Creating a React component class.
2. Creating a React component.

Let's take a closer look at how we can create a React component:

1. Create a ReactClass class as a subclass of the Component class. In this chapter, ...