Lesson 1: Your First Component - Your First Components

Your First Component Write a component: a function that returns what to show.

1function App() {

2 return <h1>Hello, React!</h1>;

4export default App;

Terminal

$ npm run dev

VITE v5.4 ready in 312 ms

Local: http://localhost:5173/

(your app is live: look at the browser window above!)

Every line, explained

function App() {: A React component is just a JavaScript function with a capitalised name. Its job is to return a description of what should appear on screen. That's the whole trick: an app is functions returning what to show.
return <h1>Hello, React!</h1>;: This return value is JSX: HTML-looking tags written INSIDE JavaScript. <h1> is a big heading (heading level 1). React takes what you return and draws it in the browser; look at the browser window on the right when the program runs.
}: This } closes the component function.
export default App;: export default App hands your component to the rest of the app. A locked line in every lesson: the app's starter file (main.jsx) imports App and mounts it on the page.