JSX, componentes e props

Monte a base do React: ambiente, JSX, componentes funcionais e props — sem classes, do jeito atual.

O que você vai aprender

• Criar app com Vite + React
• Entender JSX vs HTML
• Componentes e props
• Composição e children

Por que React

React é a biblioteca de UI mais usada no mercado. Com ela você monta interfaces reativas com componentes reutilizáveis e ecossistema maduro (Vite, Next, React Router).

1. Criar o projeto

npm create vite@latest meu-app -- --template react
cd meu-app
npm install
npm run dev

2. Primeiro componente

// src/components/Hello.jsx
export function Hello({ name }) {
  return <h1>Olá, {name}!</h1>;
}

// App.jsx
import { Hello } from './components/Hello';
export default function App() {
  return <Hello name="IRN" />;
}

3. JSX em 30 segundos

• className em vez de class
• Expressões entre {}
• Um único elemento raiz (ou fragment <>...</>)
• Eventos em camelCase: onClick

4. Props e composição

function Card({ title, children }) {
  return (
    <section className="card">
      <h2>{title}</h2>
      {children}
    </section>
  );
}

Sumário do curso