React

• 1. O que é React?

  React é uma biblioteca JavaScript usada para criar interfaces de usuário interativas. Foi criado pelo Facebook/Meta e é hoje o padrão da indústria para desenvolvimento frontend.

  Ele brilha em aplicações com muitas interações possíveis do usuário — como Instagram, YouTube, Netflix, Spotify e LinkedIn, que todos usam React.

  Web

  React para aplicações web

  Mobile

  React Native para iOS e Android

  Desktop

  Electron para apps desktop

  💡 Aprenda React uma vez e use em qualquer plataforma.

• 2. Single Page Application (SPA)

  O React gera uma SPA — o HTML da aplicação é praticamente vazio.

  O conteúdo é inserido dinamicamente por meio de JavaScript. Por isso, se você desabilitar o JS no navegador, não verá nada.

  Em vez de ter um arquivo HTML por página, o React gerencia todas as páginas via JavaScript com apenas um HTML base.

  <!-- index.html (vazio) -->

  <div id="root"></div>

  
  

  /* React injeta o conteúdo aqui */

  <div id="root">

  <h1>Olá Mundo</h1>

  </div>

• 3. Componentes

  No React, a aplicação é dividida em componentes — pense neles como peças de LEGO que se juntam para formar páginas completas.

  Cada componente é uma função JavaScript que retorna JSX. Por convenção, use PascalCase para nomeá-los (ex: AddTask, TaskList).

  Arquivos de componentes usam a extensão .jsx, criados dentro da pasta src/components/.

  function MeuComponente() {

  return (

  <div>

  <h1>Olá Mundo</h1>

  </div>

  );

  }

  
  

  export default MeuComponente;

  ⚠️ O return de um componente só pode ter um elemento raiz. Use uma <div> ou um Fragment (<></>) para envolver múltiplos elementos.

• 4. JSX

  JSX é uma sintaxe especial: HTML misturado com JavaScript.

  Para usar JavaScript dentro do JSX, envolva com {"{}"} (chaves).

  Use className em vez de class para definir classes CSS.

  Eventos como onClick e onChange recebem funções JavaScript dentro de chaves.

  const nome = "Felipe";

  
  

  return (

  <div className="container">

  <h1>Olá, {"{nome}"}</h1>

  <button onClick={"{() => alert('clicou!')}"}>

  Clique aqui

  </button>

  </div>

  );

• 5. State — useState

  State é uma variável especial do React: quando você altera o state, a interface é automaticamente atualizada (re-renderização).

  É criado com o Hook useState, importado do React. Retorna um array com [valor, função de atualização].

  Use state sempre que quiser reagir a interações do usuário — daí vem o nome "React".

  import {"{ useState }"} from 'react';

  
  

  function App() {"{"}

  const [mensagem, setMensagem] = useState('Olá Mundo');

  
  

  return (

  <div>

  <h1>{"{mensagem}"}</h1>

  <button onClick={"{() => setMensagem('Clicado!')}"}>

  Mudar

  </button>

  </div>

  );

  {"}"}

• 6. Props

  Props são a forma de passar dados de um componente pai para um componente filho.

  Você passa props como atributos HTML e as recebe no componente filho via o parâmetro props.

  Tudo que você passa como atributo fica disponível dentro de props.nomeDaProps.

  {"// Componente pai (App)"}

  <Tasks tasks={"{listaDeTarefas}"} />

  
  

  {"// Componente filho (Tasks)"}

  function Tasks(props) {"{"}

  return (

  <ul>

  {"{props.tasks.map(task => ("}

  <li>{"{task.title}"}</li>

  {""))}"}

  </ul>

  );

  {"}"}

• 7. Efeitos Colaterais — useEffect

  O useEffect executa uma função sempre que um valor da lista de dependências (segundo parâmetro) for alterado.

  Lista de dependências vazia []: função executada apenas uma vez, quando o componente é montado pela primeira vez.

  {"// Executa quando 'tasks' mudar"}

  useEffect(() => {"{"}

  localStorage.setItem(

  'tasks',

  JSON.stringify(tasks)

  );

  {"}"}, [tasks]);

  {"// Executa só uma vez (on mount)"}

  useEffect(() => {"{"}

  async function fetchTasks() {"{"}

  const res = await fetch(url);

  const data = await res.json();

  setTasks(data);

  {"}"}

  fetchTasks();

  {"}"}, []);

  ⚠️ Não use async diretamente na função do useEffect. Crie uma função assíncrona interna e a chame.

• 8. Persistência com localStorage

  O localStorage persiste dados no navegador mesmo após fechar a aba ou o navegador.

  Armazena apenas strings, então use JSON.stringify() para salvar e JSON.parse() para recuperar.

  Use em conjunto com o useState (para atualizar a tela) e o useEffect (para salvar ao mudar).

  {"// Inicializar state com dados do storage"}

  const [tasks, setTasks] = useState(

  JSON.parse(localStorage.getItem('tasks')) || []

  );

  
  

  {"// Salvar no storage quando tasks mudar"}

  useEffect(() => {"{"}

  localStorage.setItem('tasks', JSON.stringify(tasks));

  {"}"}, [tasks]);

• 9. Roteamento — React Router Dom

  O React Router gerencia rotas (páginas) numa SPA usando JavaScript, sem múltiplos HTMLs.

  Instale com: npm install react-router-dom@6.26.1

  Crie uma pasta src/pages/ para os componentes de página. Pages são componentes comuns — o nome é apenas semântico.

  Hook / Componente	Uso
  createBrowserRouter	Cria o roteador com a lista de rotas (path + element).
  RouterProvider	Componente que envolve a aplicação e injeta o roteador.
  useNavigate()	Hook para navegar entre rotas. navigate('/rota') ou navigate(-1) para voltar.
  useSearchParams()	Hook para ler query params da URL. Ex: ?title=foo&desc=bar.

  ⚠️ Ao passar funções para onClick, nunca as chame diretamente (onClick={"{funcao()}"}). Passe a referência (onClick={"{funcao}"}) ou use uma arrow function (onClick={"{() => funcao(param)}"}).

• 10. Consumindo APIs com fetch

  O fluxo mais comum para APIs no React:

  1. Componente é montado → 2. useEffect chama a API → 3. Dados salvos no state → 4. Interface atualizada

  useEffect(() => {"{"}

  async function fetchTasks() {"{"}

  const response = await fetch(

  'https://jsonplaceholder.typicode.com/todos?_limit=10',

  {"{"} method: 'GET' {"}"}

  );

  const data = await response.json();

  setTasks(data);

  {"}"}

  fetchTasks();

  {"}"}, []);

• 11. Próximos Passos no React

  Data Fetching

  React Query (mais popular) ou SWR para gerenciar chamadas de API.

  Formulários

  React Hook Form + Zod para validação de formulários complexos.

  Estado Global

  Context API + useReducer → depois Zustand e Redux.

  Testes

  Jest / Vitest + React Testing Library + Cypress (e2e).

  React no Servidor

  Server Components + Next.js (padrão do mercado) ou Remix.

  GraphQL

  Apollo Client para consumir APIs GraphQL no React.