../courses.php
React
REACT101
90
Components
Break an interface into small reusable pieces.
Why does React start with components?
React uses components so a page can be built from small reusable interface pieces instead of one tangled file of HTML and JavaScript.
A component is a reusable piece of a user interface.
A button can be a component. A card can be a component. A menu, form, search box, product tile, or lesson card can all be components.
Instead of building one giant page, React lets you build many small pieces and combine them.
This makes the interface easier to read, test, reuse, and change.
The first React skill is learning to see a page as pieces.
A first React component
function LessonCard() {
return (
<article className="lesson-card">
<h2>Components</h2>
<p>React builds pages from reusable pieces.</p>
<button>Start lesson</button>
</article>
);
}
function App() {
return (
<main>
<LessonCard />
</main>
);
}
function LessonCard() defines a React component.
The component returns JSX, which looks like HTML but is written inside JavaScript.
className is used instead of HTML class in JSX.
<LessonCard /> uses the component inside another component.
App is the larger component that holds the page.
Reuse
A component can be used more than once.
Organization
Each component can focus on one part of the interface.
Maintenance
Changing one component can improve every place that component is used.
Real React work
Production React apps are built from component trees.
One tangled page
function App() {
return (
<main>
<h2>HTML</h2>
<p>Learn HTML.</p>
<button>Start</button>
<h2>CSS</h2>
<p>Learn CSS.</p>
<button>Start</button>
</main>
);
}
Reusable component
function LessonCard() {
return (
<article>
<h2>React</h2>
<p>Learn components.</p>
<button>Start</button>
</article>
);
}
Ask ChatGPT: "What parts of this interface should become React components?" Then check whether each component has one clear job.
Create a component called LessonCard.
Return an article with a heading, paragraph, and button.
Use className instead of class.
Render <LessonCard /> inside App.
Explain what job the component owns.
Building one giant component with the whole page inside it.
Forgetting that React components must return one JSX result.
Using HTML class instead of JSX className.
Naming components with lowercase letters.
Creating components before knowing what piece of the interface they represent.
Create a first React component, render it inside App, and explain why React builds interfaces from reusable pieces.
Lesson
AI can help, but you still check
Try it yourself
Need more help?
- ① Open ChatGPT in a new tab.
- ② Come back here and copy this lesson prompt.
- ③ Paste it into ChatGPT.
- ④ Press Enter and learn one question at a time.
You can now:
moc.rt-tij [ta] troppus
(customization available)
moc.rt-tij [ta] troppus
(customization available)
