How to use React components

H
andrewgbliss
2 months ago

This article describes what the anatomy of a React function is and how we can compose our own components.

. . .

In this article we will be discussing React components. A React component is defined by a JavaScript function. Using components makes our jobs of creating apps easier and faster, by writing meaningful user interfaces we can write a component once and use that anywhere in our app.

Let's start by looking at the main App component. This is the first component that gets loaded by React. Any other component we want to display should be used within this main App component.

import React from "react";

function App() {
  return (
    <div>
      How to build a React app
    </div>
  );
}

export default App;

So this is the main App component. We first import React so it will know how to render HTML inside JavaScript. We declare a component with the function keyword, then give it the name of App. Inside the function we return HTML with a div that says "How to build a React app". This is the basics of creating a components. All other components build off of this function structure.'

Now let's look at building another component that shows a user name. We want a component that will take in a name, style it, and show whatever username is declared.

This will create a reusable React component called User that will take props, or properties, as a function argument, that will be a JavaScript object.

Props, is short for properties. Through this props object we can pass information into our components.

On the User props object we pass a name string into the component, and have it render the username for us.

function User(props) {
  return (
    <div>{props.name}</div>
  );
}

function App() {
  return (
    <div>
      How to build a React app
      <ul>
        <li><User name=”Daniel” /></li>
      </ul>
    </div>
  );
}

Now if we use the component User in our App component, it will render the name Daniel in our list. We can add as many Users as we want, making the User component a reusable component.

<li><User name=”Daniel” /></li>
<li><User name=”Johnny” /></li>
<li><User name=”Miyagi” /></li>

We can also add CSS style to the component making it apply everywhere we use it. So let's change the font size and color on the User component.

function User(props) {
  return (
    <div style={{
      fontSize: "30px",
      color: "green"
    }}>{props.name}</div>
  );
}

Doing things this way we can create meaningful components that we can write once and use anywhere in our app.

Now let’s talk about using a JavaScript array to hold strings that will contain names we can then use to dynamically build out our user list.

let names = [‘Daniel’, "Johnny", "Miyagi"];

This will create an array of names that we can loop over to build our components for us, instead of hard coding each name we have.

To access an array element you specify with brackets starting on zero.

<li>{names[0]}</li> // will render Daniel
<li>{names[1]}</li> // will render Johnny

And so on. You must be aware though that if you try to access an array element that doesn't exist you will see an error.

Now we can use the map function that can be used with an array, to create our React components dynamically.

{names.map(name => {
  return (
    <li><User name={name} /></li>
  )
})}

So using an array, we can call the map function, that takes in an anonymous function. This anonymous function will be called for every element in the array.

The first time the function will be called, the name value will hold Daniel, next Johnny, and so on, until the array map is finished looping.

Now we can see that by adding another name to the array it will build out another User component for us.

function App() {
  let names = ["Daniel", "Johnny", "Miyagi", "Ali"];
  return (
    <div>
      How to build a React app
      <ul>
        {names.map(name => {
          return (
            <li><User name={name} /></li>
          )
        })}
      </ul>
    </div>
  );
}

React components are powerful in that we can compose them to build meaningful user interfaces without having to create a lot of HTML.

We can use arrays and objects to dynamically build components for us. We can combine this with calling a backend API to fetch data from a database or storage, that will dynamically build out our components. In the upcoming lesson when we create a Todo list application this will come in handy.

Links

React Components and Props

Array Map

Next Lesson

In the next lesson we will take about using State and Hooks within a React component.


H
andrewgbliss
2 months ago