Conceitos do React Native
(Componentização, Estilos e JSX)
Programação para Dispositivos Móveis
Mauro Lopes Carvalho Silva
Professor EBTT
DCOMP – Departamento de Computação
Campus Monte Castelo
Instituto Federal de Educação Ciência e Tecnologia do Maranhão
Programação para Dispositivos Móveis
Objetivos
• Após termos o contato inicial com o ambiente do
Snack Expo e entender os elementos que fazem
parte de uma aplicação React Native, iremos nesta
aula aprofundar em alguns conceitos chave e
compreender a criação de um componente do
Usuário.
Programação para Dispositivos Móveis
Plano de Aula
• Componentes em React Native
• Estilizando os componentes
• Sintaxe JSX
• Criando Componentes Funcionais
• Usando o Componente criado
Programação para Dispositivos Móveis
Conceitos do React Native
Componentes em React Native
• Em React Native, tudo é um componente;
• Os componentes são encapsulamentos autônomos que
contêm tanto a lógica quanto a interface do usuário
(UI) para uma parte específica do seu aplicativo;
• Seja um botão, uma barra de navegação, um painel de
postagem ou um formulário completo, cada um pode ser
encapsulado em um componente;
• A ideia fundamental por trás dos componentes é
promover a reutilização e a modularidade. Em vez de
construir interfaces do zero todas as vezes, os
componentes permitem que você crie blocos de UI
reutilizáveis que podem ser montados e rearranjados.
Programação para Dispositivos Móveis
Conceitos do React Native
Componentes em React Native
Programação para Dispositivos Móveis
Conceitos do React Native
Componentes Básicos do React Native
• Em React Native, os componentes básicos são blocos
de construção da interface do usuário, como View,
Text, Image, ScrollView, TextInput,
TouchableOpacity e Button. Eles permitem criar a
estrutura visual do seu aplicativo, exibindo conteúdo,
recebendo entrada do usuário e gerenciando
interações.
Programação para Dispositivos Móveis
Conceitos do React Native
Componentes Básicos do React Native
• Componentes Essenciais:
– View: Um contêiner para outros componentes, similar a uma
div em HTML, usado para layout e agrupamento de elementos;
– Text: Exibe texto na tela, permitindo formatação e estilos;
– Image: Renderiza imagens, aceitando URLs ou caminhos locais
como fontes;
– ScrollView: Permite a rolagem de conteúdo quando o
conteúdo excede o tamanho da tela;
– TextInput: Componente para entrada de texto do usuário;
– TouchableOpacity: Torna um componente clicável, com
feedback visual de toque;
– Button: Um botão simples com texto e estilo padrão.
Programação para Dispositivos Móveis
Conceitos do React Native
Componentes Básicos do React Native
• Outros Componentes Importantes:
– FlatList: Componente otimizado para exibir listas longas
de dados, renderizando apenas os itens visíveis na tela;
– ActivityIndicator: Mostra um indicador de
carregamento, útil durante a busca de dados ou
processamento;
– SafeAreaView: Garante que o conteúdo seja exibido
dentro das áreas seguras da tela, evitando sobreposição
de elementos como a barra de status ou a área de
navegação.
Programação para Dispositivos Móveis
Conceitos do React Native
Componentes Básicos do React Native
• Fundamental compreender que:
– Todo componente é uma Função. E como uma função,
seu uso envolve ser chamada e receber parâmetros
(argumentos).
Programação para Dispositivos Móveis
Conceitos do React Native
Estilizando os Componentes
• Com o React Native, você estiliza seus componentes
usando JavaScript;
• Todos os componentes principais aceitam uma
propriedade chamada style;
• Os nomes e valores de estilo geralmente
correspondem a como o CSS funciona na web, exceto
que os nomes são escritos usando camel-case:
– Em CSS (HTML): background-color
– Em estilos de React-Native: backgroundColor
Programação para Dispositivos Móveis
Conceitos do React Native
Estilizando os Componentes
• O React Native oferece várias abordagens para estilizar
aplicativos móveis (conjunto de seus componentes),
dando aos desenvolvedores flexibilidade na forma
como projetam suas interfaces de usuário. Aqui estão
os principais métodos para estilizar no React Native:
– Estilos embutidos (inline)
– [Link]()
– Bibliotecas externas
– Estilo baseado em tema
Programação para Dispositivos Móveis
Conceitos do React Native
Estilos embutidos (inline)
• Estilização direta aplicada diretamente aos componentes;
• Útil para estilo dinâmico ou condicional.
Incorporação de código JavaScript
Programação para Dispositivos Móveis
Conceitos do React Native
[Link]()
• A abordagem recomendada para a maioria das necessidades
de estilo;
• StyleSheet é um objeto (alguns diriam ser uma classe) que
permite definir estilos de maneira otimizada e estruturada;
• Oferece benefícios de desempenho e verificação de tipo.
Programação para Dispositivos Móveis
Conceitos do React Native
Bibliotecas externas
• Uso de bibliotecas de terceiros, como styled-components e
NativeWind;
• Permite sintaxe semelhante a CSS em JavaScript;
• Fornece recursos avançados de temas.
• O NativeWind permite que você use o estilo utilitário do Tailwind CSS
no React Native. Você pode aplicar classes predefinidas diretamente
aos componentes do aplicativo móvel.
Programação para Dispositivos Móveis
Conceitos do React Native
Estilo baseado em tema
• Cria um objeto de tema centralizado;
• Estilo consistente em todo o aplicativo;
• Esquemas de cores e sistemas de design fáceis de gerenciar.
Programação para Dispositivos Móveis
Conceitos do React Native
Sintaxe JSX
• JSX, ou JavaScript XML, é uma extensão do JavaScript
que permite você escrever código de marcação
“semelhante a HTML” dentro do JavaScript;
• É uma abordagem visual que torna mais intuitivo criar
interfaces de usuário (UI) com React (React Native);
• No entanto, JSX vai além de simples marcação; ele
também suporta a incorporação de expressões
JavaScript, tornando-se uma ferramenta poderosa e
flexível para desenvolvedores;
• O código JSX é transformado em código JavaScript
puro pelo compilador Babel durante a compilação.
Programação para Dispositivos Móveis
Conceitos do React Native
Sintaxe JSX
• A ideia por trás do JSX era unificar a definição da
estrutura da UI com a lógica que a controla. Em vez
de manter a marcação (HTML) e a lógica (JavaScript)
separadas, por que não combiná-las em uma única
linguagem que pode expressar ambas? Assim nasceu o
JSX;
Programação para Dispositivos Móveis
Conceitos do React Native
Incorporando Expressões JavaScript em JSX
• Ao usar JSX, uma das suas principais vantagens é a
capacidade de incorporar expressões JavaScript
diretamente dentro da sua sintaxe;
• Isso permite uma integração profunda entre a
estrutura da UI e a lógica subjacente, fazendo com
que o desenvolvimento de componentes React seja
mais fluido e expressivo;
• Para entendermos melhor todos estes conceitos
apresentados aqui, vamos criar um componente básico
que represente um Crachá de um Funcionário de uma
Empresa.
Programação para Dispositivos Móveis
Conceitos do React Native
Criando Componentes Funcionais
• Um dos principais pilares do React é a ideia de
componentização;
• Ao construir aplicações, você irá decompor a
interface do usuário em componentes
independentes, reutilizáveis e pensados em torno de
uma única responsabilidade;
• Cada componente é uma unidade de código que
retorna elementos JSX, representando uma parte da
interface do usuário.
• Vamos explorar como criar um componente funcional
e, em seguida, como importá-lo e usá-lo em seu
componente principal, App.
Programação para Dispositivos Móveis
Conceitos do React Native
Criando Componentes Funcionais
• Vamos criar um componente chamado “Cracha”, que
nada mais é que uma imagem e um texto abaixo da
imagem.
• Para criar este componente devemos seguir os
seguintes passos (Snack Expo):
– Ir até a pasta components e criar um arquivo com o nome do
componente (Cracha) com extensão “.js”;
– Criar uma função anônima para uma constante. A constante deve ter
o mesmo nome do Arquivo criado (Cracha);
– Inclua os componente que iremos usar: View, Text, Image e
StyleSheet. Estilize estes componentes. Não podemos esquecer de
incluir uma imagem na pasta assets, pois o componente irá usá-la;
– Após devemos exportar esta função de forma que ela possa ser
acessada (importada) a partir de outros componentes.
Programação para Dispositivos Móveis
Conceitos do React Native
Criando Componentes Funcionais
• Ir até a pasta components e criar um arquivo com o nome do
componente (Cracha) com extensão “.js”.
• Para criar um arquivo basta clicar
com o botão direito no local em que
você deseja criar o arquivo;
• Abrirá um menu suspenso com
opções de manipulações de
arquivos.
• Escolha a opção “New File”.
• Por padrão ele cria um arquivo com
a extensão “.js”.
Programação para Dispositivos Móveis
Conceitos do React Native
Criando Componentes Funcionais
• Criar uma função anônima para uma constante. A constante
deve ter o mesmo nome do Arquivo criado (Cracha).
• Criamos uma função anônima e
estamos atribuindo ela a uma
constante chamada Cracha;
• Todas as vezes que quisermos
chamar esta função, iremos chamar
“Cracha”. E o retorno desta função
será um conjunto de componentes
básicos do React Native (escritos em
JSX);
• Incluímos um componente Text para
que a aplicação não ficasse dando
warning. Pois no Snack Expo ele
reclama se o return estiver vazio.
Programação para Dispositivos Móveis
Conceitos do React Native
Criando Componentes Funcionais
• Inclua os componentes que iremos usar: View, Text, Image e
StyleSheet. Estilize estes componentes. Não podemos esquecer de
incluir uma imagem na pasta assets , pois o componente irá usá-la.
Programação para Dispositivos Móveis
Conceitos do React Native
Criando Componentes Funcionais
Programação para Dispositivos Móveis
Conceitos do React Native
Criando Componentes Funcionais
• Após devemos exportar esta função de forma que ela possa
ser acessada (importada) a partir de outros componentes.
Programação para Dispositivos Móveis
Conceitos do React Native
Usando o Componente criado
Programação para Dispositivos Móveis
Dúvidas
Programação para Dispositivos Móveis
Próxima Aula
• Props, Eventos e Hooks.
Programação para Dispositivos Móveis
Referências
• React Native:
[Link]
Programação para Dispositivos Móveis
