Loading lesson path
Before React 16.8, Class components were the only way to track state and lifecycle on a React component.
Formula
Function components were considered "state - less".With the addition of Hooks, Function components are now almost equivalent to Class components. The differences are so minor that you will probably never need to use a Class component in React. Even though Function components are preferred, there are no current plans on removing Class components from React. This section will give you an overview of how to use Class components in React. Feel free to skip this section, and use Function Components instead.
Components are independent and reusable bits of code.
They serve the same purpose as JavaScript functions, but work in isolation and return HTML via a render function.Components come in two types, Class components and Function components, in this chapter you will learn about Class components.
When creating a React component, the component's name must start with an upper case letter. The component has to include the extends React.Component statement, this statement creates an inheritance to React.Component, and gives your component access to React.Component's functions.
method, this method returns HTML.
Car class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}Now your React application has a component called Car, which returns a <h2> element. To use this component in your application, use similar syntax as normal HTML: <Car />
Car component in the "root" element: createRoot(document.getElementById('root')).render( <Car />
);Example »
If there is a constructor() function in your component, this function will be called when the component gets initiated. The constructor function is where you initiate the component's properties. In React, component properties should be kept in an object called state. You will learn more about state later in this tutorial. The constructor function is also where you honor the inheritance of the parent component by including the super() statement, which executes the parent component's constructor function, and your component has access to all the functions of the parent component ( React.Component ).
Car component, and add a color property:
class Car extends React.Component {
constructor() {
super();
this.state = {color: "red"};
}
render() {
return <h2>I am a Car!</h2>;
}
}Use the color property in the render function:
class Car extends React.Component {
constructor() {
super();
this.state = {color: "red"};
}
render() {
return <h2>I am a {this.state.color} Car!</h2>;
}
}Example »
Another way of handling component properties is by using props. Props are like function arguments, and you send them into the component as attributes. You will learn more about props in the next chapter.
Use an attribute to pass a color to the Car component, and use it in the render function:
class Car extends React.Component {
render() {
return <h2>I am a {this.props.color} Car!</h2>;
}
}createRoot(document.getElementById('root')).render( <Car color="red"/>
);Example »
If your component has a constructor function, the props should always be passed to the constructor and also to the React.Component via the super() method.
class Car extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h2>I am a {this.props.model}!</h2>;
}
}createRoot(document.getElementById('root')).render( <Car model="Mustang"/>
);Example »
We can refer to components inside other components: