mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Added docs for React cookbook section Introduction and Inline Styles React recipe
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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).
|
||||
@@ -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'.
|
||||
Reference in New Issue
Block a user