{"body":"","parents":["1a1104f56fe5bd5f116cb40fccd0ce51919189d2"],"patch":"diff --git a\/docs\/docs\/02.1-jsx-in-depth.md b\/docs\/docs\/02.1-jsx-in-depth.md\nindex 14924f746c..43ce01c543 100644\n--- a\/docs\/docs\/02.1-jsx-in-depth.md\n+++ b\/docs\/docs\/02.1-jsx-in-depth.md\n@@ -133,6 +133,68 @@ var tree = Nav(null, React.DOM.span(null));\n > DOM. The docblock parameter is only a convenience to resolve the most commonly\n > used elements. In general, JSX has no notion of the DOM.\n \n+## Namespaced Components\n+\n+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:\n+\n+```javascript\n+var Form = Form;\n+var FormRow = Form.Row;\n+var FormLabel = Form.Label;\n+var FormInput = Form.Input;\n+\n+var App = (\n+

\n+ \n+ \n+ \n+ <\/FormRow>\n+ <\/Form>\n+);\n+```\n+\n+Instead of declare a bunch of variables at the top, you'll get just one component that have other components as attributes.\n+\n+```javascript\n+var Form = Form;\n+\n+var App = (\n+ \n+ \n+ \n+ \n+ <\/Form.Row>\n+ <\/Form>\n+);\n+```\n+\n+For doing this, you just need to create your *\"sub-components\"* as attributes of the main component:\n+\n+```javascript\n+var Form = React.createClass({ ... });\n+\n+Form.Row = React.createClass({ ... });\n+Form.Label = React.createClass({ ... });\n+Form.Input = React.createClass({ ... });\n+```\n+\n+JSX will take care to make the things right when compile your code.\n+\n+```javascript\n+var App = (\n+ Form(null, \n+ Form.Row(null, \n+ Form.Label(null), \n+ Form.Input(null)\n+ )\n+ )\n+);\n+```\n+\n+> Note:\n+>\n+> 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.\n+\n ## JavaScript Expressions\n \n ### Attribute Expressions\n@@ -176,7 +238,6 @@ var content = (\n );\n ```\n \n-\n ## Prior Work\n \n JSX is similar to several other JavaScript embedded XML language\n","files":[{"path":"docs\/docs\/02.1-jsx-in-depth.md","status":"M"}],"commit":{"shortRevision":"748a4ef1b2","subject":"add a section at 'jsx-in-depth' talking about namespaced components","revision":"748a4ef1b2888190a5e94e3f888019315979fd8b","authorEmail":"pedronauck@gmail.com","authorName":"Pedro Nauck","authoredAt":"2014-10-07T03:09:24-03:00"}}

dillon1000/react

Files changed