O que é React Native?

Quem usa React Native?

Por que escolher react native?

Desenvolvimento multiplataforma

Reutilização de conhecimentos

Comunidade ativa

Acesso a componentes nativos

Por onde começar?

• HTML e CSS: Embora o React Native não utilize diretamente HTML e CSS, compreender a estruturação de interfaces e estilos é muito útil para entender como os componentes se comportam e são estilizados.

• JavaScript: Ter um conhecimento sólido em JavaScript é fundamental, já que o React Native é construído sobre essa linguagem. É importante entender conceitos como funções, objetos, arrays, ES6+ (let, const, arrow functions), promises, async/await e manipulação de dados.

JavaScript é a base do React Native, então ter um bom entendimento dessa linguagem é essencial. Se você ainda precisa fortalecer seus conhecimentos em JavaScript, HTML e CSS, temos uma ótima recomendação para você.

Comece com o Discover da Rocketseat

Avance com a formação fullstack da Rocketseat

• Aprender do zero as principais linguagens e tecnologias web.

• Dominar o desenvolvimento full stack, do front-end ao back-end.

• Adquirir experiência prática com uma didática mão na massa.

• Conhecer tudo que precisa para iniciar sua carreira e conquistar sua primeira vaga em programação.

Preparando o ambiente de desenvolvimento

Expo

React Native CLI

Instalando o Expo

1. Instale o Node.js (necessário para executar o React Native).

2. Instale a CLI do Expo com o comando:

npm install -g expo-cli

3. Crie seu primeiro projeto com o comando:

expo init MeuApp

4. Inicie o projeto:

cd MeuApp
expo start

Conceitos fundamentais do React Native

JSX

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

const App = () => (
  <View>
    <Text>Olá, mundo!</Text>
  </View>
);

export default App;

Componentes básicos

• View: Equivalente a uma <div> no HTML, é o contêiner básico.

• Text: Usado para exibir textos.

• Image: Exibe imagens na interface.

• TextInput: Um campo de entrada de texto.

• ScrollView: Um contêiner com suporte à rolagem para quando o conteúdo excede o tamanho da tela.

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

const MeuApp = () => {
  return (
    <View>
      <Text>Bem-vindo ao meu primeiro app!</Text>
      <Image source={{ uri: 'https://images.unsplash.com/photo-1517841905240-472988babdf9' }} style={{ width: 200, height: 200 }} />
    </View>
  );
};

export default MeuApp;

💜 Basta acessar, modificar o código e ver as atualizações ao vivo!

Estilização de componentes

import { Text, SafeAreaView, StyleSheet } from 'react-native';
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.heading}>
        Faaaala Dev!
      </Text>
      <Card style={styles.card}>
        <Text style={styles.paragraph}>
          Mergulhe no mundo da estilização com React Native e construa interfaces modernas e intuitivas. 🚀
        </Text>
      </Card>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#121214',
    padding: 16,
  },
  heading: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#04D361', 
    textAlign: 'center',
    marginBottom: 16,
  },
  card: {
    backgroundColor: '#202024', 
    padding: 20,
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.8,
    shadowRadius: 2,
  },
  paragraph: {
    fontSize: 16,
    color: '#E1E1E6', 
    textAlign: 'center',
    marginBottom: 12,
  },
});

💜 Acesse o código no Expo Snack

Propriedades e estado (props & state)

import { SafeAreaView, Text, StyleSheet } from 'react-native';

// Componente que recebe a prop 'nome' e exibe uma saudação
const Saudacao = ({ nome }) => {
  return <Text style={styles.saudacao}>Olá, {nome}! 🚀</Text>;
};

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      {/* Passando diferentes nomes como props para o componente Saudacao */}
      <Saudacao nome="Diego" />
      <Saudacao nome="Myke" />
      <Saudacao nome="Rodrigo" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#121214',
  },
  saudacao: {
    fontSize: 24,
    color: '#04D361',
    margin: 10,
    fontWeight: 'bold',
  },
});

💜 Acesse o código no Expo Snack

Hooks

• useState: Para gerenciar o estado local de um componente.

• useEffect: Para lidar com efeitos colaterais, como chamadas a APIs ou a execução de código após o componente ser renderizado.

• useContext, useReducer e outros hooks também estão disponíveis no React Native da mesma forma que no React.

import React, { useState, useEffect } from 'react';
import { SafeAreaView, Text, Button, StyleSheet } from 'react-native';

export default function App() {
  const [contador, setContador] = useState(0); // Estado local
  const [mensagem, setMensagem] = useState(''); // Estado para armazenar mensagem de API fictícia

  // Hook useEffect para simular uma chamada de API
  useEffect(() => {
    // Simulando uma chamada de API com setTimeout
    setTimeout(() => {
      setMensagem('Aqui está sua mensagem da API!');
    }, 2000);
  }, []); // O array vazio [] faz com que o efeito seja executado apenas uma vez

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.paragraph}>
        Você clicou {contador} vezes!
      </Text>
      <Button title="Clique aqui" onPress={() => setContador(contador + 1)} />

      {/* Exibindo a mensagem recebida pela "API" */}
      <Text style={styles.mensagem}>{mensagem}</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#121214',
    padding: 16,
  },
  paragraph: {
    fontSize: 18,
    color: '#E1E1E6',
    margin: 10,
    textAlign: 'center',
  },
  mensagem: {
    fontSize: 16,
    color: '#04D361',
    marginTop: 20,
    textAlign: 'center',
  },
});

💜 Acesse o código no Expo Snack

Próximos passos

Como se tornar um desenvolvedor React Native profissional:

• Certificações: Adquirir uma certificação em React Native é um diferencial importante no mercado.

• Contribuição para Open-Source: Participar de projetos open-source no GitHub não só amplia suas habilidades, como também aumenta sua visibilidade e te conecta com outros desenvolvedores da comunidade.

• Cursos Avançados: Aprofunde seu conhecimento com cursos que abrangem desde o uso de APIs e gerenciamento de estado com Redux, até o domínio do TypeScript. A formação em React native da Rocketseat inclui módulos essenciais para seu desenvolvimento, como Integração com Back-end, Animações e Login Social.

Certificações e mercado de trabalho

A relevância da certificação Rocketseat

Construindo seu portfólio

Conclusão