Your first component

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.

Exercise Write a Banner component

Complete the skeleton. Write a function called Banner that returns <header> with <h1>Welcome</h1> inside, and export it.

Show example solution

function Banner() {
  return <header><h1>Welcome</h1></header>;
}

export default Banner;

Test yourself

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
- Because JavaScript requires capitals
Show answer

React treats capitalised names as components and lowercase ones as HTML tags — Names starting with a capital are components; lowercase ones are HTML tags.

PascalCase naming

A React component should be a function named ____; lowercase is treated as an HTML tag.

Show answer

A React component should be a function named App; lowercase is treated as an HTML tag.

Match the syntax pieces

function App

Component definition
return <h1>

JSX return
export default

Export
{name}

Expression

Next lesson: Summary - React intro

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies