React Native: Learn & Practice

Aprenda React Native por meio de explicações concisas, exemplos de código práticos e pequenos desafios. Explore 148 lições em 10 módulos, abra um exemplo no ambiente de testes e modifique-o para entender como a interface funciona.

Um caminho claro do básico à prática

Comece com texto, visualizações, variáveis, componentes, imagens e estilos. Continue com layouts Flexbox, formulários, entrada de texto, botões, interações por toque, rolagem e listas. Os módulos posteriores introduzem hooks, componentes reutilizáveis, gerenciamento de estado, conceitos de desempenho, layouts responsivos e projetos práticos.

Leia a ideia antes de editar

Cada lição reúne um objetivo, uma visão geral em linguagem simples, ideias-chave, código, dicas práticas, um pequeno desafio e perguntas para autoavaliação. Veja o exemplo junto com sua explicação e, em seguida, abra a versão editável quando estiver pronto para experimentar. As etiquetas iniciante, intermediário e prática ajudam você a entender onde cada tópico se encaixa no curso.

Experimente suas próprias alterações

Use o editor JavaScript e JSX integrado para ajustar texto, valores, estilos e o comportamento do componente. O realce de sintaxe e a numeração de linhas facilitam o acompanhamento dos exemplos. Os recursos Desfazer e Refazer ajudam você a explorar as alterações, enquanto a opção Redefinir código restaura o exemplo inicial. Toque em Executar aplicativo para abrir a pré-visualização no aplicativo e, em seguida, retorne à edição para tentar novamente.

Explore padrões úteis

Estude entradas controladas, validação de formulários, visibilidade de senhas, contadores de caracteres, filtragem de listas, itens selecionáveis ​​e estados vazios. Pratique com contadores, temporizadores, um relógio em tempo real, um conversor de temperatura, uma calculadora de gorjetas, cartões, um acordeão, abas simples e uma mini lista de tarefas. Esses são exemplos de aprendizado que permitem examinar como pequenas partes de uma interface se encaixam.

Encontre a lição que você precisa

Pesquise títulos de lições ou filtre a biblioteca por módulo. Alterne entre todas as lições, lições em andamento, favoritos salvos e lições concluídas. Use os controles Anterior e Próximo ou deslize entre as lições. Ao abrir uma lição de uma biblioteca filtrada, a navegação segue essa seleção para que você possa permanecer nos tópicos escolhidos.

Acompanhe seu aprendizado

Adicione lições aos favoritos para revisão e marque-as como concluídas quando estiver pronto. A tela inicial mostra o progresso do curso, a contagem de lições concluídas e salvas e a sequência de estudos. Retome a última lição ou continue para o próximo tópico incompleto. O progresso e os marcadores são armazenados localmente no seu dispositivo.

Retorne aos seus experimentos

Executar um exemplo salva o código como um rascunho local para aquela lição. Reabra o ambiente de testes para restaurar o rascunho ou redefina-o para retornar ao código original. Isso facilita revisitar uma ideia após uma pausa sem precisar substituir o material inicial.

Escolha uma aparência confortável

Selecione o modo claro, o modo escuro ou o tema do sistema para a interface de aprendizado. Leia um conceito, inspecione o código, faça uma alteração específica e use o desafio para praticar a aplicação.

Projetado para estudantes, iniciantes com interesse em programação e desenvolvedores que revisam conceitos de interface móvel. Os exemplos são executados em uma pré-visualização baseada na web; APIs e comportamentos específicos da plataforma podem diferir de um aplicativo nativo. O aplicativo contém anúncios. Aplicativo educacional independente; não afiliado ou endossado pelo projeto React Native.