O documento fornece uma introdução ao framework React, discutindo seus principais conceitos e vantagens, como: (1) facilitar a criação de componentes reutilizáveis; (2) uso do Virtual DOM para renderização eficiente; (3) suporte a testes automatizados. O documento também explica conceitos-chave como JSX, props e CSS in JS.

2. Front-End & UX/UI Designer na FCamara
25 anos, São Paulo
Nathália Lourenção

3. “Uma biblioteca JavaScript declarativa,
eficiente e flexível para criar interfaces visuais”

4. 2012 2018

5. 5 Motivos para
aprender RectJS!
• Mercado de trabalho;
• React nos torna desenvolvedores melhores;
• Mobile e outras plataformas – React Native;
• Feito pelo Facebook;
• Você vai gostar de usar React.

6. O que é React?
React funciona como o V do MVC, permitindo criar seus próprios componentes.
Numa aplicação em React, você deve quebrar os diferentes elementos dela em
pequenos componentes reutilizáveis. Cada vez que algo for complexo, quebre em
pequenas partes e desenvolva esses componentes, essa técnica é chamada
de component driven development.

7. O React não é um framework, mas sim uma biblioteca.
O React serve para criar interfaces visuais.
Com isso, temos que:

8. Mas e esse React?
É tipo Angular né?!
O Angular é um framework, ou seja, um conjunto de
ferramentas para resolver vários tipos de coisas. Já uma
biblioteca serve para resolver uma coisa em específico,
no caso do React é renderizar componentes.

9. https://reactjs.org/blog/2013/06/05/why-react.html
O pessoal que criou o React fez um artigo bem bacana falando o porquê deles
terem criado e algumas de suas vantagens.
Características
• Facilidade de se criar componentes pequenos e reutilizáveis;
• Trabalhar com a abordagem do Virtual DOM, que é bem mais rápido que o DOM nativo;
• O React permite um melhor SEO;
• Testes automatizados.
Resumindo...

10. E como funciona?
A principal mágica do React é de fato o uso do Virtual DOM, mas como ele funciona?
Como todos sabemos o DOM é super lento e devemos evitar ao máximo manipulá-lo
em excesso, visto que precisaríamos fazer muitos repaints e reflows, que iriam custar
muito para o nosso browser.

11. É ai que o React Brilha!
Quando um componente é inicializado, o método render é chamado, gerando uma
representação da view. Dessa representação, um HMTL é produzido e injetado no documento.
Quando algum dado muda, o método render é chamado novamente e para que tenhamos
uma atualização mais eficiente possível, o React faz um diferenciação (diff) do valor novo com
o valor velho e aplica no DOM somente a nova mudança.

12. Ele inicialmente tem a cópia “original” do componente e o
estado que ele deve ter depois, para isso ele faz uma
diferenciação entre os 2 modelos no Virtual DOM, vê o que
precisa mudar e mandar aplicar, somente após isso que as
operações são feitas no DOM real.

13. React e o seu ecossistema
• React
• JSX
• ES2015
• Webpack
• Redux
...

14. JSX
O JSX é uma extensão de sintaxe do JavaScript (daí o nome) que nos permite escrever
HTML dentro do JavaScript.
Nos primórdios, o JSX era um dos grandes motivos das críticas e piadas em relação ao
React. Em teoria estávamos voltamos no tempo ao misturar HTML com JavaScript.
JavaScript Syntax eXtension

15. O React serve para criar componentes, portanto é
importante entender o conceito de componentização
e saber como aplicá-lo para os seus sistemas.
Pensando em
componentes...

16. <Slide>

17. <SlideItem>

18. <SlideTitle>
<SlideSubtitle>

19. Slide = SlideItem + SlideTitle + SlideSubtitle
A partir disso, já conseguimos montar uma hierarquia desses componentes e subcomponentes, que seria:
Tendo a estrutura de componentes e seus subcomponentes, fica mais fácil de
trabalhar com a abordagem do React e criar suas interfaces.
Com eles temos um reaproveitamento de código maior e uma menor
probabilidade de novos bugs serem introduzidos na aplicação.

20. Props
Em todos os tipos de paradigmas no desenvolvimento de software, passar parâmetros é
extremamente comum. Com os componentes do React isso não poderia ser diferente.
Abreviação para properties
A diferença é que no React, usamos os props.

21. O componente abaixo, mostra para o usuário um Hello World:
Imaginando que precisamos mudar a mensagem ‘World’ para alguma outra que for enviada dinamicamente, podemos
reescrever esse componente usando as props dessa forma:

22. E com isso feito, podemos chamar esse componente dentro de outros assim:

23. CSS in JS
Todas as boas práticas ao se escrever CSS apontavam para um mesmo caminho por anos:
escrever CSS o mais desacoplado possível do JavaScript e do HTML, usando nomes bem
descritivos para as classes.
Com o sucesso da componentização no React,
a forma de se escrever CSS vem mudando.

24. A revolução veio com o CSS Modules
Component: styles.css

25. Colocando a mão na massa!

26. O que vamos precisar?
• REACT E O REACT-DOM
• ES6
• TRANSPILER - BABEL
• BUNDLER - WEBPACK

28. npx create-react-app my-app
cd my-app-react
npm start
Módulo CLI

30. https://github.com/nahlourencao/todo-app

31. React Native
O React Native é bem parecido com o React, porém ao invés de utilizar componentes web ele
utiliza componentes nativos para a criação dos blocos de construção dos aplicativos.
React-Native é um framework, onde o ReactJS é uma biblioteca de Javascript.

32. OBRIGADA!
nahlourencao@gmail.com