anteriorpróximo
Aula 02
Cursos / Autenticação com o Firebase, React Native & Redux
Geração do Projeto com o Comando react-native (init, run-ios, run-android)

Summary

Resumo do Transcrição em Markdown

Criando um Projeto React Native

  1. Início:

    • Acesse o terminal.
    • Comando para criar um projeto: 
      npx react-native init AuthFirebaseRedux

  2. Estrutura do Projeto:

    • Após a criação, uma pasta do projeto irá ser gerada.
    • Navegue para a pasta do projeto usando: 
      cd AuthFirebaseRedux
    • Estruturas de pastas include:
      • index.js para iOS e Android
      • package.json (uso com NPM)
      • node_modules
      • Pastas Android e iOS.

  3. Versão:

    • O vídeo utiliza React Native v0.37.

Executando a Aplicação

  • Para iOS:

    npx react-native run-ios
    • Isso abrirá o simulador do Xcode e o React Packager.

  • Para Android:

    npx react-native run-android
    • Se abre o simulador Android com o Packager.

Resolvendo Problemas

  • Se o servidor de desenvolvimento não estiver rodando: 
    npm start
  • Para problemas ao executar o simulador Android:
    • Abra o Android Studio, importe o projeto, e clique em "Run".

Configurando o Editor

  1. Editor de Texto:
    • Uso do Atom como editor.
  2. Criando Estrutura de Código:
    • Criar uma pasta chamada src dentro do projeto.
    • Criar um arquivo app.js dentro de src como ponto de partida.
  3. Código Inicial em app.js: 
    import React from 'react';

const App = () => {
  return (
    // template do seu componente
  );
};

export default App;

Conclusão

  • Preparativos do projeto básicos estão finalizados, pronto para desenvolvimento adicional.
Scroll down above for more

Video Transcript

Vou para o meu terminal. Aqui no terminal, vou criar o projeto com o comando React Native, init e o nome do projeto. E vou dar o nome à autenticação com Firebase Redux. Tá bom? Isso vai gerar os arquivos para o nosso projeto. Então, eu já fiz porque demora um pouquinho. Então, quando terminar, vamos continuar. Depois que terminar, vai ter a pasta do projeto. Vamos dar a CD e entrar na pasta do projeto. Vou dar os arquivos, aqui o index do iOS, o index do Android. Tem um package JSON que estamos usando no NPM e o Modules do Node. E as pastas para o Android e para o iOS. Tá bom? Só um detalhe, eu estou usando React Native v.0.37 neste vídeo. Tá bom? Agora vamos rodar a aplicação. Se você está usando o iOS, React Native, Run, iOS. Tá bom? Eu acabei de rodar esse comando e abriu o meu simulador do Xcode aqui. E também esse React Packager, essa tela do terminal, React Packager. Se você está usando o Android, é React Native, Run, Android. Tá bom? E se tudo dá certo, vai abrir o simulador do Android. Com também, com o Packager. No meu caso, às vezes dá problema. Eu já tive o problema no passado que o Run Time Development Server não estava rodando, se você tiver esse problema, dá o NPM Start e um novo terminal para rodar o React Packager. Tá bom? E se ainda não estiver funcionando, no meu caso, por exemplo, para rodar o Android, dá erro quando eu faço React Native, Run, Android. Então, para esses casos, se você não conseguir executar o simulador usando esses comandos aqui, minha sugestão é que você abra o programa, o respectivo programa para a sua plataforma. Por exemplo, para o iOS, eu abro o Xcode, né? Então, você pode abrir o Xcode e abrir o projeto com o Xcode e rodar o simulador de lá. No meu caso, eu não tenho problema com o Xcode, mas eu tenho um problema com o Android. Então, o que é que eu faço? Eu abro o Android Studio, né? Abro o Android Studio, abro o projeto lá, nesse caso aqui, e dá o Play aqui. Clica no Play, no Run App, rodar, né? E vai perguntar qual o dispositivo que você quer usar, se você não tiver um, é só criar. E então vai dar na tela do amulador. Então, por isso, vamos voltar tudo rodando agora. Tem o meu iOS, tem o meu Android, simuladores aqui. Então, vamos abrir o editor de texto da parte de nosso projeto e começar a trabalhar. Vou aqui para o Atom, eu uso o Atom. Abrir aqui, primeira coisa que eu vou fazer, vou criar uma pasta, chamada src, dentro do nosso projeto. O código fonte vai estar dentro dessa pasta. E, seguida, vou criar um novo arquivo dentro de src, que vai chamar de app.js, vai ser o ponto de partida, depois do index aqui. Então, para o app.js, vamos dar um import React, que a gente já precisou do React. Vamos fazer o componente funcional, variável, igual a uma função, esse caso eu vou fazer a função de flash, e vou exportar no final, export the fault app, para disponibilizar esse app para outros arquivos. Aqui dentro da função, eu tenho que retornar o template do
See more
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação:
Quero contribuir