From 1c7b6c240f0aa4df6534d84747d3652e31b752bd Mon Sep 17 00:00:00 2001
From: Cheng Lou <chenglou92@gmail.com>
Date: Mon, 30 Sep 2013 13:06:53 -0400
Subject: [PATCH] style prop value shorthand, children prop manip warning

---
 cookbook/cb-06-style-prop-value-px tip.md | 26 +++++++++++++++++++
 cookbook/cb-06-style-prop-value-px.md     | 31 +++++++++++++++++++++++
 cookbook/cb-07-children-prop-type tip.md  | 10 ++++++++
 cookbook/cb-07-children-prop-type.md      | 14 ++++++++++
 4 files changed, 81 insertions(+)
 create mode 100644 cookbook/cb-06-style-prop-value-px tip.md
 create mode 100644 cookbook/cb-06-style-prop-value-px.md
 create mode 100644 cookbook/cb-07-children-prop-type tip.md
 create mode 100644 cookbook/cb-07-children-prop-type.md

diff --git a/cookbook/cb-06-style-prop-value-px tip.md b/cookbook/cb-06-style-prop-value-px tip.md
new file mode 100644
index 00000000..b05ecfd0
--- /dev/null
+++ b/cookbook/cb-06-style-prop-value-px tip.md	
@@ -0,0 +1,26 @@
+---
+id: style-prop-value-px-tip
+title: Shorthand for specifying pixel values in style prop
+layout: docs
+permalink: style-prop-value-px-tip.html
+---
+
+When specifying a pixel value for your inline `style` prop, React actually automatically appends the string "px" for you after your number, so this works:
+
+```js
+/** @jsx React.DOM */
+
+var divStyle = {height: 10}; // rendered as "height:10px"
+React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
+```
+
+See [Inline Styles](inline-styles-tip.html) in React for more info.
+
+Sometimes you _do_ want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic "px" suffix:
+
+- fillOpacity
+- fontWeight
+- opacity
+- orphans
+- zIndex
+- zoom
diff --git a/cookbook/cb-06-style-prop-value-px.md b/cookbook/cb-06-style-prop-value-px.md
new file mode 100644
index 00000000..70c0c40c
--- /dev/null
+++ b/cookbook/cb-06-style-prop-value-px.md
@@ -0,0 +1,31 @@
+---
+id: style-prop-value-px
+title: Shorthand for specifying pixel values in style prop
+layout: docs
+permalink: style-prop-value-px.html
+---
+
+### Problem
+It's tedious to specify an inline `style` value by appending your number value with the string "px" each time.
+
+### Solution
+React actually automatically appends the string "px" for you after your number, so this works:
+
+```js
+/** @jsx React.DOM */
+
+var divStyle = {height: 10}; // rendered as "height:10px"
+React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
+```
+
+### Discussion
+See [Inline Styles](inline-styles.html) in React for more info.
+
+Sometimes you _do_ want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic "px" suffix:
+
+- fillOpacity
+- fontWeight
+- opacity
+- orphans
+- zIndex
+- zoom
diff --git a/cookbook/cb-07-children-prop-type tip.md b/cookbook/cb-07-children-prop-type tip.md
new file mode 100644
index 00000000..0c9e85c0
--- /dev/null
+++ b/cookbook/cb-07-children-prop-type tip.md	
@@ -0,0 +1,10 @@
+---
+id: children-prop-type-tip
+title: Type of the children prop
+layout: docs
+permalink: children-prop-type-tip.html
+---
+
+Usually, when manipulating a component's children through `this.props.children`, an array is expected. To save an extra array allocation, when `children` only contains one single component, it returns the component itself, without the array wrapper.
+
+This means accessing, for example, `this.props.children.length` might be misleading since it could be the length property of a single string component.
diff --git a/cookbook/cb-07-children-prop-type.md b/cookbook/cb-07-children-prop-type.md
new file mode 100644
index 00000000..8c051f2e
--- /dev/null
+++ b/cookbook/cb-07-children-prop-type.md
@@ -0,0 +1,14 @@
+---
+id: children-prop-type
+title: Type of the children prop
+layout: docs
+permalink: children-prop-type.html
+---
+
+### Problem
+You get errors while manipulating `this.props.children` inside a component.
+
+### Solution
+Usually, `children` is an array of components. To save an extra array allocation, when it only contains one single component, it returns the component itself.
+
+This means accessing, for example, `this.props.children.length` might be misleading since it could be the length property of a single string component.