Este documento apresenta um guia introdutório sobre React.js. Explica o que é React, como funcionam seus componentes, a diferença entre React e Angular, como escrever código em JSX e como funcionam o Virtual DOM e os ciclos de vida dos componentes. Também aborda conceitos como estado, propriedades, Redux e mais.

1. R E A C T . J S S T A R T E R
P A C K
W E L C O M E T O :
by: Diego Telles

2. Q U E M S O U ? O /
DIEGO
TELLES
• Developer
• Maker
• Community Manager
(THT, AngularSP, NodeRED BR, JSWorld)
• Creator
(Medium, Youtube, Palestras)
• Unicornio (Horas vagas)
@telles.io @_DiegoTelesDiegoTelles@DiegoTelles

3. O Q U E É R E A C T J S ?
"O React é uma biblioteca para criar interfaces
(SPA), que foi idealizada pela galera do Facebook
e Instagram.

4. O Q U E S Ã O C O M P O N E N T E S R E A C T ?
Conceito de dividir o código em pequenos
pedaços, onde assim podemos mover esse
“componente" para qualquer parte do projeto
sem perder suas funcionalidades.
Incluindo assim pequenos pacotes com CSS, JS
e HTML.

5. M A S E L E É I G U A L A O A N G U L A R ?
“Angular é um Framework e o React é um biblioteca.
Ou seja, um framework é um conjunto de ferramentas
para resolver vários tipos de coisas, uma biblioteca
serve para resolver problemas específicos, que no
caso do React é o de criar componentes.

7. E S C R E V A E M . J S X
J S X é u m a e x t e n s ã o d e s i n t a x e s i m i l a r a o X M L
p a r a o E C M A S c r i p t s e m s e m â n t i c a d e f i n i d a . N ã o é
p a r a s e r i m p l e m e n t a d a p o r m o t o r e s o u
n a v e g a d o r e s . N ã o é u m a p r o p o s t a i n c o r p o r a r J S X
n a e s p e c i f i c a ç ã o E C M A S c r i p t e m s i . I n t e n c i o n a - s e
u s á - l o c o m v á r i o s p r é - p r o c e s s a d o r e s
( t r a n s p i l a d o r e s ) p a r a t r a n s f o r m a r e s s e s t o k e n s e m
E C M A S c r i p t p a d r ã o .

9. B R O W S E R D O M V S V I R T U A L D O M ?
“Virtual Dom tem como objetivo salvar ao estado anterior e
fazer um diff quando seu código é alterado, assim
alterando somente o que realmente foi editado ao contrário
do Browser DOM que busca pelo arquivo todo tornando
mais lento esse processo.

10. E N T E N D E N D O O V I R T U A L D O M
diff
Set <h1> para o after

11. E S T A D O E L I F E C Y C L E ?

12. E S T A D O E L I F E C Y C L E ?
“O React trabalha com estados, before e after.
"Os lifecycles trabalham em paralelo a isso, pois com os eles
podemos criar novos estados e utiliza-los em nossos
componentes.

13. O Q U E É S T A T E / P R O P S ?
this.state = {
casa: "",
ativo: false,
soma: 0
},
STATEPROPS
this.props = {
casa: "",
ativo: false,
soma: 0
},

14. O Q U E É S T A T E / P R O P S ?
this.state = {
animal: "",
ativo: false,
soma: 0
},
STATEPROPS
this.props = {
animal: “Unicornio",
ativo: false,
value: 23990
},
MUTÁVELIMUTÁVEL

15. O Q U E O S L I F E C Y C L E F A Z E M ?

16. O R E D U X
"Redux é uma biblioteca JavaScript de código aberto
para gerenciar o estado do aplicativo. É mais
comumente usado com bibliotecas como React ou
Angular para construir interfaces de usuário.
Semelhante à arquitetura Flux do Facebook, foi criado
por Dan Abramov e Andrew Clark.

17. E N T E N D E N D O O R E D U X

18. M E E N C O N T R E !
DIEGO
TELLES@telles.io
@_DiegoTeles
DiegoTelles
@DiegoTelles

19. O B R I G A D O ! O /
IG: @Telles.io