Como ele funciona?

Virtual DOM

O que é DOM?

Virtual DOM

JQuery

A manipulação do DOM (operação custosa) fica nas mãos do desenvolvedor

Toda modificação dispara uma alteração no DOM

React

Otimiza a manipulação do DOM, alterando somente o necessário

Alterações são enviadas em lote, minimizando impacto no DOM

Sintaxe

A sintaxe mais utilizada para a criação de componentes em React é JSX

JSX é uma extensão da sintaxe do JavaScript que lembra XML

React é baseado em componentes

Existem 2 tipos de componentes

• Functional
• Class

Propriedades

• Dados recebidos pelo componente
• Imutáveis
• Podem ser passadas de um componente para outro
• Acessível através do atributo props (this.props)

Propriedades

Estado

Dados gerenciados pelo componente

• Mutável
• Acessível através do atributo state (this.state)
• Alterável através da função this.setState()
• Específico de cada componente (cada um tem o seu)

Estado

React way

1. Criar um componente React que exiba uma mensagem de bem vindo + o seu nome.

Ex: "Bem vindo Jefferson"

2. Criar um componente React que exiba uma mensagem de bem vindo para o nome que for digitado em um input.

Espresso (Saturn V)

3. To-do list

História

• Em 2014, problema com contagem de mensagens no facebook

MVC

Flux

Arquitetura

Para que serve?

Gerenciar os dados da aplicação

• entrada de dados do usuario
• dados de uma api
• ações do usuário

Controlar como a aplicação deve se comportar com base na mudança destes dados

Quando devo usar?

• Compartilhar estado entre componentes
• Centralizar as regras de negócio da aplicação
• Agir com efeitos colaterais

Implementações de Flux

Mobx

Facilita a implementação de flux

Mobx

Mobx

Configuração

Usando create-react-app, usar: https://tombuyse.be/blog/using-mobx-decorators-in-create-react-app-v3