diff --git a/docs/02.1-jsx-in-depth.md b/docs/02.1-jsx-in-depth.md index 6964af40..9940de1c 100644 --- a/docs/02.1-jsx-in-depth.md +++ b/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 = ( +
+ + + + +
+); +``` + +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 = ( +
+ + + + +
+); +``` + +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. \ No newline at end of file