Building Web Applications with React

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

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

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

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

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 Flux

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

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

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