01. Your first React component

What React is, why apps are built from components, and your first component: a function that returns what to show.

React is a JavaScript library for building user interfaces. Instagram, Netflix, WhatsApp Web and thousands of apps are made with it. Instead of changing the page step by step, you describe what it should look like, and React keeps it up to date.

A React app is built from components: small pieces, each a JavaScript function that returns what to show. Here's a whole one.

JSX

1export default function App() {2  return <h1>Hello, World!</h1>;3}

function App() is a component: its name starts with a capital letter. It returns what it shows, written in JSX: HTML-like tags right inside JavaScript. export default says this is the component the page shows.

In these lessons you write App.jsx, and the preview shows your App straight away. Change it, and the preview changes too.

Your turn

1Steps

1Make App show a heading Welcome to my React app, and under it a paragraph I'm learning React!.
2A component returns one thing, so put both inside a <div>.

Write your component in App.jsx, as export default function App(); the preview shows it as you type.

Starting code

The editor starts empty. Copy this into it to begin, or write your own from scratch.

JSX

1export default function App() {2  return null;3}

2Expected output

Your page should have

App.jsx has export default function App
The heading says Welcome to my React app
A paragraph says I'm learning React!
Both are inside a <div>

Submit answer checks each of these.

3Hints

Stuck? Open one hint at a time: each gives a bit more help.

Hint 1

Replace return null; with return ( … ); and put your JSX inside the brackets.

Hint 2

Inside, a <div> with an <h1> and then a <p>.

Hint 3

return ( <div> <h1>Welcome to my React app</h1> <p>…</p> </div> );