React

1. 1

   O que é React?

   Boas-vindas. Se você nunca escreveu uma linha de JavaScript e não tem certeza do que é um "framework", está no lugar certo. Ao fim desta lição você...

   What React isComponents as functionsVirtual DOM intuitionRendering JSXCreating a Vite app
   25 min
2. 2

   JSX e Components

   Na lição anterior você viu um componente retornar algo parecido com HTML: return <h1>Hello, React</h1>;. Aquilo deve ter soado um pouco estranho....

   JSX syntax rulesSingle root elementClassName vs classEmbedding expressions with {}Defining componentsComposing components
   30 min
3. 3

   Props

   Todo componente que você escreveu até aqui tinha os valores fixos no código. O Greeting sempre cumprimenta o mesmo nome, o Card sempre mostra o mesmo...

   Passing props as attributesReceiving props objectDestructuring props in signatureDefault valuesThinking about prop shapes
   30 min
4. 4

   State com useState

   Todo componente que você escreveu até agora renderiza a mesma saída para as mesmas props, sempre. Isso serve para um título ou um card, mas desmorona...

   UseState hookReading stateCalling the setterUpdater function formNever mutate stateCounter pattern
   35 min
5. 5

   Manipulando Eventos

   Um componente que só renderiza a partir das props e do estado não é interativo por conta própria: alguma coisa precisa perceber quando o usuário...

   OnClick handlerOnChange basicsPassing functions vs calling themEvent objectPassing handlers as props
   30 min
6. 6

   Renderização Condicional e Listas

   Quase toda tela que você já usou mostra uma coisa em vez de outra dependendo de alguma condição: um aviso de "você tem mensagens novas" que só...

   && for show/hideTernary for either/orMapping arrays to JSXThe key propWhy keys need to be stable
   30 min
7. 7

   Formulários e Controlled Inputs

   Digite uma letra num <input> HTML comum e o navegador cuida de tudo sozinho: o elemento do DOM guarda discretamente o que você digitou, e ninguém...

   Controlled input patternValue and onChange togetherMulti-field form stateOnSubmit and preventDefaultGathering form data
   35 min
8. 8

   Effects com useEffect

   Até aqui, o trabalho de um componente foi olhar para as props e o estado atuais e responder a uma única pergunta: o que deve aparecer na tela agora....

   What counts as a side effectUseEffect signatureDependency arrayRunning on mount onlyCleanup functionSubscribe/unsubscribe pattern
   40 min
9. 9

   Busca de Dados

   Quase nenhum aplicativo de verdade se sustenta mostrando só os dados que o usuário já tem na tela. Em algum momento um componente precisa pedir...

   Fetch inside useEffectLoading/error/data statesAbortController cleanupPreventing setState after unmountMention TanStack Query as a next step
   40 min
10. 10

    Composição de Components

    Você construiu um card com borda e sombra, e ele ficou bom. Agora você precisa do mesmo card em volta de uma foto, em volta de um formulário de login...

    Children propWrapping componentsPassing JSX as propsLifting state upThinking in component trees
    35 min
11. 11

    Context e useContext

    A sua aplicação tem um botão para ligar o modo escuro. O botão fica no painel de configurações, mas quem precisa saber do valor é um botão oito...

    CreateContextContext.ProviderUseContextWhen context is the right toolContext vs prop drilling tradeoffs
    35 min
12. 12

    useReducer

    Um formulário de checkout começa simples. Existe um valor, então você adiciona useState. Aí ele precisa de uma mensagem de erro, e lá vai outro...

    When to reach for useReducerReducer function shapeAction objectsDispatchCombining useReducer with useContext
    35 min
13. 13

    Hooks Personalizados

    Você escreveu uma gaveta que abre e fecha. Três linhas de useState e um manipulador que inverte um booleano. Depois a mesma coisa para um menu...

    Extracting stateful logic into a functionUse prefix conventionUseToggle exampleUseLocalStorage exampleHooks rules
    35 min
14. 14

    Desempenho e Memoization

    Sua aplicação tem uma tabela com duas mil linhas e um campo de busca em cima dela. Cada tecla pesa: você digita e, meio segundo depois, a letra...

    React.memo for componentsUseMemo for expensive computationsUseCallback for stable function referencesWhen memoization is overkillMeasuring before optimizing
    35 min
15. 15

    Roteamento com React Router

    Tudo o que você construiu até agora vive num único endereço. Existe uma só página, e o que você quer mostrar ao usuário aparece ou some conforme o...

    Installing react-router-domBrowserRouterRoutes and RouteLink for navigationUseParamsUseNavigate
    40 min
16. 16

    Testando Components React

    Você muda uma linha em um componente compartilhado e depois passa vinte minutos clicando pela aplicação inteira para conferir que nada mais quebrou....

    Vitest + React Testing Library setupRender and screenGetByRole queriesUserEvent for interactionsWriting one good button test
    40 min
17. 17

    Projeto Final: Aplicativo de Tarefas

    Toda lição até aqui entregou uma ideia de cada vez, com um exemplo pequeno em volta. Aplicativos de verdade não são assim. Num aplicativo de verdade...

    Combining state, lists, controlled inputsCustom hook for localStorage persistenceSmall routing setupPutting it together
    60 min

Cada lição, quiz e resposta do tutor aparece no seu idioma. O tutor de IA responde no idioma em que você pergunta.

See how hiring teams interview engineers on React, in production-like environments.