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, criada pelos engenheiros do Facebook e Instagram. Neste curso, os participantes aprendem como desenvolver uma aplicação completa, criando interfaces de usuário de alto desempenho (UIs) com componentes JSX visando um DOM virtual e criando aplicativos Flux, que fornecem padrões arquitetónicos complementares para construir a funcionalidade da aplicação do lado do cliente.

Destinatários

• Programadores Javascript que desejem aprender a desenvolver aplicações profissionais
• Programadores que desejem aprender React
• Programadores que desejem aprender a desenvolver uma aplicação do zero

Objetivos

No final deste curso, os formandos serão capazes de:

• Criar uma aplicação web isomórfica usando o Facebook React e Flux
• Compor uma IU usando os 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 os componentes de animação React com transições CSS3

Pré-requisitos

Experiência em desenvolvimento de páginas web com JavaScript, HTML e CSS no nível do curso:

• JavaScript – Desenvolvimento Web Moderno

Programa

Introduction and Overview

• Features of React and Flux
• Benefits of the virtual DOM
• Configuring the development and build environment

Designing Custom React Components

• Displaying React content
  • Employing React.createElement() and React.DOM.* factories
  • Rendering the application with ReactDOM.render()
  • Constructing the UI on the server with renderToString()
• Leveraging JSX for UI design
  • Coding custom components with React.createClass()
  • Generating component output with the render method
  • Composing a JSX component hierarchy
  • Incorporating third-party components

Activating React Components

• Parameterizing components
  • Disambiguating component properties and state
  • Inserting properties into rendered output with this.props
  • Passing property values using JSX { } expressions
  • Initializing default values with getDefaultProps()
• Manipulating component state
  • Setting starting state values with getInitialState()
  • Reading application data with this.state
  • Mutating data with this.setState()
  • Harnessing React autobinding and event aggregation
•  Integrating into the component life cycle
  • Attaching and detaching logic and event handlers in componentDidMount and componentWillUnmount
  • Enhancing performance with componentShouldUpdate
  • Responding to changes with componentWillReceiveProps

Developing React Forms

• Manipulating form input components
  • Working with interactive properties
  • value
  • defaultValue
  • checked
  • selected
  • Capturing form component updates with onChange
  • Comparing controlled and uncontrolled components
• Simulating two-way binding
  • Applying the onChange / setState() convention
  • Employing the LinkedStateMixin
  • Passing ReactLink objects through the props hierarchy
• Connecting React to REST services
  • Making Ajax calls from React
  • Mapping CRUD access to REST actions
  • GET
  • POST
  • PUT
  • DELETE

Creating Flux Applications

• Modeling client-side data interactivity
  • Identifying Flux participants
  • Actions
  • Dispatcher
  • Stores
  • Views
  • Harnessing unidirectional data flow
  • Comparing Flux to Model View Controller, Redux and Relay
• Coding a Flux application
  • Extending the Facebook Dispatcher
  • Utilizing Node.js EventEmitter with custom stores
  • Integrating REST access with Flux action creators
• Integrating routing into Flux7
  • Exploiting the react-router for semantic URLs
  • Mapping URL paths and parameters to components

Analyzing React Applications

• Developer tools
  • Inspecting React components with browser extensions
  • Identifying and debugging rendering errors
• Unit testing
  • Running tests with Jest
  • Simulating event dispatch with ReactTestUtils.Simulate
• Performance testing
  • Establishing a baseline
  • Profiling React execution with Perf.start() and stop()
  • Optimizing component reconciliation with key

Animating React Applications

• Including the react-css-transition-group add-on
• Employing the ReactCSSTransitionGroup component
• Writing CSS transitions and animations