Bootcamp
Search…
📅
Course Schedule
0: Language and Tooling Teaching Guide
1: Frontend Basics Teaching Guide
2: Backend Basics Teaching Guide
3: Backend Applications Teaching Guide
4: Backend Structure Teaching Guide
5: Full-Stack Applications Teaching Guide
6: Frontend Infrastructure Teaching Guide
7: React Teaching Guide
8: Advanced React Teaching Guide
9: Advanced Topics Teaching Guide
🧮
Algorithms Teaching Guide
💼
Interview Prep Teaching Guide
☺
User Experience Teaching Guide
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!
Last modified 2mo ago