Added docs for React cookbook section Introduction and Inline Styles React recipe

_config.yml

@@ -55,6 +55,12 @@ nav_docs_sections:
     title: Add-ons
   - id: examples
     title: Examples
+- title: Cookbook
+  items:
+  - id: introduction
+    title: Introduction
+  - id: inline-styles
+    title: Inline Styles
 - title: Reference
   items:
   - id: top-level-api

docs/cb-01-introduction.md

@@ -0,0 +1,13 @@
+---
+id: introduction
+title: Cookbook Introduction
+layout: docs
+permalink: introduction.html
+next: inline-styles.html
+---
+
+The React.js cookbook provides solutions for common questions asked when working with the React framework. It's written in the [cookbook format](http://shop.oreilly.com/category/series/cookbooks.do) commonly used by O'Reilly Media. See [Inline Styles](inline-styles.html) recipe as an example.
+
+### Contributing
+
+Submit a pull request to the [React repo](https://github.com/facebook/react) with a recipe in the cookbook format (Problem, Solution, Discussion). If you have a recipe that needs review prior to submitting a PR you can find help in the [#reactjs IRC on freenode](irc://chat.freenode.net/reactjs) or the [reactjs Google group](http://groups.google.com/group/reactjs).

docs/cb-02-inline-styles.md

@@ -0,0 +1,27 @@
+---
+id: inline-styles
+title: Inline Styles
+layout: docs
+permalink: inline-styles.html
+---
+
+### Problem
+You want to put inline style to an element.
+
+### Solution
+Instead of writing a string, create an object whose key is the camelCased version of the style name, and whose value is the style's value, in string:
+
+```html
+/** @jsx React.DOM */
+
+var divStyle = {
+  color: 'white',
+  backgroundColor: 'lightblue',
+  WebkitTransition: 'all' // note the capital 'W' here
+};
+
+React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
+```
+
+### Discussion
+Style keys are camelCased in order to be consistent with accessing the properties using `node.style.___` in DOM. This also explains why `WebkitTransition` has an uppercase 'W'.