npm create vite@latest meu-catalogo-react --template react

cd meu-catalogo-react
npm install
npm run dev

src/
├── App.jsx
├── components/
│   └── Produto.jsx

// src/components/Produto.jsx
function Produto({ nome, preco }) {
  return (
    <div style={{ border: "1px solid #ccc", padding: "10px", marginBottom: "10px" }}>
      <h3>{nome}</h3>
      <p>Preço: R$ {preco}</p>
    </div>
  );
}

export default Produto;

import { useState } from 'react';
import Produto from './components/Produto';

function App() {
  const [produtos, setProdutos] = useState([
    { id: 1, nome: "Notebook", preco: 3500 },
    { id: 2, nome: "Mouse", preco: 150 }
  ]);

  const [novoNome, setNovoNome] = useState('');
  const [novoPreco, setNovoPreco] = useState('');

  function adicionarProduto() {
    const novo = {
      id: produtos.length + 1,
      nome: novoNome,
      preco: parseFloat(novoPreco)
    };
    setProdutos([...produtos, novo]);
    setNovoNome('');
    setNovoPreco('');
  }

  return (
    <div style={{ padding: '20px' }}>
      <h1>Catálogo de Produtos</h1>

      <input
        type="text"
        placeholder="Nome do produto"
        value={novoNome}
        onChange={(e) => setNovoNome(e.target.value)}
      />
      <input
        type="number"
        placeholder="Preço"
        value={novoPreco}
        onChange={(e) => setNovoPreco(e.target.value)}
      />
      <button onClick={adicionarProduto}>Adicionar Produto</button>

      <hr />

      {produtos.map((p) => (
        <Produto key={p.id} nome={p.nome} preco={p.preco} />
      ))}
    </div>
  );
}

export default App;

npm install react-router-dom

src/
├── App.jsx
├── main.jsx
├── pages/
│   ├── Home.jsx
│   ├── Usuarios.jsx
│   └── UsuarioDetalhe.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import App from './App';
import Usuarios from './pages/Usuarios';
import UsuarioDetalhe from './pages/UsuarioDetalhe';

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="/usuarios" element={<Usuarios />} />
      <Route path="/usuarios/:id" element={<UsuarioDetalhe />} />
    </Routes>
  </BrowserRouter>
);

import { Link } from 'react-router-dom';

function App() {
  return (
    <div style={{ padding: 20 }}>
      <h1>Bem-vindo!</h1>
      <p>Esta é a página inicial.</p>
      <Link to="/usuarios">Ver lista de usuários</Link>
    </div>
  );
}

export default App;

import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';

function Usuarios() {
  const [usuarios, setUsuarios] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(resp => resp.json())
      .then(dados => setUsuarios(dados));
  }, []);

  return (
    <div style={{ padding: 20 }}>
      <h2>Lista de Usuários</h2>
      {usuarios.map(user => (
        <div key={user.id} style={{ marginBottom: 10 }}>
          <strong>{user.name}</strong> - {user.email}
          <br />
          <Link to={`/usuarios/${user.id}`}>Ver detalhes</Link>
        </div>
      ))}
    </div>
  );
}

export default Usuarios;

import { useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';

function UsuarioDetalhe() {
  const { id } = useParams();
  const [usuario, setUsuario] = useState(null);

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
      .then(resp => resp.json())
      .then(dados => setUsuario(dados));
  }, [id]);

  if (!usuario) return <p>Carregando...</p>;

  return (
    <div style={{ padding: 20 }}>
      <h2>Detalhes de {usuario.name}</h2>
      <p>Email: {usuario.email}</p>
      <p>Telefone: {usuario.phone}</p>
      <p>Website: {usuario.website}</p>
      <p>Empresa: {usuario.company.name}</p>
    </div>
  );
}

export default UsuarioDetalhe;