React – Construção de Aplicações Web

Print Friendly, PDF & Email

Em pré-inscrição. Entre em contacto para obter mais informações.

Nível Avançado | 30 horas | Laboral: 5 dias

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

Pedido de Informação