vimeo.com/.../1048963889

No React, tudo é
considerado um componente.

O que isso quer dizer?

Isso quer dizer que todos
os elementos visuais

que você vê em uma página
ou até mesmo em um aplicativo

são considerados componentes.

Então, agora vou começar a fazer
a demonstração de como isso funciona

e quais são os tipos de componentes
que existem no React.

Então, eu estou aqui
com o VS Code aberto,

com um projeto que
eu já estou trabalhando.

E o que é um componente?

Como você pode notar aqui,

o React Native já me oferece
um componente de texto

e um componente
chamado View.

E o que ele significa?

O View é, simplesmente,

uma área na qual eu vou
exibir algum conteúdo,

e o texto por si só já diz

que é quando eu quero
exibir algum texto.

Se eu quiser criar
o meu componente,

eu posso, simplesmente,
criar uma função.

Vou criar aqui
o meu "MyText", certo?

E eu retorno aqui, nessa função,
um componente text falando

"Esse é o meu texto",

e uma vez que eu fiz isso,
eu posso simplesmente colocar

esse componente
dentro do meu código,

e quando eu olho
no meu aplicativo,

está aqui o meu
componente renderizado.

Então, basicamente,
um componente no React Native

é tudo aquilo que
você quer renderizar

e que gostaria que
fosse exibido na tela.

E essa é a sua estrutura.

Então, basicamente,

é assim que você cria um
componente no React Native.

Para tudo aquilo que
você gostaria de exibir,

você pode criar uma função
que retorna alguma coisa,

e essa alguma coisa é
o que vai ser exibido na tela.

Então, quando você acessa
um aplicativo ou mesmo uma página,

naquele exato momento
em que você está usando,

acessando o aplicativo
ou acessando uma página,

você tem um estado atual
do momento em que você acessou.

Então imagine que você entrou,
por exemplo, no aplicativo do iFood.

Quando você abre
o aplicativo do iFood,

vai aparecer lá
a lista de restaurantes,

vai aparecer, às vezes,
o seu nome de usuário,

promoções que estão disponíveis.

Esse é um estado em que
o aplicativo está naquele momento

de acordo com
uma série de condições.

Então, dentro de
um aplicativo React Native,

temos como controlar esse estado,
que é quando você quer alterar algo

ou exibir algo diferente
para o usuário

de acordo com alguma situação.

Voltando aqui para o código,

como é que a gente faz
esse controle de estado?

A gente faz o import aqui
no React do useState,

e com ele a gente consegue
fazer um controle de estado

de qualquer coisa que
eu quero exibir na aplicação.

Então, no meu componente
"MyText", por exemplo,

eu posso falar que
eu quero um nome.

Aí, eu coloco aqui "useState",
e passo um texto aqui, "Leonardo",

e aí eu consigo usar
esse estado aqui

no meu código.

Então, aqui eu coloco o nome,

e quando eu olhar
na minha aplicação,

está aqui mostrando:
"Seja bem vindo, Leonardo".

Então, se eu mudar
esse texto "Leonardo" agora,

e colocar agora
"Nicole", por exemplo,

ele muda o estado
aqui da aplicação.

Imaginando que sua aplicação
vai ter uma série de componentes

que podem ser reutilizados
dentro dela,

como é que eu consigo passar dados
de um componente para o outro

para eu conseguir ter essa
reaplicação de componentes?

Vou mostrar agora no código
como é que fazemos isso.

Então, vamos supor aqui que
eu tenho o componente "MyText",

e eu quero usar esse mesmo
componente diversas vezes.

Então, quando eu olho
aqui em baixo, na linha 13,

eu gerei o "MyText" e coloco ele
mais três vezes aqui,

e você vê que ele simplesmente
mostra diversas vezes o mesmo texto.

Só que aí eu quero que,
conforme eu o reutilize,

eu quero que o texto
seja diferente,

que seja um "Seja bem vindo" para
diferentes pessoas, por exemplo.

A gente tem, no React...

Todo componente recebe
um argumento chamado props.

O que é esse props?

O props nada mais é do que
uma convenção que foi criada,

que é uma abreviação
de properties,

que são propriedades que você
passa para um componente

quando ele é renderizado.

Imaginando uma situação em que
você tem o mesmo componente

só que, em algumas situações,
você quer diferentes elementos

sendo renderizados,
diferentes estados,

ou conteúdos diferentes
a serem renderizados

dentro desse componente,

você pode passar uma propriedade
e essa propriedade pode ser

consumida dentro
desse componente.

Então, vamos supor aqui que
nesse meu componente "MyText"

eu tenha um monte de propriedades
que eu vou passar para ele.

Vou apagar aqui esse
useState por enquanto.

E vou falar aqui que
no meu props

eu imagino que vai ter
um atributo "name".

Quando eu renderizo
ele aqui embaixo,

vou falar então aqui,
nesse caso,

que eu quero
o name "Leonardo",

aqui eu vou querer
o name "Nicole",

como estava antes,

"name="Maria"",

e "name="João"".

Pronto.

Então, na hora que eu
salvar esse aqui,

quando eu olhar
novamente, está aqui.

Eu reutilizei o meu componente,
então, criei um componente "MyText",

que ele vai renderizar
o "Seja bem vindo"

sempre que for necessário,

e conforme eu passo
uma propriedade "name" para ele,

eu posso reutilizar
essa propriedade

e ele vai exibir,
de forma dinâmica,

esses elementos para mim.

Então, eu consigo
reutilizar esse componente

em qualquer outra parte
da minha aplicação.

Então, como você pode notar,
eu criei um componente

e eu consigo reutilizá-lo
diversas vezes

da forma que
eu achar conveniente

e aquilo que eu quiser
que for dinâmico

eu passo através do props,

e isso é reutilizado
dentro desse componente.

Então, toda vez que
você quer passar dados

de um componente para o outro,
é para isso que serve o props.

Você pode ter um
componente pai, digamos assim,

um componente
que está agrupando

todo o conteúdo de um elemento
que vai ser visualizado na página,

e através desse componente
que está agrupando todo mundo

você pode passar outros
atributos ou dados

para outros componentes
que estão contidos dentro dele.