react.dev/docs/OUTLINE.md

id	title	layout	prev
OUTLINE	Goals of the documentation	docs	09.1-tutorial.html

• Flow of docs should mimic progression of questions a new user would ask
• High information density -- assume the reader is adept at JS
• Talk about best practices
• JSFiddles for all code samples
• Provide background for some of the design decisions
• Less words less words less words!

Outline

Motivation / Why React?

• Declarative (simple)
• Components (separation of concerns)
• Give it 5 minutes

Displaying data

• Hello world example
• Reactive updates
• Components are just functions
• JSX syntax (link to separate doc?)
• JSX gotchas

Interactivity and dynamic UIs

• Click handler example
• Event handlers / synthetic events (link to w3c docs)
• Under the hood: autoBind and event delegation (IE8 notes)
• React is a state machine
• How state works
• What components should have state?
• What should go in state?
• What shouldn't go in state?

Scaling up: using multiple components

• Motivation: separate concerns
• Composition example
• Ownership (and owner vs. parent)
• Children
• Data flow (one-way data binding)
• A note on performance

Building effective reusable components

• You should build a reusable component library (CSS, testing etc)
• Prop validation
• Transferring props: a shortcut
• Mixins
• Testing

Forms

Working with the browser

• The mock DOM
• Refs / getDOMNode()
• More about refs
• Component lifecycle
• Browser support and polyfills

Working with your environment

• CDN-hosted React
• Using master
• In-browser JSX transform
• Productionizing: precompiled JSX
• Helpful open-source projects

Integrating with other UI libraries

• Using jQuery plugins
• Letting jQuery manage React components
• Using with Backbone.View
• CoffeeScript
• Moving from Handlebars to React: an example

Server / static rendering

• Motivation
• Simple example
• How does it work? (No DOM)
• Rendr + React

Big ideas

• Animation
• Bootstrap bindings (responsive grids)
• Reactive CSS
• Web workers
• Native views

Case studies

• Comment box tutorial from scratch
• From HTML mock to application: React one-hour email
• Jordan's LikeToggler example

Reference

• API
• DOM differences