React Components

Components work similarly to functions, returning HTML elements.

React Components

Components are code segments that are both self-contained and reusable. They fulfill the same purpose as JavaScript functions, but they operate in isolation and produce HTML.

Components are divided into two types: class components and function components. In this course, we will focus on function components.

Class components are commonly utilized in earlier React code bases. It is now recommended to use Function components alongside Hooks, which were introduced in React 16.8. There is an optional section on Class Components for your reference.

Create Your First Component

When establishing a React component, its name must begin with an uppercase letter.

Class Component

A class component must have the extends React.Component line. This statement creates an inheritance from React.Component and grants your component access to its functionalities.

The component also requires the render() method, which returns HTML.

Example

Create a Class component called Car

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

Function Component

Here’s the same example as earlier, but with a Function component instead.

A Function component returns HTML and acts similarly to a Class component; however, Function components may be constructed with considerably less code, are easier to grasp, and will be used in this tutorial.

Example

Create a Function component called Car

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

Rendering a Component

Your React application now has a component called Car, which returns a <h2> element.

To utilize this component in your application, use similar syntax to conventional HTML. <Car />

Example

Display the Car component in the “root” element:

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

Props

Props are another way to handle component props.

Props are similar to function arguments, and you pass them into the component as attributes.

Props will be covered in further detail in the following chapter.

Example

Pass a color to the Car component via an attribute and utilize it in the render() function.

				
					class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.color} Car!</h2>;
  }
}

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

Components in Components

We can refer to components within other components:

Example

Use the Car component within the Garage component.

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

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

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

Components in Files

React is all about reusing code, thus it can be beneficial to keep some of your components in distinct files.

To achieve this, create a new file with a .js extension and place the code within it:

Note that the file must begin by importing React (like before) and end with the sentence export default Car;.

Example

This is the new file, which we named Car.js :

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

export default Car;

To utilize the Car component, import the file into your application.

Example

Now that we have imported the Car.js file into the application, we can utilize the Car component as if it had been created here.

				
					import React from 'react';
import ReactDOM from 'react-dom/client';
import Car from './Car.js';

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

React Components