Bootcamp
Search…
7.2: React Components
Introduction
React components are essentially UI elements written in JSX. They can be combined to form more complex components, and, thereafter, entire webpages and applications.
React allows us to specify both the aesthetics and logic of our frontends in component-level code, making React a convenient way to build interactive UIs. Typically each component has its own file.
The word "component" can refer to both React syntax and 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
Essentially, 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. The distinction will be apparent 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 (in line 22).
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
Understanding that
BigAnnouncement is created as an element, it can be mentioned more than once. We'll define a JSX element and put multiple instances of BigAnnouncement inside (as seen in line 23-30.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!
Refactoring Components
It's always a good habit to periodically refactor your code into components.
Cleaning Up Linter Issues (Finally)
it's always good to fix warnings and linter issues, even if it works. Having too many red lines is not just annoying, but it effectively hides from you any real, legitimate problems that the linter could be reporting.
Last modified 2mo ago