diff --git a/_config.yml b/_config.yml index 7e26caf0..1220ae0a 100644 --- a/_config.yml +++ b/_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 diff --git a/docs/cb-01-introduction.md b/docs/cb-01-introduction.md new file mode 100644 index 00000000..f3f39c73 --- /dev/null +++ b/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). \ No newline at end of file diff --git a/docs/cb-02-inline-styles.md b/docs/cb-02-inline-styles.md new file mode 100644 index 00000000..4d3e9973 --- /dev/null +++ b/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(
Hello World!
, 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'. \ No newline at end of file