React Components/

...

/

Introduction to React Components

Introduction to React Components

Understand what components are in React and how they form the building blocks of a React application.

We'll cover the following...

Building complex user interfaces can be challenging, but React simplifies this process by breaking the UI into manageable, reusable pieces called components. Understanding and being able to apply components well is essential for any React developer.

Components are the fundamental units of a React application. Think of them as JavaScript functions or classes that accept inputs and return React elements describing what should appear on the screen.

Why components matter

  • Reusability: Components allow us to reuse code, making our application more maintainable.

  • Modularity: Breaking the UI into components makes it easier to manage and debug.

  • Readability: A well-structured components hierarchy improves the readability of our code.

Creating our first component

Let’s create a simple functional component that displays a greeting message.

Press + to interact
function Greeting() {
  return <h1>Hello, World!</h1>;
}
export default Greeting;

  • Lines 1–3: We define a function Greeting, which is our component.

    • Line 2: The function returns an <h1> element with the text Hello, World!.

  • Line 5: We export the Greeting component so it can be used in other parts of our application.

Rendering the component

To display this component on the screen, we’ll render it within our main application file.

  • Line 1: We import the Greeting component we just created.

  • Lines 3–9: We define the App component, which is the root component of our application.

    • Lines 5–7: Inside the App component’s return statement, we include the <Greeting /> component within a <div>.

  • Line 11: We export the App component as the default export.

Exporting components makes them available for use in other parts of the application. It promotes modularity and better code organization. If we don't export App, other files won't know it exists, and we won't be able to use it elsewhere.

Components hierarchy

As we start working with components in React, let's first see how they can be organized and interact with each other. This organization is known as the components hierarchy.

The components hierarchy represent the structure of the React application, showing how components are nested within one another. Think of it like a family tree, where each component can have parent and child relationships.

Simple example of components hierarchy

Let’s revisit the App and Greeting components we created earlier:

And in our main application file:

Understanding the relationship

  • Parent component: App is the parent component.

  • Child component: Greeting is the child component that App renders.

Press + to interact
A simple components hierarchy with App as the parent and Greeting as the child
A simple components hierarchy with App as the parent and Greeting as the child

This shows that the App component contains the Greeting component.

Adding more components

Let’s say we add another component called Footer:

Press + to interact
function Footer() {
  return <p>&copy; 2023 My Website</p>;
}
export default Footer;

We can update our App component to include Footer:

Updated hierarchy

Now, the components hierarchy look like this:

Press + to interact
A components hierarchy with App as the parent, and Greeting and Footer components as child
A components hierarchy with App as the parent, and Greeting and Footer components as child

Key points

  • Components can contain other components.

  • The components hierarchy is a tree-like structure.

  • Parent components render child components within their JSX.

Practice exercise

Now, let's apply what we've learned through a practice exercise.

Problem statement

Build a simple React application by completing the following tasks:

  • Task 1: Create a functional component called Header that returns an <h1> element displaying the text Welcome to My Website.

  • Task 2: Create a functional component called MainContent that:

    • Declares a variable currentDate and assigns it the value of today’s date using new Date().toLocaleDateString().

    • Returns a <p> element with the text Today’s date is [currentDate]., where [currentDate] is dynamically inserted using curly braces {}.

  • Task 3: Modify your App component to:

    • Render the Header component.

    • Render the MainContent component.

Ensure that both components are rendered inside a <div> element.

By learning how to create and render components, we’ve taken the first step toward building dynamic and modular React applications.