One of React’s defining features is that it allows you to create custom element types, called components. And while so far this guide has focused on defining components with functions, React also lets you define components with classes.
But why have two types of components? Well, as you know, function components are a little limited. All they know about is their current
props. They can’t access previous props or external state. And they’re only re-rendered when their parent is; they can’t be re-rendered individually.
In contrast, class components can communicate with the outside world, can re-render their children without re-rendering the whole app, and can store state between renders. Which leads to the major difference between the two types of component:
We’ll get to how this works in a moment. But first…
You just wrap a function component in a class! There are just three rules:
render()method that returns a React element
this.propsinstead of through function arguments
Other than that, class components are the same as function components. They both support the special
defaultProps properties. They both can be passed to
createElement as the
type argument. And they both use the
CamelCase naming convention.
In fact, any function component can be rewritten as a class component. For example, here’s how you’d rewrite the
Contact component from earlier as a class component:
To get familiar with class components, I have an exercise for you.
Your task is to create a class component that renders a read-only form like this one:
I’ve started you off with the skeleton of a class component. I’ve also set its
propTypes property, which you can use to find which props the component expects.
ContactForm CSS class is available in
styles.css. Make sure to apply it to the form using the
Once you’re done, we’ll learn how to hook those inputs up!