Mapa de conceitos e implementação

Do conceito ao aplicativo com React Native

Explore os conceitos fundamentais, selecione cada bloco do mapa e veja sua função, um exemplo de código e como ele se conecta à construção de um aplicativo móvel usando JavaScript e Expo.

Mapa conceitual interativo

Clique ou toque em um conceito para abrir sua explicação no painel ao lado.

Ideia central: componentes formam a interface; estado guarda valores que mudam; funções definem ações; eventos conectam os toques do usuário às funções.

CONCEITO PRINCIPAL

React Native

Framework para criar aplicativos móveis com componentes React, usando JavaScript.

Como funciona?

Você descreve a interface com componentes; o React Native os apresenta usando elementos nativos da plataforma.

Exemplo

import { View, Text } from 'react-native';

export default function App() {
  return (
    
      Meu primeiro app!
    
  );
}

O botão seleciona o exemplo; use Ctrl+C para copiá-lo.

Roteiro de implementação: do zero ao primeiro app

Siga a sequência. Os comandos são executados no terminal do Windows, Linux ou macOS, com Node.js instalado.

PASSO 01

Preparar ferramentas

Instale Node.js LTS e um editor, como Visual Studio Code. Verifique com node -v e npm -v.

PASSO 02

Criar projeto

Execute npx create-expo-app@latest MeuApp --template blank.

PASSO 03

Entrar e iniciar

Execute cd MeuApp e depois npx expo start.

PASSO 04

Executar e editar

Leia o QR Code com Expo Go ou pressione w para abrir na web, quando disponível. Edite App.js.

Atenção: a estrutura do arquivo inicial varia conforme o modelo do Expo. No template blank, normalmente existe App.js; em outros templates, a tela inicial pode estar dentro de app/.

Checklist de aprendizagem

Marque os itens conforme avançar. O indicador é atualizado automaticamente neste navegador enquanto a página estiver aberta.

Sei criar e iniciar um projeto Expo. Compreendo a função de View e Text. Consigo criar botões com Button ou Pressable. Sei usar uma função em onPress. Entendo como o estado muda a interface. Consigo organizar a tela com StyleSheet e Flexbox. Testei o app no celular ou navegador. Sei onde procurar documentação e corrigir erros.

0 de 8 etapas concluídas.