Scribd
Carregar
185 visualizações13 páginas

Fundamentos React Native

Enviado por

toricharp
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
185 visualizações13 páginas

Fundamentos React Native

Enviado por

toricharp
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 13

Fundamentos

React Native
Componentes
O React Native, assim como o React, trabalha com um conceito de componentes. Criamos os
elementos que vão compor nosso aplicativo, os dividindo em componentes. Um componente é
um elemento independente que compoẽ nossa aplicação. Assim podemos dividir nosso aplicativo
em partes independentes e reutilizáveis, podemos pensar cada parte do aplicativo
separadamente.

No React Native, podemos usar componentes para encurtar nosso código e dividi-lo em
pequenos componentes que são chamados posteriormente no App.js.

É possível criar seus próprios componentes personalizados para atender às necessidades


específicas do aplicativo. Os componentes no React Native são escritos em JavaScript e
incorporam estilos CSS para definir a aparência e o layout dos elementos na tela. Esses estilos
usam uma sintaxe semelhante ao CSS, mas com algumas diferenças importantes, chamado de
JSX.
Componentes
Principais

O React Native tem muitos


Componentes Principais
para tudo, de controles a
indicadores de atividade.
Você trabalhará
principalmente com os
seguintes Componentes
Principais:
Outros
componentes

SafeAreaView: O objetivo do SafeAreaView é


renderizar conteúdo dentro dos limites da área
segura de um dispositivo. Atualmente, é
aplicável apenas a dispositivos iOS com iOS
versão 11 ou posterior.
Outros
componentes

SafeAreaView: O objetivo do SafeAreaView é


renderizar conteúdo dentro dos limites da área
segura de um dispositivo. Atualmente, é
aplicável apenas a dispositivos iOS com iOS
versão 11 ou posterior.
Outros
componentes

StyleSheet: Componente responsável por trazer


estilo ao App, bem similar ao CSS. Utiliza várias
propriedades como:
top: distância do topo,
left: distância da esquerda,
width: largura,
height: altura,
backgroundColor: cor de fundo
color: cor da fonte,
fontSize: tamanho da fonte
Outros
componentes

Button: Componente básico de botão, que suporta


um nível mínimo de personalização, como: evento,
título e cor.
Outros
componentes

TouchableOpacity: é um dos componentes tocáveis ​


do React Native que são amplamente usados ​para
registrar eventos de toque ou pressão em
visualizações (como botões ou cartões).

Este componente desaparece quando pressionado e


reaparece quando liberado.
JSX

Criado pela equipe de desenvolvimento do React, o JSX é uma forma de criar


elementos para serem utilizadas como templates de aplicações React.
Basicamente, os elementos criados com o JSX são bem similares com código
HTML e fornecem aos desenvolvedores uma forma mais simples e intuitiva de
criar os componentes de uma aplicação. Porém, apesar de muito similar ao
HTML, o JSX não é interpretado pelo navegador. Por este motivo, deve-se utilizar
um “transpilador” para essa conversão, atualmente, o mais conhecido deles é o
Babel.
Props
Componentes do React usam props para se
comunicar um com ou outro. Todo
componente pai pode passar alguma
informação aos seus filhos por meio das
props.

Props podem te lembrar de atributos


HTML, ou até mesmo argumentos de
função, mas você pode passar qualquer
valor JavaScript por meio delas, incluindo
objetos, arrays, e funções.
Props
Em outras palavras, as propriedades, como o próprio nome já indica, representam atributos
referentes aos componentes. Essas propriedades são informações passadas entre os
componentes (normalmente de pai para filho) e são o principal canal de comunicação entre eles.
Seu funcionamento não tem nenhum segredo e é bem fácil.

Vale lembrar que o nome props também é arbitrário, nós o usamos por questão de convenção,
mas a escolha no final é sua
States
O States no React Native é um recurso
integrado que permite que você
gerencie e armazene dados que
podem mudar ao longo do tempo. Ele
representa a condição atual ou os
dados dentro de um componente e
geralmente é usado para renderizar
conteúdo dinâmico. O estado é
declarado dentro de um componente
e pode ser modificado para disparar
novas renderizações.
States
Em outras palavras, os estados, assim como as props, nada mais são do que dados a serem
usados pelos componentes. Esses dados podem ser strings, números, arrays ou mesmo
objetos. A única diferença entre os estados e as propriedades é que as propriedades são
somente informações externas recebidas, como um parâmetro de uma função, que deverá
ser usada no corpo do componente (ou mesmo ser passada adiante); já os estados são dados
privados e completamente controlados pelo próprio componente. Como o próprio nome já
indica, ele representa um estado do componente, ou seja, um momento específico no tempo
em que ele tem uma informação que poderá ser diferente no futuro.

Imagine que os estados são como "fotos" dos nossos componentes: elas guardam informações
sobre o atual momento no ciclo de vida dele. Isso significa que os dados dessa "foto" podem (e
provavelmente vão) mudar no futuro, onde teremos um novo estado (ou seja, uma nova foto).
Então, lembre-se desta regrinha de ouro: sempre que um componente for armazenar dados que
serão alterados dentro dele durante o seu ciclo de vida, os estados serão usados.

Você também pode gostar