React Components

Components are like functions that return HTML elements. They are independent, reusable bits of code that serve a similar function to JavaScript functions but work in isolation and return HTML.



Types of Components

React components come in two types: Class components and Function components. We’ll focus on Function components in this lesson, as they are simpler and recommended over Class components since React 16.8 when Hooks were introduced.




Creating Your First Component

When creating a React component, the component’s name MUST start with an uppercase letter.

Class Component

A class component must include the extends React.Component statement. This statement creates an inheritance to React.Component and provides access to its functions. The component also requires a render() method, which returns HTML.


Create a Class component called Vehicle EXAMPLE

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




Function Component

A function component also returns HTML and behaves similarly to a class component. It is simpler and more concise.

Create a Function component called Vehicle EXAMPLE

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




Rendering a Component

To use the component in your application, use the syntax <ComponentName />.

Display the Vehicle component in the “root” element EXAMPLE

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




Props

Components can receive inputs through props (properties). Props act like function arguments and are passed into the component as attributes.

Pass a color to the Vehicle component and use it in the render function EXAMPLE

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

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
root.render(<Vehicle color="blue" />);




Components in Components

You can use one component inside another component.

Use the Vehicle component inside the Garage component EXAMPLE

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

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

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




Components in Files

For better code reusability, split your components into separate files.

Create a new file named Vehicle.js EXAMPLE

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

export default Vehicle;


To use the Vehicle component, import the file into your application.

Import the Vehicle.js file and use the Vehicle component EXAMPLE

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

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

Scroll to Top