React 2020 — P5: Class Components
In the two previous articles we looked at functional components.

Although the React team seems like they want to move away from class-based components, they’re still here. As a side note, I like and prefer class components. We’ve touched on class components in the Deeper Intro article.

A class based component is a class that extends React.Component and contains a render() method that returns a JSX element. We can convert functional components into class components pretty easily.

Let’s create a class component that lists a movie where Jim Carrey was awesome. We’ll start by creating a Sonic.js file inside of our src/components directory. If you haven’t seen Sonic yet, I highly recommend it (especially if you have kids).

Just like with functional components, we need to import React.

import React from 'react';

The class will extend React.Component and will contain a render() method that returns an element. The render() method is a life-cycle method (we’ll look at life-cycle methods in later articles). The render() life-cycle method is a required method meaning that each time that you create a class component, that component will need to have the render() method.

Just like functional components, class components will need to be exported so that they can be rendered later on. The importing process is the same as with functional components. We’ll import the class component inside of the App component and render it.

Make sure you have your development server running: npm start.

Since we don’t know how to pass arguments yet to class components, to display an additional movie by Jim Carrey, you’ll have to create a new component. So, create the component Mask.js in src/components, import it into App and render it below <Sonic />.

You might have noticed that we’re importing a class component into the App functional component. Yes, you can do that. You can also import functional components into class components. We’re going to be looking at passing arguments to components in the next article since we don’t want to keep creating individual components for each movie that Jim Carrey has appeared in.
['Dino Cajic']
['JavaScript', 'React', 'Programming', 'Reactjs', 'Web Development']