There are two types of components:

1. Class Based Components
2. Function Based Components

Class Based Components

Before making a class based component, we need to inherit functions from React.Component and this can be done with extends, like this:

class Cat extends React.Component {
  render() {
    return <h1>Meow</h1>;
  }
}

It also requires a render method which returns HTML.

Function Based Components

In function components, it's simpler; we just need to return the HTML, like this:

function Cat() {
  return <h1>Meow</h1>;
}

Note: Component's name must start with an uppercase letter.

Rendering a Component

We made a component, now we want to render/use it. The syntax for using a component is:

<ComponentName />

Components in Files

To have less mess inside the main file (with all the components in the same file) and to reuse components on different pages, we have to make them separately. So that we can just import them in any file and use them!

For that, we will just make a new file called Cat.js, make a class or function based component there and export default that class/function! Like this:

function Cat() {
  return <h1>Meow</h1>;
}
 
export default Cat;

Note: File name must start with an uppercase letter.

Props

As mentioned earlier, we can import the same component in different files and use it, but maybe in different files some changes in the component are needed. For that, we can use props! Like this:

Component:

function Cat(props) {
  return <h1>Meow's color is {props.color}</h1>;
}

Main file:

<Cat color="purple" />