React – Construção de Aplicações Web
Apresentação
O React é uma biblioteca JavaScript extremamente rápida e versátil para a criação de interfaces de utilizador, desenvolvida pelos engenheiros do Facebook e Instagram. Neste curso, os participantes aprendem a desenvolver uma aplicação completa, criando interfaces de alto desempenho com componentes JSX, aproveitando o conceito de DOM virtual e implementando aplicações com o padrão arquitetónico Flux, que complementa a construção de funcionalidades do lado do cliente.
Enquadramento
O React é atualmente uma das tecnologias mais populares para desenvolvimento frontend, sendo amplamente utilizado em aplicações web modernas devido ao seu desempenho, modularidade e ecossistema rico. Esta formação prepara os programadores para trabalhar com React e Flux desde os conceitos básicos até à implementação de funcionalidades complexas, integrando APIs e boas práticas de desenvolvimento.
Destinatários
- Programadores JavaScript que desejem aprender a desenvolver aplicações profissionais.
- Programadores interessados em aprender React.
- Programadores que pretendam aprender a desenvolver uma aplicação completa do zero.
Pré-requisitos
- Experiência em desenvolvimento de páginas web com JavaScript, HTML e CSS.
Objetivo Geral
Capacitar os participantes para desenvolver aplicações web modernas, escaláveis e de alto desempenho utilizando React e Flux, desde a conceção de componentes até à integração com serviços externos e otimização de performance.
Objetivos Específicos
No final do curso, os formandos serão capazes de:
- Criar uma aplicação web isomórfica usando React e Flux.
- Compor interfaces de utilizador com componentes React JavaScript e JSX.
- Integrar formulários React com Ajax e serviços back-end REST.
- Aplicar o padrão de aplicação Flux (dispatcher, stores e actions).
- Explorar componentes de animação React com transições CSS3.
Programa
- Introduction and Overview
- Funcionalidades do React e Flux
- Benefícios do DOM virtual
- Configuração do ambiente de desenvolvimento e build
- Designing Custom React Components
- Apresentar conteúdo em React
- Utilizar React.createElement() e React.DOM.* factories
- Renderizar aplicações com ReactDOM.render()
- Renderização no servidor com renderToString()
- Utilizar JSX para design de UI
- Criar componentes personalizados com React.createClass()
- Gerar output com o método render
- Compor hierarquias de componentes JSX
- Incorporar componentes de terceiros
- Activating React Components
- Parametrização de componentes
- Propriedades vs. estado
- Inserção de propriedades no output com this.props
- Passagem de valores usando expressões JSX { }
- Valores por defeito com getDefaultProps()
- Manipulação de estado do componente
- Estado inicial com getInitialState()
- Leitura de dados com this.state
- Alteração de dados com this.setState()
- Autobinding e agregação de eventos em React
- Ciclo de vida dos componentes
- componentDidMount e componentWillUnmount
- Otimização com shouldComponentUpdate
- Resposta a alterações com componentWillReceiveProps
- Developing React Forms
- Manipulação de inputs de formulário
- Propriedades interativas (value, defaultValue, checked, selected)
- Captura de alterações com onChange
- Componentes controlados vs. não controlados
- Simulação de two-way binding
- Convenção onChange / setState()
- Utilização do LinkedStateMixin
- Passagem de ReactLink na hierarquia de props
- Connecting React to REST Services
- Chamadas Ajax em React
- Mapeamento CRUD para REST (GET, POST, PUT, DELETE)
- Creating Flux Applications
- Modelação de interatividade de dados no cliente
- Elementos do Flux (Actions, Dispatcher, Stores, Views)
- Flux vs. MVC, Redux e Relay
- Implementação de aplicações Flux
- Integração de REST com action creators
- Integração de routing (react-router)
- URLs semânticas e mapeamento de parâmetros
- Analyzing React Applications
- Ferramentas de desenvolvimento
- Extensões de browser para inspeção de componentes
- Debugging de erros de renderização
- Testes unitários com Jest
- Simulação de eventos com ReactTestUtils.Simulate
- Testes de performance e profiling
- Otimização de reconciliação com key
- Animating React Applications
- Utilização do add-on react-css-transition-group
- Implementação de transições com ReactCSSTransitionGroup
- Criação de animações e transições em CSS
