Lesson 3: One Parent Tag - Your First Components

One Parent Tag Return more than one tag by wrapping them in a parent.

1function App() {

2 return (

3 <div>

4 <h1>Pizza Planet</h1>

5 <p>The best pizza in the galaxy.</p>

6 </div>

7 );

9export 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() {: The App component: every lesson's page starts from this function.
return (: When JSX spans several lines, it goes inside round brackets after return. The brackets keep the JSX attached to the return: without them, JavaScript would think the return finished at the end of that line and hand back nothing.
<div>: A component must return ONE outer tag. Putting two siblings side by side at the top level is an error, so a wrapping <div> holds them together. <div> is a plain container tag with no look of its own.
<h1>Pizza Planet</h1>: A heading, nested inside the div. Indentation shows the nesting, just like code blocks.
<p>The best pizza in the galaxy.</p>: <p> is a paragraph of normal text. The div now holds two children, stacked in order.
</div>: Closing tag for the div. In JSX every opened tag must be closed.
);: The ); closes the return's round bracket.
}: 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.