Building Web Applications with React and Redux (REACT) – Outline

Detailed Course Outline

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

Parameterising components

  • Disambiguating component properties and state
  • Inserting properties into rendered output with this.props
  • Passing property values using JSX { } expressions
  • Initialising 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

Modelling 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
  • Utilising Node.js EventEmitter with custom stores
  • Integrating REST access with Flux action creators

Integrating routing into Flux

  • Exploiting the react-router for semantic URLs
  • Mapping URL paths and parameters to components

Analysing 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()
  • Optimising component reconciliation with key

Animating React Applications

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