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