Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 63 additions & 1 deletion docs/docs/02.1-jsx-in-depth.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 = (
<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 = MyFormComponent;

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 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
Expand Down Expand Up @@ -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.