• Create an isomorphic web application using Facebook React and Flux
• Compose a UI using React JavaScript and JSX components
• Integrate React forms with Ajax and back-end REST services
• Apply the Flux application pattern (dispatcher, stores, and actions)
• Exploit React animation components with CSS3 transitions

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

Experience developing web pages with JavaScript, HTML, and CSS at the level of:

• JavaScript for Modern Web Development