Um momento
Aula 02
Cursos / Introdução ao Componente Navigator (⚠OBSOLETO)
Introdução ao componente Navigator

Summary

# Resumo do Transcript de Desenvolvimento React

## Tipos de Componentes React

Existem dois tipos principais de componentes em React:
1. **Class Component**: Utiliza uma classe que estende o `Component`, mantendo estado.
2. **Functional Component**: Conhecido como stateless, não mantém estado e é usado apenas para renderizar elementos na tela.

## Criando um Componente Functional

- A criação de um componente funcional é simples, podendo ser utilizado para exibir textos ou templates estáticos.
- O nome do componente deve iniciar com letras maiúsculas.
- Usamos a sintaxe ES6 com `const` e arrow functions para definir o componente.

### Exemplo de Criação

```javascript
const PrimeiraPagina = () => {
    return <Text>Esse é um texto</Text>;
};
export default PrimeiraPagina;
  • A exportação do componente permite que ele seja importado em outros arquivos.

Importando o Componente

  • Para usar o componente, devemos importá-lo em um arquivo índice:
import PrimeiraPagina from './components/PrimeiraPagina';
  • Importante: Não é necessário incluir a extensão .js.

Identificando Erros

Durante a importação e uso do componente, é comum encontrar erros como:

  • "Can't find variable react": Isso acontece se não fizermos os imports necessários.

Solução de Problemas

  • É necessário importar o React e, se usar elementos do React Native como <Text>, também devemos importar:
import React from 'react';
import { Text } from 'react-native';

Notação Destructuring

  • Utilizamos destructuring para evitar a repetição do módulo, facilitando o acesso aos componentes, por exemplo:
const { Text } = require('react-native');

Conclusão

Neste vídeo, aprendemos sobre componentes funcionais em React, sua criação, importação e como resolver erros comuns relacionados a imports.

Video Transcript

A aplicação aqui, né? Meu navegador. Então, tem dois tipos de component React. Tem o functional component e tem o class component, essencialmente, né? Então, class component é o componente que a gente vem usando até agora. Esse aqui, por exemplo, que é uma classe e extends, deriva do component. O que... Então, o componente de classe tem um estado, né? A diferença entre os dois aqui é que o functional component não tem estado. A gente chama stateless, sem estado. E o único serviço que o functional... o componente functional faz é mostrar uma coisa, desenhar uma coisa na tela. Então, não mantém estado, isso é usado para mostrar um template. Então, vamos clicar em primeira página. E esse primeiro página, a gente não quer fazer nada. Vamos botar só um texto nela. Então, não precisa de estado, né? Então, a gente faz um componente como se fosse estático, sem nada. Só para mostrar uma coisa. Vamos botar uma const. Vamos chamar o nome do componente. Sempre use a primeira letra de cada palavra. Maiúscula, tá bom? No nome do componente. Não se esqueça, a primeira também tem que ser maiúscula. Primeira letra da primeira palavra. Vamos definir. Vamos usar a função de flash aqui, tá bom? Se você não está confuso, isso aqui, isso aqui é usando as coisas do JavaScript ES6, a nova palavra chave const, que significa que eu só posso definir essa variável uma vez e não mais depois disso, dessa definição. E aqui, usando a função de flash, também uma novidade na nova versão do JavaScript ES6, que é, na verdade, quase a mesma coisa de falar isso assim, tá bom? Então, se eu for usar o ES5, ES5, que é a versão como se fosse antiga, ia ser assim. Tá bom? Mas a gente vai usar o ES6. Tá bom? O que a gente tem que fazer nesta função? Só retornar o template. Então, vamos botar um text. Tá bom? E vamos fazer... E, a primeira... Só um texto aí. Aí, quando você, no final, tem que exportar, exportar default, primeira página. Pra essa maneira, a gente pode importar esse componente do nosso index. Tá bom? Só um detalhe aqui. Eu acho que esse texto não vai ser conhecido, mas vamos tentar, só pra ver o erro. Então, vamos voltar no index. Vamos por solid test, um import here, primeira página from, onde é que está a primeira página. Se lembra que a gente criou uma pasta que é chamada components. Então, vai estar lá, né? Vamos voltar. Se é no referente ao diretório o presente, você tem que botar um ponto e uma barra, tá bom? Então, vou botar ponto, barra, components, primeira página. Não precisa da extensão ponto Js. Aí, bota o ponto e o vírgula, tá bom? Não se esqueça do ponto, barra, porque é o diretório presente, referente a esse diretório presente, e não precisa da extensão. Então, vamos... A gente importou, vamos usar. Vamos só recortar tudo isso aqui, e eu vou botar o componente aqui. Qual é o nome do componente? Primeira página, tá bom? E vamos ver o que acontece. Can't find variable react. Então, o que é que aconteceu? Então, toda vez que a gente cria um componente de novo, a gente tem que primeiro fazer os imports, né? E eu esqueci de fazer aqui, né? Primeiro de tudo, tem que ter o react. Aí, depois, se você está usando alguma coisa do react nere, você importa dele, por exemplo, o texto. Mas vamos só fazer o react primeiro. Vamos lá no componente. Vamos import react from react. O módulo é chamado react, e a gente dá o nome da variável, chama react. Tá bom? Agora, falou que não achou o texto, né? O texto vem do react native. Então, vamos dar o import, text, tá bom? Teu destructuring from react native. Vamos ver o que acontece. Tá aí, né? Essa é a primeira página. Você notou que eu preciso usar isso? Que é o destructuring, se eu não for, o que acontece? Invalido, né? Porque esse módulo aqui é chamado módulo do react native. Então, se eu não tiver esse negócio aqui, isso vai ter que ser react native, assim. Aí, quando falar de texto, eu falo react native.txt. Então, dentro do objeto react native, tem um componente chamado texto. Então, a gente não quer digitar todo o tempo assim. Ah, estou me referindo ao texto que está dentro do react native, do módulo do react native. Então, a gente usa o destructuring. Em vez, a gente quer extrair essa parte aqui. A maneira que a gente faz é assim. Põe a chave, o braces aí e fala o nome da coisa que está dentro do módulo, que a gente quer extrair. Nesse caso, o texto. Então, eu estou extraindo esse texto dentro desse módulo chamado react native. Desta maneira, eu não tenho que falar todo o tempo do react native, que já foi extraído. Então, vamos voltar, está tudo funcionando agora. E aqui, a gente fez um function component. Note que a gente não tem uma classe aqui, como a gente tinha nesse primeiro aqui. Tá bom? Porque a gente não precisa manter esse dado nesse componente da página. Tá bom?
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: