React Components

Components are like functions that return HTML elements.

Components

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.
Components come in two types, Class components and Function components.
In older React code bases, you may find Class components primarily used.
It is now suggested to use Function components along with Hooks, instead of Class components.

Function components

Create Your First Component

When creating a React component, the component's name MUST start with an upper case letter.

React components returns HTML code.

Example

Create a Function component called Car

javascript

function Car() {
  return (
    <h2>Hi, I am a Car!</h2>
  );
}

Rendering a Component

Now your React application has a component called Car, which returns an <h2> element.
To use this component in your application, refer to it like this: <Car />

Example

Display the Car component in the "root" element:

javascript

createRoot(document.getElementById('root')).render(
  <Car />
)

Props

Arguments can be passed into a component as props, which stands for properties.
You send the arguments into the component as HTML attributes.
You will learn more about props in our React Props Chapter.

Example

Use an attribute to pass a color to the Car component, and use it in the render function:

javascript

function Car(props) {
  return (
    <h2>I am a {props.color} Car!</h2>
  );
}

createRoot(document.getElementById('root')).render(
  <Car color="red"/>
);

Components in Components

We can refer to components inside other components:

Example

Use the Car component inside the Garage component:

jsx

function Car() {
  return (
    <h2>I am a Car!</h2>
  );
}

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car />
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Garage />
);

Rendering a Component Twice

We can render a component multiple times:

Example

Use the Car component twice inside the Garage component:

jsx

function Car() {
  return (
    <h2>I am a Car!</h2>
  );
}

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car />
      <Car />
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Garage />
);

The example above might be a bit useless, but if we change the content of the Car component, by using arguments, it makes more sense:

Example

Use the Car component to display two different cars:

jsx

function Car(props) {
  return (
    <h2>I am a {props.brand}!</h2>
  );
}

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car brand="Ford" />
      <Car brand="BMW" />
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Garage />
);

Components in Files

React is all about re-using code, and it can be a good idea to split your components into separate files.
To do that, create a new file in the src folder with a .jsx file extension and put the code inside it:
Note that the filename must start with an uppercase character.

Example

This is the new file, we named it Vehicle.jsx:

Vehicle.jsx

javascript

function Car() {
  return (
    <h2>Hi, I am a Car!</h2>
  );
}

export default Car;

To be able to use the Car component, you have to import the Vehicle.jsx file in your application.

Example

Now we import the Vehicle.jsx file in the application, and we can use the Car component as if it was created here.

main.jsx

javascript

import { createRoot } from 'react-dom/client'
import Car from './Vehicle.jsx';

createRoot(document.getElementById('root')).render(
  <Car />
);

Class components

Class component is a way to create component using class
It returns HTML using render method
Now mostly function components are used with hooks

Create Class Component

javascript

class Car extends React.Component {
  render() {
    return <h2>I am a Car</h2>
  }
}

Use extends React.Component
render method is required

Render Component

javascript

createRoot(document.getElementById("root")).render(
  <Car />
)

Constructor and State

Constructor is used to initialize state

javascript

class Car extends React.Component {
  constructor() {
    super()
    this.state = { color: "red" }
  }

  render() {
    return <h2>{this.state.color}</h2>
  }
}

State stores data

Props in Class Component

javascript

class Car extends React.Component {
  render() {
    return <h2>{this.props.color}</h2>
  }
}

Change State

javascript

this.setState({ color: "blue" })

Always use setState

Lifecycle Methods

Mounting

Component created and added to DOM

Methods
constructor
render
componentDidMount

Updating

When state or props change

Methods
render
componentDidUpdate

Unmounting

Component removed from DOM

componentDidMount

plaintext

componentDidMount() {
  console.log("Component loaded")
}

Runs after render

componentDidUpdate

plaintext

componentDidUpdate() {
  console.log("Component updated")
}

Runs after update