Bootcamp
Search…
7.2.3: Class Components

Introduction

There are 2 ways to express components in React: functional components and class components. The latter is still used by many companies today and the original way to use React. We will briefly see class components here so we understand differences between functional and class components.

Class Components

Functional Component

In 7.2: Components we learned how to specify a functional component as follows.
function BigAnnouncement() {
const myEl = (
<div>
<h1 className="hero-text">
Heyyyy <span className="warning">Wow!</span>
</h1>
<p>Lorem Ipsum!!</p>
</div>
);
console.log('myEl:', myEl);
return myEl;
}

Class Component Equivalent

The same component could be expressed as a class component as follows. When we learn about component hooks, we will see more differences between functional and class components.
class BigAnnouncement extends React.Component {
// Everything we have seen in functional components so far belongs in the
// render method of class components.
render() {
const myEl = (
<div>
<h1 className="hero-text">
Heyyyy <span className="warning">Wow!</span>
</h1>
<p>Lorem Ipsum!!</p>
</div>
);
console.log('myEl:', myEl);
return myEl;
}
}