Talk introdutória sobre a biblioteca React.js, explicando conceitos básicos e como começar.

1. Começando com React.js
João Pedro Benedetti Misturini

2. Antes de iniciarmos
● Resultado de estudos e projetos
próprios feitos nos últimos meses.
● Objetivo de demonstrar o básico da
biblioteca para outros
desenvolvedores.

3. Porque isso existe?
● Criado por Jordan Walke, para resolver problemas na criação de interfaces
do Facebook/Instagram.
● Manter o DOM atualizado de acordo com o estado dos dados gerava
muito esforço.

4. O que é React.js
● É uma biblioteca para a construção de interfaces.
● Diferente de frameworks como o Angular, não determina uma arquitetura
para a aplicação.
● Apresenta vantagens de desempenho, devido ao Virtual DOM.

5. Antes do React.js...

6. Evoluções no Javascript
● Atualizações ao Javascript (ES2015, ES2016, ES2017…) trouxeram novas
funções importantes.
● “Orientação” a “objetos”, arrow functions, entre outros.

7. Entendendo componentes
● Um componente básico é uma classe que
extende a classe Component, da biblioteca.
● Sempre deve implementar o método render(),
onde é definida a exibição do componente.
● Todo componente recebe props - dados de
entrada - na sua construção.

8. Entendendo componentes

9. JSX
● “Açúcar sintático para React.createElement()”.
● É XML compilado, não HTML.
● Integra HTML com os próprios componentes.

10. Estado e métodos
● Cada componente pode ter seu
próprio estado e métodos.
● A renderização do componente
é atualizada na alteração do
estado.

11. Fluxo de propriedades para filhos
● Componente pode passar seu estado
e métodos para outros componentes
internos.
● Os componentes internos recebem os
dados através de “props”.

12. Fluxo de propriedades para filhos
● Componente pode passar seu estado
e métodos para outros componentes
internos.
● Os componentes internos recebem os
dados através de “props”.

13. Resumindo...

14. Resumindo...
● Componentes são classes Javascript que herdam Component.
● Devem implementar o render(), onde o JSX deve pode ser usado.
● Todo componente recebe props, que podem ser usados para
renderização.
● Todo componente pode ter estado e métodos próprios, que influenciam na
renderização.

15. Mas como eu começo?

16. Criando um projeto
● Create React App: https://github.com/facebook/create-react-app
○ Requisito: Node.js, NPM
○ Recomendável: Yarn
● Cria um projeto com React.js do zero, com servidor de desenvolvimento e
geração de builds.
● Não exige mais nenhuma configuração.

17. Muito obrigado!
● Link do repositório: https://github.com/joaomisturini/meetup-gdi
● E-mail: joao.benedetti.misturini@gmail.com
● Telegram: @joaomisturini
● Ou no grupo do Whatsapp