INFOESTE 2016

Aplicações JavaScript de alta performance com React.js

Instrutor:
Victor Hugo de Paiva Gonçales

Conteúdo

• Aprender JavaScript
• Conhecendo React.js
• Ferramentas para desenvolver com React.js
• Estrututa básica de um componente
• JSX
• Conceitos do React.js
• Entendendo o Virtual DOM
• State e Props
• Composição
• Fazendo Build do React.js
• Criando Componentes
• Ciclo de vida de um Componente
• Eventos
• Refs
• Comunicação entre componentes pai/filho
• Usando React junto com outras libs
• Exemplo de Form - componentes controlavéis
• SPA - Single Page Application
• Rotas no React.js
• Renderização de componentes no servidor
• Arquitetura de desenvolvimento Flux
• Desenvolvimento de uma aplicação de exemplo utilizando React.js
• Quem utiliza React?

Aprender JavaScript

Bibliotecas/Frameworks JavaScript estão sempre surgindo, então antes de tudo você deve aprender JavaScript de verdade!!!

• Não se limitar ao que aprendeu na faculdade ou no trabalho
• Ler Livros/artigos/blogs especializados
• Seguir/aprender padrões desenvolvimento
• Acompanhar a comunidade JavaScript
• Estudar/Ler os repositórios no GitHub de projetos JavaScript
• Participe de grupos JavaScript
• Pratique - Escreva Código

Conhecendo React.js

React é uma biblioteca open-source desenvolvida pelo Facebook, para construção de interfaces(Componentes) em JavaScript com alta performance que permite composição e modularização de uma maneira muito simples.

Conhecendo React.js

• Criação de interfaces com JavaScript
• Interface reflete o estado da aplicação
• Criação de componentes reutilizáveis de forma declarativa, modular e de fácil composição
• Alta performance
• Padronização de desenvolvimento
• Fácil manutenção
• Permite renderização no servidor - bom para SEO
• Ecossistema moderno de desenvolvimento (Node, npm, babel, webpack, gulp etc... )
• Taxa de adoção crescendo muito rápida pela comunidade JavaScript
• Tudo é JavaScript

Conhecendo React.js

Video da React.js Conf 2015 - mostrando que React possui uma performance superior ao Angular e ao Ember.

Conhecendo React.js

Ferramentas para desenvolver com React.js

• Node.js
• Gulp
• Webpack
• React Developer Tools
• ...

Estrututa básica de um componente

Antes de começar abra sua mente para alguns conceitos um pouco difícies de aceitar no começo ...

Empty your mind...

Estrututa básica de um componente

JSX

HTML dentro do JavaScript, como assim?

JSX

JSX

JSX

• Opcional
• É um XML para facilitar a criação dos componentes
• É convertido para JavaScript
• Parece HTML, mas possui algumas regras diferentes
  • todas tags devem ser fechadas
  • atributos são case-sensitive: maxLength
  • class fica: className
  • for fica: htmlFor
  • style recebe um objeto literal:
    <h1 style={{color: "red"}}>

JSX

As expressões javascript são avaliadas entre { }

JSX

Exemplo de iteração

Conceitos do React.js

• Virtual DOM
• Props - this.props
• State - this.state
• Context - this.context

Entendendo o Virtual DOM

O Virtual DOM é uma representação leve em memória do DOM.
A cada mudança de estado o React renderiza o componente novamente, mas para uma melhor performance ele utiliza o virtual DOM.

A cada mudança de estado:

• Cria uma nova árvore virtual DOM
• Faz um diff com a virtual DOM antiga
• Atualiza a árvore DOM nativa somente onde ocorreu alguma mudança

State e Props

Através das propriedades que componentes passam dados para seus filhos. (this.props).
Props devem ser read-only.
Componentes podem ter estados para gerenciar alguma lógica interna (this.state). Somente use this.setState para atualizar um estado. Toda vez* que atualiza o estado o render é chamado.

Context

Através do context podemos acessar recursos em qualquer nivel da árvore de componentes

Composição

Através da composição podemos montar componentes complexos que são divididos em componentes menores e mais simples.
this.props.children

Fazendo Build do React.js

• gulp
• webpack

Criando Componentes

exemplo prático ...

Ciclo de vida de um Componente

• componentWillMount():
  é chamado antes de ser inserido no DOM
  
• componentDidMount():
  é chamado depois de ser inserido no DOM
  
• componentWillUnmount():
  é chamado antes de ser removido do DOM
  
• componentWillReceiveProps():
  é chamado quando recebe uma propriedade
  
• shouldComponentUpdate():
  podemos impedir o render() caso retorne false no shouldComponentUpdate()
  
• componentWillUpdate():
  é chamado antes do render() (mudança de state/props)
  
• componentDidUpdate():
  é chamado depois do render()
  

Eventos

React tem um controle interno de eventos e só delega evento DOM na raiz da árvore de componentes, depois os eventos são gerenciados pelo próprio React.
Os nomes dos eventos são lowerCamelCase:
onClick, onChange, onTouchStart

Refs

Utilizado para acessar diretamente o elemento, por exemplo um elemento DOM ou instância de um componente.

Comunicação entre componentes pai/filho

Podemos passar aos descendentes funções callback para passar dados ao pai quando forem axecutadas pelo filho.

Usando React junto com outras libs

Para ter certeza que o componente estará no DOM quando for utilizar alguma outra lib, devemos usar o evento componentDidMount()

Exemplo de Form - componentes controlavéis

SPA - Single Page Application

São aplicações que carregam apenas uma vez a estrutura inicial e depois todas as outras ações/requisições/navegações são feitas via ajax.
Exemplos: Facebook, Gmail

Rotas no React.js

Para Rotas é possível utilizar o React-Router https://github.com/reactjs/react-router

Renderização de componentes no servidor

Os componentes React podem ser renderizados no servidor.
Node, Java, .NET, php etc...

Arquitetura de desenvolvimento Flux

Arquitetura de desenvolvimento Flux

Desenvolvimento de uma aplicação de exemplo utilizando React.js

prática...

Quem utiliza React?

Grandes aplicações como Facebook, Instagram, WhatsApp Web, NetFlix,Yahoo Mail, Khan Academy, FlipBoard, BBC, Periscope Web, dentre outras, já utilizam React.js.
No Brasil algumas empresas já estão com algum produto com React, por exemplo: "Globo Play" e algumas partes do "portal G1" da Rede Globo

Quem utiliza React?

O aplicativo MemesPlay e o "E aí Pah" da empresa "Escolha Tecnologia" foram desenvolvidos com React.

FIM

https://github.com/victorvhpg/minicurso-react.js