Lesson 1 of 12

Hello, React!

You will write your first React component: a that returns JSX, which looks like but is JavaScript. Every React app is built from components like this.

JSX lets you write HTML-like syntax in JavaScript. Babel (or Vite) transforms it to `React.createElement()` calls before the browser sees it. The key mental model: components are functions, JSX is what they return.

JSX

// App.jsx
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>
}

export default function App() {
  return (
    <div>
      <Greeting name="World" />
      <Greeting name="React" />
    </div>
  )
}

JSX

// JSX rules:
// 1. Return a single root element (or use a Fragment)
function GoodComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>Paragraph</p>
    </>
  )
  // <> </> is shorthand for <React.Fragment> </React.Fragment>
}

// 2. className, not class (class is a JS keyword)
// 3. All tags must close: <img /> not <img>
// 4. Expressions in curly braces: {2 + 2}, {name}, {condition ? "yes" : "no"}

function Card({ title, count }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <span className={count > 0 ? "positive" : "zero"}>{count}</span>
    </div>
  )
}

Finished reading?Mark it done to track your progress.

Tip: use the ← and → keys to move between lessons.