--- id: OUTLINE title: Goals of the documentation layout: docs prev: 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