Módulo 1 BÁSICO

Atividade 4: Hello World! 🌍

Hora de escrever seu primeiro código e ver funcionando no celular!

🎯 Objetivos desta aula

  • ✓ Criar seu primeiro app do zero
  • ✓ Entender a estrutura básica do código React Native
  • ✓ Modificar texto e ver as mudanças em tempo real

🚀 Criando um novo projeto

Vamos criar nosso primeiro app! Siga os passos:

  1. 1
    Acesse o Snack

    Vá em snack.expo.dev

  2. 2
    Limpe o código padrão

    Selecione tudo (Ctrl+A) e delete

  3. 3
    Digite o código abaixo

    Copie e cole no arquivo App.js

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

export default function App() {
  return (
    <View style={{ 
      flex: 1, 
      justifyContent: 'center', 
      alignItems: 'center',
      backgroundColor: '#1e293b' 
    }}>
      <Text style={{ 
        color: 'white', 
        fontSize: 32, 
        fontWeight: 'bold' 
      }}>
        Hello World! 🌍
      </Text>
      <Text style={{ 
        color: '#94a3b8', 
        fontSize: 16, 
        marginTop: 10 
      }}>
        Meu primeiro app React Native
      </Text>
    </View>
  );
}

💡 Dica: Você pode clicar no botão "Copiar" e colar diretamente no Snack!

🔍 Entendendo o código

Vamos analisar cada parte do código:

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

Import: Importamos os componentes que vamos usar. Text para texto e View para "caixas" (containers).

export default function App() { ... }

Função App: É o "corpo" do nosso aplicativo. Tudo que está dentro dela aparece na tela.

<View style={{ ... }}>

View: É como uma <div> do HTML. Usamos para agrupar elementos e aplicar estilos.

<Text style={{ ... }}>Hello World!</Text>

Text: Usado para exibir texto na tela. Em React Native, todo texto precisa estar dentro de um <Text>.

style={{ color: 'white', fontSize: 32 }}

Style: Similar ao CSS, mas em formato de objeto JavaScript. Note as chaves duplas {{ }}.

🏆 Desafio: Personalize seu app!

Agora é sua vez! Faça as seguintes modificações:

Mude o texto

Troque "Hello World" pelo seu nome

Mude a cor de fundo

Experimente: #0f172a, #7c3aed, #059669

Adicione um emoji

Coloque um emoji depois do seu nome!

Aumente o tamanho do texto

Mude fontSize para 48 ou mais

💡 Cores em HEX: Cores começam com # seguido de 6 caracteres. Experimente htmlcolorcodes.com para escolher cores!

📌 Conceitos importantes

Componente

Um "pedaço" reutilizável da interface. App, Text e View são componentes.

JSX

Sintaxe que parece HTML mas é JavaScript. Permite escrever interface de forma visual.

Props

"Propriedades" passadas aos componentes. style é uma prop.

Hot Reload

Mudanças no código aparecem instantaneamente no app, sem precisar recarregar.

📝 Quiz - Teste seus conhecimentos

← Atividade Anterior Próxima Atividade →