From 02f424158fb726447adef88dfaa5e324b051f713 Mon Sep 17 00:00:00 2001
From: Pedro Nauck <pedronauck@gmail.com>
Date: Tue, 7 Oct 2014 03:09:24 -0300
Subject: [PATCH] add a section at 'jsx-in-depth' talking about namespaced
 components

---
 docs/02.1-jsx-in-depth.md | 63 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 62 insertions(+), 1 deletion(-)

diff --git a/docs/02.1-jsx-in-depth.md b/docs/02.1-jsx-in-depth.md
index 14924f74..43ce01c5 100644
--- a/docs/02.1-jsx-in-depth.md
+++ b/docs/02.1-jsx-in-depth.md
@@ -133,6 +133,68 @@ var tree = Nav(null, React.DOM.span(null));
 > DOM. The docblock parameter is only a convenience to resolve the most commonly
 > used elements. In general, JSX has no notion of the DOM.
 
+## 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 = Form;
+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 = Form;
+
+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 Form = React.createClass({ ... });
+
+Form.Row = React.createClass({ ... });
+Form.Label = React.createClass({ ... });
+Form.Input = React.createClass({ ... });
+```
+
+JSX will take care to make the things right when compile your code.
+
+```javascript
+var App = (
+  Form(null, 
+    Form.Row(null, 
+      Form.Label(null), 
+      Form.Input(null)
+    )
+  )
+);
+```
+
+> Note:
+>
+> This feature is just implemented in [version 0.11](http://facebook.github.io/react/blog/2014/07/17/react-v0.11.html#jsx) or above.
+
 ## JavaScript Expressions
 
 ### Attribute Expressions
@@ -176,7 +238,6 @@ var content = (
 );
 ```
 
-
 ## Prior Work
 
 JSX is similar to several other JavaScript embedded XML language