Curly Braces Run JavaScript
Drop live JavaScript values into the middle of JSX.
1function App() {
2 const name = 'Ada';
3 return <h1>Hello, {name}! You are {8 + 2} today.</h1>;
4}
5export default App;
$ 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() {- Same shape as lesson 1: a component is a function.
const name = 'Ada';- Ordinary JavaScript from Intro to JavaScript. Anything can happen up here before the return: variables, calculations, whatever the component needs.
return <h1>Hello, {name}! You are {8 + 2} today.</h1>;- Inside JSX, curly braces are an escape hatch back to JavaScript: {name} becomes Ada, and {8 + 2} is calculated to 10. Text stays text; braces run.
}- 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.