Added docs for React cookbook section Introduction and Inline Styles React recipe
Connor McSheffrey committed
Sep 20, 2013 at 15:15 UTC
dd5fbc58599ed7b1d6c9e96064ac28421eafb1ce
3 files changed
+46
docs/_config.yml
+6
@@ -55,6 +55,12 @@ nav_docs_sections:
55
title: Add-ons
56
- id: examples
57
title: Examples
58
+- title: Cookbook
59
+ items:
60
+ - id: introduction
61
+ title: Introduction
62
+ - id: inline-styles
63
+ title: Inline Styles
64
- title: Reference
65
items:
66
- id: top-level-api
docs/docs/cb-01-introduction.md
new
+13
@@ -0,0 +1,13 @@
1
+---
2
+id: introduction
3
+title: Cookbook Introduction
4
+layout: docs
5
+permalink: introduction.html
6
+next: inline-styles.html
7
+---
8
+
9
+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.
10
+
11
+### Contributing
12
+
13
+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).
\ No newline at end of file
docs/docs/cb-02-inline-styles.md
new
+27
@@ -0,0 +1,27 @@
1
+---
2
+id: inline-styles
3
+title: Inline Styles
4
+layout: docs
5
+permalink: inline-styles.html
6
+---
7
+
8
+### Problem
9
+You want to put inline style to an element.
10
+
11
+### Solution
12
+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:
13
+
14
+```html
15
+/** @jsx React.DOM */
16
+
17
+var divStyle = {
18
+ color: 'white',
19
+ backgroundColor: 'lightblue',
20
+ WebkitTransition: 'all' // note the capital 'W' here
21
+};
22
+
23
+React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
24
+```
25
+
26
+### Discussion
27
+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'.
\ No newline at end of file