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 />);