From 276df014a13bfc07ecf727c4d0e8954cb6ec42c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Tue, 17 Feb 2015 11:10:33 -0800 Subject: [PATCH] Merge pull request #3168 from briankung/docs-jsx-namespacing [Docs] Clarify section on namespaced components --- docs/docs/02.1-jsx-in-depth.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/docs/02.1-jsx-in-depth.md b/docs/docs/02.1-jsx-in-depth.md index 45f00e243d..2557896343 100644 --- a/docs/docs/02.1-jsx-in-depth.md +++ b/docs/docs/02.1-jsx-in-depth.md @@ -89,9 +89,10 @@ If you want to use JSX, the [Getting Started](/react/docs/getting-started.html) ## Namespaced Components -If you are building a component that has many children, or if you are building your application with some categories of reusable components (like a `Form` category), to make it simpler and easier, you can use a *namespaced component* to avoid something like this: +If you are building a component that has many children, like a form, you might end up with something with a lot of variable declarations: ```javascript +// Awkward block of variable declarations var Form = MyFormComponent; var FormRow = Form.Row; var FormLabel = Form.Label; @@ -107,7 +108,7 @@ var App = ( ); ``` -Instead of declaring a bunch of variables at the top, you'll get just one component that has other components as attributes. +To make it simpler and easier, *namespaced components* let you use one component that has other components as attributes: ```javascript var Form = MyFormComponent;