Merge pull request #2297 from pedronauck/docs-namespace-in-jsx

Add a section at 'jsx-in-depth' talking about namespaced components

docs/02.1-jsx-in-depth.md

@@ -87,6 +87,68 @@ If you want to use JSX, the [Getting Started](/react/docs/getting-started.html)
 > ReactElement as an object literal to bypass the validation code in
 > `React.createElement`.
 
+## Namespaced Components
+
+If you are building a component that have a lot of childrens, or if you are building your application with some categories of reusable components (like a `Form` category), to make more simple and easiest, you can use a *namespaced component* to avoid something like this:
+
+```javascript
+var Form = MyFormComponent;
+var FormRow = Form.Row;
+var FormLabel = Form.Label;
+var FormInput = Form.Input;
+
+var App = (
+  <Form>
+    <FormRow>
+      <FormLabel />
+      <FormInput />
+    </FormRow>
+  </Form>
+);
+```
+
+Instead of declare a bunch of variables at the top, you'll get just one component that have other components as attributes.
+
+```javascript
+var Form = MyFormComponent;
+
+var App = (
+  <Form>
+    <Form.Row>
+      <Form.Label />
+      <Form.Input />
+    </Form.Row>
+  </Form>
+);
+```
+
+For doing this, you just need to create your *"sub-components"* as attributes of the main component:
+
+```javascript
+var MyFormComponent = React.createClass({ ... });
+
+MyFormComponent.Row = React.createClass({ ... });
+MyFormComponent.Label = React.createClass({ ... });
+MyFormComponent.Input = React.createClass({ ... });
+```
+
+JSX will take care to make the things right when compile your code.
+
+```javascript
+var App = (
+  React.createElement(Form, null, 
+    React.createElement(Form.Row, null, 
+      React.createElement(Form.Label, null), 
+      React.createElement(Form.Input, null)
+    )
+  )
+);
+```
+
+> Note:
+>
+> This feature is available in [v0.11](http://facebook.github.io/react/blog/2014/07/17/react-v0.11.html#jsx) and above.
+
 ## JavaScript Expressions
 
 ### Attribute Expressions
@@ -139,4 +201,4 @@ var content = (
 
 > NOTE:
 > 
-> JSX is similar to HTML, but not exactly the same. See [JSX gotchas](/react/docs/jsx-gotchas.html) for some key differences.
+> JSX is similar to HTML, but not exactly the same. See [JSX gotchas](/react/docs/jsx-gotchas.html) for some key differences.