10 React Challenges (Beginner): Recreate Layout with Components

Celý článek

Components are the building blocks of React Applications, and each is a JavaScript function. These components comprise of Parent and Child components.

Data is passed from parent to child through what is called Props. Props are simply arguments to these functions.

Data in React is can be sent from parent to child components via props

For this challenge, you will recreate a simple layout having multiple cards created off a single defined React component.

The Challenge: Create Components in React

• CodePen Final: https://codesandbox.io/s/x92x28yy8w
• CodePen Starter: https://codesandbox.io/s/ym9r49w3n9

In this challenge you are provided with an empty function which will serve as a child component. This component will receive props of an icon, label and number.

The main tasks of this challenge are:

• Define the child component in JSX.
• Define props of icon, label and number in the child component.
• Use the child component numerous times in the provided parent component and pass in varying data as props.

Starter Code

Fork this Codesandbox to get started: https://codesandbox.io/s/ym9r49w3n9

A StatCard function is provided, use this as a child component in the App component.

The starter CodeSandbox contains styling, feel free to use that.

Here's what the final page looks like:

Bonus Point

As a bonus in this challenge, pass a function from the parent to the child component using props.

Fork this CodeSandbox to get started: https://codesandbox.io/s/ym9r49w3n9

Solution: Recreate a Layout with Components

Components are an essential part of React applications.

For this challenge, we are required to define a child component, define data to be received via props in the child component, and utilize this child component multiple times in a parent component.

Components allow for the reuse of data and structure in React.

This challenge will be solved in three steps:

• Define the child component and provide props as parameters.
• Use the child component in the parent component and provide data through props.

Define the Child Component

In the starter CodeSandbox, we were provided with an empty StatCard component which returned nothing. Define the component with:

import // ... import dependencies

function StatCard(props) {
  return (
    <div className="stat-card">
      <div className="stat-line">
        <span>{props.icon}</span>
        <strong>{props.label}</strong>
      </div>
      <p>{props.number.toLocaleString()}</p>
    </div>
  );
}

function App() {
  return (
    <div className="App">
          // define parent component
    </div>
  );
}

Here we defined the child component which is simply a card having an icon, a label and a number. The value of these data will be gotten from the provided props.

A better and cleaner way to define the StatCard component will be to destructure the props object in the parameter before using it. Redefine the StatCard component to:

function StatCard({ icon, label, number }) {
  return (
    <div className="stat-card">
      <div className="stat-line">
        <span>{icon}</span>
        <strong>{label}</strong>
      </div>
      <p>{number.toLocaleString()}</p>
    </div>
  );
}

Utilize the Child Component

While we have defined the child component, specified the data to be received, and used this data in the component, we will proceed to use this component multiple times in the parent.

Different data will also be used for each child component to better illustrate the use of components.

import // ... import statement

function StatCard({ icon, label, number }) {
  return (
    <div className="stat-card">
      <div className="stat-line">
        <span>{icon}</span>
        <strong>{label}</strong>
      </div>
      <p>{number.toLocaleString()}</p>
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <StatCard icon="????" label="Points" number={3000} />
      <StatCard icon="⚡" label="Lightnings" number={6540} />
      <StatCard icon="????" label="Shakas" number={337010} />
      <StatCard icon="????" label="Diamonds" number={98661} />
    </div>
  );
}

The child component is here used in the parent four times with varying data for each component. Each of the data provided is passed to the child component previously defined.

What do we have with this?

Find the completed CodeSandbox here: https://codesandbox.io/s/x92x28yy8w

Conclusion

In this challenge, we saw the importance of components to React and built a layout multiple times using child components.

Have you got questions, suggestions, and comments? We'd love to see them in the comment section. You can find other challenges here and join the live streams here. Happy keyboard slapping!