Um momento
Aula 03
Cursos / Autenticação com o Firebase, React Native & Redux
Template do Componente App e o Registro com o AppRegistry

Summary

Summary of Transcript

The speaker discusses the process of setting up a React Native app component. Here’s a breakdown of the steps:

  1. Component Setup:

    • The speaker creates a template for the app component by adding a View and duplicating Text components for demonstration.
    • They emphasize the need to import these components from React Native.
  2. Initializing the App:

    • The speaker directs to the index file for both iOS and Android, starting with iOS.
    • They delete existing content to set up a fresh starting point for the application.
    • Utilization of the AppRegistry from React Native is highlighted, which is required to register the app component.
  3. Imports:

    • They import AppRegistry and the newly created App component, specifying the correct path to the src directory.
  4. Registering the Component:

    • The AppRegistry.registerComponent method is used, where the project name is specified along with a function that returns the app component.
  5. Testing:

    • After saving the changes, the speaker runs the iPhone simulator to check for errors. The output "oi, oi, oi, oi, oi" confirms that the app component is functioning correctly.
  6. Android Setup:

    • The speaker notes that the same code from the iOS index file will be copied into the Android index file (index.android.js) to ensure consistent functionality across platforms.
  7. Final Note:

    • The speaker asserts that application development can commence in the src folder, without concern for platform differences (Android vs iOS). They verify that everything is running smoothly on both the iOS and Android emulators.

Overall, the transcript provides a step-by-step guide on configuring a foundational setup in React Native, covering component setup, registration, and initial testing on both iOS and Android platforms.

Video Transcript

Então vamos retornar o template para esse componente app. O que eu vou fazer? Eu vou adicionar um view, tá bom? E dentro da view você tem uns componentes de texto e vou duplicar só para parecer alguma coisa. Então como a gente está usando view e text a gente tem que importar que são componentes do React Native. Import. Vamos tirar de dentro do module do React Native, então precisa do curly braces aqui de estruturar a view e o text from React Native. Bom? Então a gente já está ok, vamos salvar o componente e o que a gente vai fazer agora? A gente vai para o index do Android iOS aqui, eu vou começar do iOS, vamos deletar tudo, tá bom? E vamos começar a iniciar o ponto de partida do aplicativo. Primeiro a gente vai precisar do app registry que é parte do React Native. React Native, tá bom? Esse componente app registry vai servir para chamar a gente, vai chamar a função register component que vai dar o ponto de partida para o aplicativo. Note que a gente não precisa importar nada do React, só do React Native. Então vai o app registry e agora a gente vai também precisar importar o app, então vamos dar import do componente que a gente fez agora, do app, vamos chamar de app from, onde é que está localizado? Está dentro da pasta src que é ter que ter o ponto barra, porque está no diretório presente. Barra src, a app. Então precisa da extensão do ponto js e assim. E a gente vai chamar a app registry ponto register component, o nome do componente vai ser o nome do projeto, nesse caso a autenticação com Firebase Redux, tá bom? Eu criei o projeto com esse nome, então eu tenho que ir usá-lo. E o segundo argumento vai ser uma função, vou dar a função de flash e vai retornar o componente app, deixa eu aumentar a tela aqui, vai retornar esse cara aqui, então só digitar app, tá bom? Ponto em vírgula para finalizar. Então esse componente app register que está dentro do React Native, vai registrar o componente que é esse cara aqui, esse componente aqui, o app vai ser o ponto de partida do aplicativo, tá bom? Vamos salvar, só rodar aqui o meu simulador do iPhone para ver se não deu erro. Então o ponto de partida está oi, oi, oi, oi, oi, que funcionou que é o componente app, né? Então tá tudo certo, quando a gente terminar esse cara vamos copiar todo o código aqui e colar no mesmo coisa no Android, no index.android.js, vou remover tudo e vou colar a mesma coisa do index.ios.js, porque vamos rodar tanto como no iOS, como no Android, então vai ser o mesmo coisa. E agora a gente pode começar a escrever a aplicação dentro dessa pasta src e não vai importar se é Android ou iOS. Só para demonstrar, vou pro meu amulador do Android, vou download, atualizei, está posicionando também no Android. Então tá tudo bem.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: