Fundamentos-do-React

Prévia do material em texto

ReactReact
TUDO QUE VOCÊ PREC I S ATUDO QUE VOCÊ PREC I S A
PARA CR I A R PROJETOSPARA CR I A R PROJETOS
P O R MA T H E U S B A T T I S T IP O R MA T H E U S B A T T I S T I 
HO R A D E C O D A RH O R A D E C O D A R
Matheus Batt is t i é desenvolvedor há mais de 7
anos e ama a tecnologia da in formação como
um todo.
Está sempre em busca de um aprendizado
constante e evolut ivo .
Atua como desenvolvedor Ful l Stack,
desenvolvendo e -commerces e apl icações com
arqui tetura de microsserv iços .
É cr iador do Hora de Codar , que hoje passa de
30 mil alunos .
Python é uma de suas l inguagens prefer idas ,
já ut i l i zou para Data Science como também
desenvolv imento web.
Seu objet ivo é sempre
passar o máximo de
conhecimento poss ível ,
unindo toda a exper iência
de seus estudos e também
de sua carre i ra como
desenvolvedor .
S O B R E O A U T O R
Este eBook é dest inado a quem deseja
conhecer os fundamentos do React .
Vamos de forma teór ica e prát ica , conhecer os
pr incipais elementos , que vão determinar o
sucesso de suas SPA 's .
A ide ia é apresentar também um contexto de
como você pode ut i l i zar cada recurso a seu
favor e também quais as melhores prát icas .
Após a le i tura , você estará preparado para
entender e também cr iar suas apl icações em
React , de forma conciente .
Está pronto? Vamos começar !
I N T R O D U Ç Ã O
A insta lação do React pode ser fe i ta de
diversas maneiras , mas a atual melhor escolha
é o c r e a t e - r e a c t - a p p
Um scr ipt que podemos executar através do
npm, que cr ia a estrutura base para um projeto
em React
Você pode ut i l i zar os comandos
Com estes comandos você tem uma apl icação
funcional de React rodando na sua máquina.
E com toda certeza este é seu o pr imeiro passo
dado na direção certa !
I N S T A L A Ç Ã O D O R E A C T
O J S X é a forma que escrevemos HTML no
React .
Podemos rea l izar diversas outras ações , como:
impr imir dados de var iáveis em nossos
templates .
Como também executar códigos de JavaScr ipt ,
como um i f .
Você pode escrever JSX no arquivo App. js do
React , ou em qualquer componente , veja na
próxima página um exemplo de JSX
J S X
Exemplo de JSX:
Note que é muito semelhante ao HTML, mas
precisamos evi tar algumas palavras como class ,
que pertende ao JavaScr ipt , então colocamos
c l a s s N a m e
E outro detalhe: para in terportar valores
dinâmicos ut i l i zamos { v a r i á v e l }
J S X
Componentes fazem parte da arqui tetura do
React .
Em uma apl icação podem exis t i r diversos
componentes , que são partes do s i te em
proporções menores .
Por exemplo: barra de navegação, card de
produto, t í tu lo da página.
Todos estes casos podem ser div id idos em
componentes .
Melhorando nosso código, pois acabamos
reaprovei tando os componentes em diversos
locais .
Na próxima página você encontra um exemplo
de componente .
C O M P O N E N T E S
Veja o código a seguir :
Normalmente os componentes f icam na pasta
c o m p o n e n t s
Precisamos c r i a r u m a f u n ç ã o e e x p o r t á - l a .
Note que aqui também ut i l i zamos o JSX, que é
retornado entre parenteses , pois possui mais de
uma l inha de código.
Para ut i l i zar este componente precisamos
importá - lo em um arquivo, veja :
C O M P O N E N T E S
Exemplo de importação:
Ut i l i zamos o componente como uma tag, com a
sintaxe <Frase / >
Note que há o fechamento da tag também
O nome do componente é re f let ido pelo qual fo i
importado, como podemos ver na pr imeira l inha
do código
C O M P O N E N T E S
Props são os dados que passamos do
componente pai para o componente f i lho .
Na maior ia das vezes nós não modif icamos estes
dados, ou seja , só os ut i l i zamos.
É um recurso extremamente ut i l i zado em React .
Veja :
Aqui o componente SayMyName acei ta a props.
E nele ut i l i zamos a props chamada name
Perceba que precisamos declarar na cr iação da
função
P R O P S
Agora veja como passar as props para o
componente que as acei ta :
Aqui reut i l i zamos o componente SayMyName
três vezes
E em cada um passamos um nome di ferente .
Vemos dois recurso sendo ut i l i zados :
- Passagem de props ;
- Reut i l i zação de componentes ;
P R O P S
Para adic ionar CSS a nossa apl icação temos
acesso a um recurso chamado C S S M o d u l e s
Basta cr iar um arquivo com o mesmo nome do
componente que queremos colocar est i los
Final izando com m o d u l e . c s s
Então se temos um componente chamado
Frase. js
Vamos cr iar o arquivo Frase.module .css
Veja :
A D I C I O N A N D O C S S
No componente vamos importar o nosso arquivo
de CSS
E acessar as classes que foram def in idas nele
Inser indo estas nos elementos do nosso
componente , e esta é a implementação f ina l :
Importamos o CSS com o nome de sty les , o que
é um padrão bem ut i l i zado
Acessamos as classes def in idas no CSS como
propr iedades de um objeto
Agora nosso componente tem CSS!
A D I C I O N A N D O C S S
Sempre que definimos um componente precisamos retornar
apenas um elemento
Os fragments resolvem este problema, simplificando o nosso
HTML
Podemos então retornar uma espécie de tag especial, que
permite um componente retornar dois ou mais elementos
Veja a implementação:
Aqui retornamos um li apenas, com o fragment
Que possui a seguinte sintaxe: <> ... </>
Ou seja, abrimos uma tag de fragment e depois precisamos
fechá-la
F R A G M E N T S
Podemos definir o tipo de uma props e também valores
default para ela
Isso deixa muito mais sólido nosso programa, limitando o que
ele aceita para um melhor funcionamento
Veja o exemplo:
Para definir o tipo precisamos importar prop-types
E depois aplicar as propriedades os tipos que queremos
definir
T I P O S D E P R O P S
Para definir um valor default não é necessário importar nada
Porém precisamos criar a propriedade defaultProps e inserir o
valor padrão para as que precisamos
Isso faz com que se não passarmos valor nenhum, aqueles
valores sejam exibidos no lugar de um valor vazio, o que pode
ser interessante em diversos casos
T I P O S D E P R O P S
Os eventos do React são recursos fundamentais para tratar
os envios de dados dos usuários
Como por exemplo o envio de um formulário
Então para cada ação teremos um evento (clique, teclas,
formulários e etc.)
Veja um exemplo:
E V E N T O S
O evento de submit dispara um método, ou seja, uma função
E nela podemos executar um código baseado na lógica da
nossa aplicação
Lidando também com os dados que estamos manipulando no
momento
E V E N T O S
Este curso completo de fundamentos do React está
disponível em vídeo também, e ao final criamos um projeto
Tudo de forma gratuita, no meu canal de YouTube
O link para a playlist é: https://youtu.be/FXqX7oof0I4
C U R S O C O M P L E T O
Não esqueça de deixar seu like e se inscrever no canal, me
ajuda bastante = )
https://youtu.be/FXqX7oof0I4
Obrigado
Enquanto houver pessoas dispostas
a aprender, eu estarei criando
conteúdo para enriquecer ainda
mais os seus conhecimentos
Matheus Battisti
 
Hora de Codar