ReReact · Lesson 1 of 8

Hello, React!

React turns your app into a tree of components. Each component is a function that returns JSX — which looks like HTML but is actually JavaScript.

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>
  )
}

◆ Note
Component names must start with a capital letter. `<button>` is HTML. `<Button>` is a React component. React uses this convention to tell the two apart.