Your first component
- React course
- Beginner
- Lesson 3/84
- 4 min
Write a functional component and render it on the screen.
Your first component
A React component is a function that starts with a capital letter and returns JSX. For example, function App() { return <h1>Hello</h1>; } is a simple component.
The capital first letter matters: App is a component, app is treated as an HTML tag. That's why React uses PascalCase for naming.
To use the component elsewhere, you export it with export default App;. The importing side writes import App from './App';.
What is JSX?
JSX is a React extension that lets you write HTML-like syntax inside JavaScript. The line return <h1>Hello</h1>; actually compiles to React.createElement(...), but JSX lets you write it directly.
In JSX you can put any JavaScript expression inside curly braces { }: for example return <h1>{name}</h1>;. This merges the UI and the data in one place.
JSX is not a template language; it is JavaScript. So you can use if, map and other JS features directly.
Practice Write a Banner component
Complete the skeleton. Write a function called Banner that returns <header> with <h1>Welcome</h1> inside, and export it.
Starter code
// Write the Banner component hereSample solution
function Banner() {
return <header><h1>Welcome</h1></header>;
}
export default Banner;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Why must a component name start with a capital letter?
- Capitals run faster
- It's only a style rule, no effect
- React treats capitalised names as components and lowercase ones as HTML tags Correct answer
- Because JavaScript requires capitals
Explanation: Names starting with a capital are components; lowercase ones are HTML tags.
2 PascalCase naming
A React component should be a function named ____; lowercase is treated as an HTML tag.A React component should be a function named App; lowercase is treated as an HTML tag.Explanation: PascalCase (App) is a component, lowercase (app) is an HTML tag.
3 Match the syntax pieces
| Term | Meaning |
|---|---|
function App |
Component definition |
return <h1> |
JSX return |
export default |
Export |
{name} |
Expression |