Components

Overview

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components.

Use the React DevTools extension in Chrome to inspect the application we will build during the labs and show the component hierarchy. Use the solution code from Lab 16.

Creating an Element

Previously we created a React element and rendered it as shown below.

const element = <div className="container">Hello Element</div>;

const rootElement = document.getElementById('root');
ReactDOM.createRoot(rootElement).render(element);

To make that element reusable we need to turn it into a component. There are two types of components: functions and classes in React.

Creating a Function Component

When you want to reuse code you often extract it into a function. React function components allow you to reuse bits of UI in the same way.

Create the following function which returns a JSX element.

function helloWorld() {
  return <div className="container">Hello Function Component</div>;
}

Rendering a Component

Function and class components are rendered the same way.

Render the component by using the class or function name as the tag name. Initially, have the first letter lower be lowercased.
```
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<helloWorld />);
```

You will receive the following error.

react-dom.development.js:500 Warning: <helloWorld /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
    in helloWorld

Open the JavaScript Compiler Babel's REPL or the TypeScript Playground depending on which language you are using to build your React applications.
Paste <helloWorld /> in the left pane.
The following will display in the right pane: React.createElement("helloWorld", null);
Note that helloWorld is a string similar to div compiling to React.createElement("div", null);
Change <helloWorld /> in the left pane to <HelloWorld />
The following will display in the right pane: React.createElement(HelloWorld, null);
React will invoke this function

Change the first letter of the function to a capital H and refer to it with a capitalized tag name.

function HelloWorld() {
  return <div className="container">Hello Function Component</div>;
}

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

function HelloWorld() {
  return <div className="container">Hello Function Component</div>;
}
const rootElement = document.getElementById('root');
const element = <HelloWorld />;
ReactDOM.createRoot(rootElement).render(element);

The text will now display as shown below.
```
Hello Function Component
```
The Babel compiler differentiates native DOM elements that it needs to create like div from components you create such as HelloWorld by looking for PascalCase instead of lowerCase elements.

Composing & Reuse

In order to get reuse this component we need another wrapping component to hold multiple instances of our component.

Create an App component and render multiple instances of HelloWorld inside of it.

function HelloWorld() {
  return <div className="container">Hello Function Component</div>;
}

function App() {
  return (
    <div>
      <HelloWorld />
      <HelloWorld />
      <HelloWorld />
      <HelloWorld />
    </div>
  );
}

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

Result

Hello World
Hello World
Hello World
Hello World

Open Chrome DevTools and the React DevTools tab and show how the components are composing into an application.

<App>
  <div>
    <HelloWorld />
    <HelloWorld />
    <HelloWorld />
    <HelloWorld />
  </div>
</App>

Creating a Class Component

Alternatively, you can reuse code by making a class and then you can create multiple instances of it. The render method on the class is similar to the function when we created a function component.

Create a class with a render function that returns JSX.

class HelloWorld extends React.Component {
  render() {
    return <div className="container">Hello Class Component</div>;
  }
}

The text will now display as shown below.
```
Hello Class Component
```

Optional Exercise

Visit one or several of the following sites and view the components that make up the application using React DevTools extension.

netflix.com
instagram.com
facebook.com
airbnb.com
dropbox.com

Reference

Sites Built with React

Overview​

Creating an Element​

Creating a Function Component​

Rendering a Component​

Composing & Reuse​

Creating a Class Component​

Optional Exercise​

Reference​