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
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
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.
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.
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.
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 .
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.
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
E S T A D O E L I F E C Y C L E ?
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.
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
},
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
O Q U E O S L I F E C Y C L E F A Z E M ?
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.
E N T E N D E N D O O R E D U X
M E E N C O N T R E !
DIEGO
TELLES@telles.io
@_DiegoTeles
DiegoTelles
@DiegoTelles
O B R I G A D O !  O /
IG: @Telles.io

React Starter Pack - Nerdzão Day

  • 1.
    R E AC 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 EM 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 UE É 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 UE 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 SE 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 CR 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 OW 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 TE 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 TA D O E L I F E C Y C L E ?
  • 12.
    E S TA 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 UE É 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 UE É 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 UE O S L I F E C Y C L E F A Z E M ?
  • 16.
    O R ED 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 TE N D E N D O O R E D U X
  • 18.
    M E EN C O N T R E ! DIEGO TELLES@telles.io @_DiegoTeles DiegoTelles @DiegoTelles
  • 19.
    O B RI G A D O ! O / IG: @Telles.io