Resumidamente o React é:
“Uma biblioteca para criar interfaces
de usuário”.
O que significa?
Que alguém criou um código que
pode ser reaproveitado por outros
desenvolvedores e em outros projetos.
Quem criou?
Conforme o Facebook foi crescendo,
os seus desenvolvedores criaram uma
biblioteca que ajudava no
desenvolvimento de aplicações front-end,
a primeira vez que o React foi
implementado foi em 2011.
Depois de um tempo decidiram
tornar essa biblioteca pública, ou seja, o
React tornou-se uma biblioteca
open-source (código aberto) em 2013.
Quais problemas
resolve?
O React resolve alguns problemas,
dentre eles:
● Facilitar a interação com a DOM
● Ajuda na reutilização de código
● Facilitar a escrita de códigos reativos
Reatividade
É para isso que o ReactJS existe.
Imagine você um site, que quando o
usuário interage com um produto no
carrinho…
Quando você clica em aumentar a
Cenário: Você
adiciona
um produto
no
quantidade
o site
recarrega
inteiro para
carrinho
de valor
compras,
mas antes de
calcular
o novo
da compra.
finalizar a compra, você decide comprar
mais um, então o site se comporta:
1.
2.
Quando você clica em aumentar a
quantidade o valor é calculado sem precisar
recarregar o site todo.
ReactJS x React-Native
ReactJS:
Se você já estudou pelo menos um
pouco
-Usado
de programação
em projetos front-end
web, você
Web
já deve
ter ouvido
-Utilizafalar
o JSX
sobre
que ReactJS
tem umaesintaxe
React
Native.
parecida com HTML
React
MasNative:
você sabia que eles não são a
mesma
-Baseado
coisa?
em ReactJS, mas o seu foco é
em desenvolvimento Mobile
-Assim como ReactJS o React Native
usaMas
Javascript,
quais as mas
principais
na hora
diferenças?
de buildar o
código é convertido em código nativo
para Android e iOS
CRA
CRA ou create-react-app, é um
facilitador na criação de novos projetos
ReactJS.
Antes do CRA nós tínhamos que
configurar o projeto do total zero, usar
diversas bibliotecas, tais como: Webpack,
Babel, Eslint e outros.
JSX
Sem complicar muito, o JSX é um
código Javascript que tem a “aparência”
de HTML.
Isso mesmo, você vai escrever as suas
páginas com Javascript mas usando a
sintaxe do HTML.
O JSX facilita, pois o “html” fica junto
do Javascript.
HTML vs JSX
Apesar do JSX ser muito parecido com
html, algumas coisas mudam:
1.Todos os elementos em JSX devem ser
fechados:
html => <img src=””>
JSX => <img src=””/>
2.class => className
3.for => htmlFor (Labels)
4.Para aplicar estilos precisamos usar:
<div style={{backgroundColor: ‘red’}}></div>
Components
Components é uma das coisas mais
importantes no React, entender esse
conceito será um divisor de águas.
Mas, resumidamente, um component
é uma maneira de isolarmos
responsabilidades, bem como fazer
reaproveitamento de código e estilos.
Components
Props
Ahhhhhh as props, elas vieram nos
ajudar a transitar informações entre
components pais e filhos.
Da mesma maneira que as tags html
tem suas propriedades:
Ex.: <img src=””/>
src é uma propriedade da tag img.
A sintaxe para as props é a mesma:
<Component nome_prop={valor}/>
Statements x
Expressions
De forma bem simples:
-Expressions: Produzem/retornam
valores.
Ex.: a === b // retornará um booleano
-Statements: Instrução para executar
uma ação específica.
Prop Key
Quando renderizamos uma lista no
React, vários elementos são inseridos na
tela.
Se houver alteração da posição dos
elementos, o React pode se perder e
confundir um elemento com o outro,
visto que ele se baseia nas posições de
cada elemento em tela.
Para resolver esse problema, foi
criada a prop key, que faz com que cada
elemento renderizado seja único.
Renderização
Condicional
O termo mesmo já diz, só vamos
renderizar algo baseado na condição.
Por exemplo:
Se uma condição for verdadeira,
vamos renderizar um botão com a cor
verde, caso seja falsa exibimos o botão
com a cor azul.
Daniel Lopes
Professor Cubos Academy
www.cubos.academy