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

This commit is contained in:
Connor McSheffrey
2013-10-29 10:14:18 -07:00
parent 280eff41f3
commit dd5fbc5859
3 changed files with 46 additions and 0 deletions
+6
View File
@@ -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
+13
View File
@@ -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).
+27
View File
@@ -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'.