{"parents":["4f50071de0ac1dd6ce6aeda4f3dd9549fb9e36ba","1adbc22fdeb6dce5a6628fd7cb4a7dc2883e25fc"],"files":[{"path":"docs\/docs\/02.1-jsx-in-depth.md","status":"M"}],"commit":{"subject":"Merge pull request #2297 from pedronauck\/docs-namespace-in-jsx","authorEmail":"paul@oshannessy.com","authoredAt":"2015-01-16T16:21:22-08:00","revision":"f656f1966eeeeca77d0afac5f38c49a7f6106fbf","shortRevision":"f656f1966e","authorName":"Paul O’Shannessy"},"body":"Add a section at 'jsx-in-depth' talking about namespaced components","patch":"diff --git a\/docs\/docs\/02.1-jsx-in-depth.md b\/docs\/docs\/02.1-jsx-in-depth.md\nindex 6964af407f..9940de1c57 100644\n--- a\/docs\/docs\/02.1-jsx-in-depth.md\n+++ b\/docs\/docs\/02.1-jsx-in-depth.md\n@@ -87,6 +87,68 @@ If you want to use JSX, the [Getting Started](\/react\/docs\/getting-started.html)\n > ReactElement as an object literal to bypass the validation code in\n > `React.createElement`.\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 = MyFormComponent;\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 = MyFormComponent;\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 MyFormComponent = React.createClass({ ... });\n+\n+MyFormComponent.Row = React.createClass({ ... });\n+MyFormComponent.Label = React.createClass({ ... });\n+MyFormComponent.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+ React.createElement(Form, null, \n+ React.createElement(Form.Row, null, \n+ React.createElement(Form.Label, null), \n+ React.createElement(Form.Input, null)\n+ )\n+ )\n+);\n+```\n+\n+> Note:\n+>\n+> This feature is available in [v0.11](http:\/\/facebook.github.io\/react\/blog\/2014\/07\/17\/react-v0.11.html#jsx) and above.\n+\n ## JavaScript Expressions\n \n ### Attribute Expressions\n@@ -139,4 +201,4 @@ var content = (\n \n > NOTE:\n > \n-> JSX is similar to HTML, but not exactly the same. See [JSX gotchas](\/react\/docs\/jsx-gotchas.html) for some key differences.\n+> JSX is similar to HTML, but not exactly the same. See [JSX gotchas](\/react\/docs\/jsx-gotchas.html) for some key differences.\n\\ No newline at end of file\n"}

dillon1000/react

Files changed