Episode 3 of 32

Components and Templates

Understand React components and JSX — the template syntax for building UI elements.

Components are the building blocks of React applications. Each component returns JSX.

Function Components

function App() {
  return (
    <div className="App">
      <h1>My Blog</h1>
      <p>Welcome to my site!</p>
    </div>
  );
}

export default App;

JSX Rules

  • Must return a single parent element
  • Use className instead of class
  • Close all tags including self-closing ones like <img />
  • Use curly braces for JavaScript expressions