7.2: React Components

Introduction
React components are UI elements written in JSX. They can be combined to form more complex components, even entire apps. React allows us to specify both looks and logic of our frontends in component code, making React a convenient way to build interactive UIs. Typically each component has its own file.
The word "component" refers to React syntax, but also refers to the concept of a UI element repeated across an app. Most applications have repeated visual elements across multiple pages. We can think of components like "helper functions" for UIs.
We can compose apps using components using JS logic: conditionally rendering components, rendering components in a loop, etc. Typically the logic for rendering components will depend on data retrieved from the database and temporarily stored in our React app.
Creating Components
At its simplest, a component is a function that returns JSX. In React this is referred to as a "functional component". The distinction is that this component has no dynamic data. We'll talk more about the differences when we see stateful components.
1
function BigAnnouncement() {
2
  const myEl = (
3
    <div>
4
      <h1 className="hero-text">
5
        Hey <span className="warning">Wow!</span>
6
      </h1>
7
      <p>Lorem Ipsum!!</p>
8
    </div>
9
  );
10
  console.log('myEl:', myEl);
11
  return myEl;
12
}
Copied!
In the above example we moved JSX from Module 7.1: JSX Intro into a function. Note that component functions are declared using the function keyword and named with UpperCamelCase by convention. React won't work if the function name isn't in UpperCamelCase.
Using Components
In the complete example we reference the name of our component as if it were an HTML element.
1
import React from 'react';
2
import { render } from 'react-dom';
3
​
4
function BigAnnouncement() {
5
  const myEl = (
6
    <div>
7
      <h1 className="hero-text">
8
        Hey <span className="warning">Wow!</span>
9
      </h1>
10
      <p>Lorem Ipsum!!</p>
11
    </div>
12
  );
13
  console.log('myEl:', myEl);
14
  return myEl;
15
}
16
​
17
// Create root element to render other elements into
18
const rootElement = document.createElement('div');
19
// Append root element to document body
20
document.body.appendChild(rootElement);
21
// Render new JSX element into root element
22
render(<BigAnnouncement />, rootElement);
Copied!
Repeating Components
In the sense that BigAnnouncement is an element itself, it can be mentioned more than once. We'll create a surrounding JSX and put BigAnnouncement inside.
1
import React from 'react';
2
import { render } from 'react-dom';
3
​
4
function BigAnnouncement() {
5
  const myEl = (
6
    <div>
7
      <h1 className="hero-text">
8
        Hey <span className="warning">Wow!</span>
9
      </h1>
10
      <p>Lorem Ipsum!!</p>
11
    </div>
12
  );
13
  console.log('myEl:', myEl);
14
  return myEl;
15
}
16
​
17
// Create root element to render other elements into
18
const rootElement = document.createElement('div');
19
// Append root element to document body
20
document.body.appendChild(rootElement);
21
​
22
// Create a container to store multiple BigAnnouncements
23
const myContainer = (
24
  <div>
25
    <BigAnnouncement />
26
    <BigAnnouncement />
27
    <BigAnnouncement />
28
    <BigAnnouncement />
29
  </div>
30
);
31
​
32
// Render new JSX element into root element
33
render(myContainer, rootElement);
Copied!

7.1.2: Rendering in a Loop

7.2.1: Props

Last modified 2mo ago

Copy link

Contents