aula3 (1)

Prévia do material em texto

3ºAula
JSX
Objetivos de aprendizagem
Ao término desta aula, vocês serão capazes de:
• entender o que é o JSX;
• criar alguns códigos em JSX;
• entender a estrutura de pastas inicial de um projeto Expo;
• fazer algumas alterações no arquivo principal de um projeto Expo.
Olá, 
Seguiremos por mais uma aula da disciplina Programação 
para Dispositivos Móveis. Na aula anterior foi demonstrado o 
funcionamento do React Native, bem como a explicação de seu 
ciclo de vida de renderização. Veremos o que é o JSX, qual 
sua sintaxe básica, também detalharemos a estrutura de pastas 
e arquivos de um projeto React Native criado com Expo e o 
arquivo principal do projeto, o App.js..
Leia atentamente esta aula e se tiver alguma dúvida, use os 
recursos que estão na sua área do aluno.
Bons estudos!
16Programação para Dispositivos Móveis
Seções de estudo
1- O que é JSX?
2- Codifi cando JSX
3- Entendendo o arquivo App.js
1- O que é JSX?
Em React (2020) JSX é defi nido como uma extensão 
da sintaxe do JavaScript, que é utilizado para descrever a 
aparência da interface com o usuário. A primeira vista o JSX 
pode lembrar uma linguagem de marcação, porém com todo 
o poder do JavaScript.
Já em W3schools (2020) para explicar o que é o JSX três 
afi rmações são feitas:
● JSX signifi ca JavaScript XML;
● JSX permite escrever HTML no React;
● e JSX torna mais fácil escrever e adicionar HTML 
no React.
 
Um detalhe interessante e muito importante é que não é 
obrigatória a utilização do JSX, porém seu uso facilita e muito 
escrever aplicações React. Isso porque o JSX converte as tags 
HTML em elementos do React. Abaixo, é possível visualizar 
dois códigos extraídos de W3schools (2020). No primeiro é 
utilizado o JSX e no segundo não.
JSX:
const myelement = <h1>I Love JSX!</
h1>;
ReactDOM.render(myelement, document.
getElementById(‘root’));
Sem JSX: 
const myelement = React.
createElement(‘h1’, {}, ‘I do not use 
JSX!’);
ReactDOM.render(myelement, document.
getElementById(‘root’));
Nesses dois exemplos, o resultado é praticamente o 
mesmo, mudando somente o texto que será exibido dentro 
do h1. No primeiro exemplo, temos um trexo html sendo 
atribuído a uma constante myelement, o JS permite que 
HTML seja escrito diretamente no código JavaScript.
Para quem já está acostumado a trabalhar com 
desenvolvimento web sabe o que é importante a separação 
das tecnologias que serão utilizadas, por exemplo, em um site 
os arquivos HTML fi cam separados dos arquivos de estilo 
CSS que também fi cam separados da lógica do JavaScript. 
Já no React Native a separação não se dá pelas tecnologias 
utilizadas e sim pela funcionalidade (separação por interesses). 
(EISENMAN, 2015).
React (2020) vai além, explica que o React trabalha com 
componentes que colocam em um mesmo arquivo a marcação 
e a lógica. Dessa forma, um componente em JSX não fi ca 
somente com a função da lógica, mas também responsável 
por criar e manipular a interface com o usuário.
2- Codifi cando JSX
Agora que já foi apresentado o JSX, veremos algumas 
formas de utilizar todo o potencial dele. A primeira que 
veremos é como utilizar expressões dentro do JSX, isso é 
possível utilizando as chaves { }.
No exemplo do código abaixo, dentro das chaves é 
executada a expressão e o retorno é então incorporado no 
elemento JSX criado, como resultado a frase “React is 10 
times better with JSX”.
Dentro dessa expressão pode ser utilizado desde uma 
variável do React, propriedade ou qualquer outra expressão 
válida no JavaScript (W3SCHOOLS, 2020).
const myelement = <h1>React is {5 + 
5} times better with JSX</h1>;
No exemplo abaixo, uma variável nome é criada e 
utilizada também dentro das chaves.
const name = ‘Josh Perez’;
const element = <h1>Hello, {name}</
h1>;
Neste outro exemplo, um objeto é criado contendo 
o primeiro e último nome de uma pessoa e uma função é 
utilizada para retornar a concatenação dos dois, o resultado da 
função é chamado também dentro das chaves.
const user = {
 fi rstName: ‘Harper’,
 lastName: ‘Perez’
};
function formatName(user) {
 return user.fi rstName + ‘ ‘ + 
user.lastName;
}
 
const element = (
 <h1>
 Hello, {formatName(user)}!
 </h1>
);
Quando é necessário escrever mais que uma linha, o 
código deverá ser colocado dentro de parênteses para ser 
atribuído a uma variável.
const myelement = (
 <ul>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Cherries</li>
 </ul>
);
17
O exemplo acima demonstra outra característica do 
JSX, o código HTML a ser atribuído sempre deve estar em 
um nível de elemento, portanto se eu quiser colocar dois 
títulos dentro de uma constante eu preciso que ambos sejam 
colocados dentro de um elemento pai, tal como uma <div>.
const myelement = (
 <div>
 <h1>I am a Header.</h1>
 <h1>I am a Header too.</h1>
 </div>
);
Como o JSX segue as regras XML os elementos HTML 
precisam sempre estar devidamente fechados, com o uso da 
barra /.
const myelement = <input type=”text” 
/>;
O próprio JSX por si só também é uma expressão. 
Dessa forma, ela pode ser utilizada dentro de instruções do 
tipo if e else, loops for, atribuído a variáveis e também como 
argumentos e retorno de funções (REACT, 2020).
function getGreeting(user) {
 if (user) {
 return <h1>Hello, 
{formatName(user)}!</h1>;
 }
 return <h1>Hello, Stranger.</
h1>;
 }
Pode-se ainda incluir atributos no JSX, utilizando aspas 
para atribuir uma string como atributo ou chaves para embutir 
uma expressão JavaScript como atributo. 
const element = <div tabIndex=”0”></
div>;
const element = <img src={user.
avatarUrl}></img>;
3- Entendendo o arquivo App.js
Já em mente a fundamentação do React Native e de 
onde ele surgiu, além do que é JSX e como ele se comporta, 
agora podemos voltar ao projeto criado na primeira aula 
desta disciplina e entender o que foi gerado pelo Expo e 
como podemos desenvolver em cima do template instalado 
(PINHO e ESCUDELARIO, 2020).
A estrutura de arquivos pode ser observada na Figura 1, a 
primeira pasta .expo-shared contém arquivos de informação 
e confi guração do Expo, a segunda assets onde serão 
colocados os recursos que serão utilizados no projeto, nesse 
momento contém alguma imagens, a terceira node_modules 
estão dispostas as dependências do projeto.
Figura 1 – Estrutura de arquivos - Blank template Expo. Fonte: Acervo pessoal.
Quanto os arquivos, no primeiro .gitignore são incluídos 
os arquivos e pastas que são ignorados ao subir o projeto 
através do git. Na sequência temos o App.js que é o arquivo 
principal das interfaces do projeto, focaremos nele. Depois 
tem o app.json que possuí os metadados do aplicativo, que 
são as informações de nome, versão, dependências, específi co 
do projeto.
O arquivo babel.confi g.js é o arquivo de confi guração 
do transpilador Babel, ele quem converte o JSX para sintaxe 
web (HTML, CSS e JS). E fi nalizando tem-se o package.
json e package-lock.json que contém os scripts de build para 
Android e iOS, além de outros recursos mais.
Explicada a estrutura, vamos focar no arquivo principal, 
o App.js, ele que contém as instruções para criação da interface 
inicial com o usuário.
No topo do arquivo são realizadas as importações, o 
React é importado para que todas as ferramentas construídas 
nele possam ser utilizadas, e também são importados os 
componentes StyleSheet, Text e View da biblioteca React-
Native e o StatusBar da bliblioteca expo-status-bar.
import { StatusBar } from ‘expo-
status-bar’;
import React from ‘react’;
import { StyleSheet, Text, View } 
from ‘react-native’;
Em seguida, é realizada a exportação da classe principal 
App, que retorna os componentes HTML que serão 
renderizados, nesse caso temos uma <View>, que se equipara 
a uma <div> do desenvolvimento web, um <Text> e um 
<StatusBar>
export default function App() {
 return (
 <View style={styles.container}>
 <Text>Open up App.js to start 
working on your app!</Text>
 <StatusBar style=”auto”/>
 </View>
 );
}
18Programação para Dispositivos Móveis
No fi m do arquivo é possível encontrar um objeto 
chamado styles que foi instanciado através do método create 
do objeto StyleSheet (que foi importado no começo do 
arquivo da biblioteca react-native). As regras defi nidas para a 
chave container nesse objeto serão atribuídas ao componente 
<View> através do atributo style.
const styles = StyleSheet.create({
 container: {
 fl ex: 1,
 backgroundColor: ‘#fff’,
 alignItems: ‘center’,
 justifyContent: ‘center’,
 },
});
Com o arquivo dessa forma, já é possível fazer alguns 
testes, realize algumas alterações no texto e no estilo e 
veja o comportamento da sua aplicação já sendo alterada 
automaticamente quando você salva o arquivo. Para isso, você 
precisa ter executado o comando npm start e vinculado o 
dispositivo que você irá testar com o Expo DevTools. Abaixo 
vejamos alguns exemplos de alterações que podem ser feitas.
export default function App() {
 return (
 <View style={styles.container}>
 <Text>Hello World!</Text>
 <StatusBar style=”auto” />
 </View>
 );
}
Figura 2 – Hello World. Fonte: Acervo pessoal.
export default function App() {
 return (
 <View style={styles.container}>
 <Text style={styles.text}>Hello 
World!</Text>
 <StatusBar style=”auto” />
 </View>
 );
}
const styles = StyleSheet.create({
 container: {
 fl ex: 1,
 backgroundColor: ‘#6ED4C8’,
 alignItems: ‘fl ex-end’,
 justifyContent: ‘center’,
 },
 text:{
 color: ‘#fff’,
 fontSize: 50
 }
});
Figura 3 – Hello World com estilos diferentes. Fonte: Acervo pessoal.
Chegamos ao fi nal da terceira aula. Vamos recordar?
Retomando a aula
1– O que é JSX?
Na seção 1 foi exposta a defi nição e o porquê de se 
utilizar o JSX em desenvolvimento de projetos com o React 
Native.
19
2– Codifi cando JSX
Em seguida, parte da sintaxe do JSX foi exemplifi cada.
3– Entendendo o arquivo App.js
Por fi m, foi descrita a estrutura de arquivos criada através 
do comando expo init, bem como detalhado o arquivo 
principal App.js que contém a interface inicial com o usuário.
REACT. In: Intoducing JSX, 2020. Disponível em: 
https://reactjs.org/docs/introducing-jsx.html. Acesso em: 
22 jun. 2020.
W3schools. In: React JSX, 2020. Disponível em: 
https://www.w3schools.com/react/react_jsx.asp. Acesso 
em: 22 jun. 2020.
Vale a pena acessar
PINHO, D. M.; ESCUDELARIO, B. React Native 
Desenvolvimento de aplicativos mobile com React. Editora Casa do 
Código, São Paulo, 2020.
EISENMAN, B. Learning React Native: Building Native 
Mobile Apps with JavaScript. O’Reilly Media, 2015.
BODUCH, A. React and React Native. Packt Publishing, 
2017.
LEBENSOLD, J. React Native Cookbook: Bringing the 
Web to Native Platforms. O’Reilly Media, 2018.
Vale a pena ler
Vale a pena
Minhas anotações