add a section at 'jsx-in-depth' talking about namespaced components
Pedro Nauck committed
Oct 7, 2014 at 03:09 UTC
748a4ef1b2888190a5e94e3f888019315979fd8b
1 file changed
+62
-1
docs/docs/02.1-jsx-in-depth.md
+62
-1
@@ -133,6 +133,68 @@ var tree = Nav(null, React.DOM.span(null));
133
> DOM. The docblock parameter is only a convenience to resolve the most commonly
134
> used elements. In general, JSX has no notion of the DOM.
135
136
+## Namespaced Components
137
+
138
+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:
139
+
140
+```javascript
141
+var Form = Form;
142
+var FormRow = Form.Row;
143
+var FormLabel = Form.Label;
144
+var FormInput = Form.Input;
145
+
146
+var App = (
147
+ <Form>
148
+ <FormRow>
149
+ <FormLabel />
150
+ <FormInput />
151
+ </FormRow>
152
+ </Form>
153
+);
154
+```
155
+
156
+Instead of declare a bunch of variables at the top, you'll get just one component that have other components as attributes.
157
+
158
+```javascript
159
+var Form = Form;
160
+
161
+var App = (
162
+ <Form>
163
+ <Form.Row>
164
+ <Form.Label />
165
+ <Form.Input />
166
+ </Form.Row>
167
+ </Form>
168
+);
169
+```
170
+
171
+For doing this, you just need to create your *"sub-components"* as attributes of the main component:
172
+
173
+```javascript
174
+var Form = React.createClass({ ... });
175
+
176
+Form.Row = React.createClass({ ... });
177
+Form.Label = React.createClass({ ... });
178
+Form.Input = React.createClass({ ... });
179
+```
180
+
181
+JSX will take care to make the things right when compile your code.
182
+
183
+```javascript
184
+var App = (
185
+ Form(null,
186
+ Form.Row(null,
187
+ Form.Label(null),
188
+ Form.Input(null)
189
+ )
190
+ )
191
+);
192
+```
193
+
194
+> Note:
195
+>
196
+> 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.
197
+
198
## JavaScript Expressions
199
200
### Attribute Expressions
@@ -176,7 +238,6 @@ var content = (
238
);
239
```
240
179
-
241
## Prior Work
242
243
JSX is similar to several other JavaScript embedded XML language