From 748a4ef1b2888190a5e94e3f888019315979fd8b Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Tue, 7 Oct 2014 03:09:24 -0300 Subject: [PATCH 1/5] add a section at 'jsx-in-depth' talking about namespaced components --- docs/docs/02.1-jsx-in-depth.md | 63 +++++++++++++++++++++++++++++++++- 1 file changed, 62 insertions(+), 1 deletion(-) diff --git a/docs/docs/02.1-jsx-in-depth.md b/docs/docs/02.1-jsx-in-depth.md index 14924f746c..43ce01c543 100644 --- a/docs/docs/02.1-jsx-in-depth.md +++ b/docs/docs/02.1-jsx-in-depth.md @@ -133,6 +133,68 @@ var tree = Nav(null, React.DOM.span(null)); > DOM. The docblock parameter is only a convenience to resolve the most commonly > used elements. In general, JSX has no notion of the DOM. +## 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 = Form; +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 = Form; + +var App = ( +
+ + + + +
+); +``` + +For doing this, you just need to create your *"sub-components"* as attributes of the main component: + +```javascript +var Form = React.createClass({ ... }); + +Form.Row = React.createClass({ ... }); +Form.Label = React.createClass({ ... }); +Form.Input = React.createClass({ ... }); +``` + +JSX will take care to make the things right when compile your code. + +```javascript +var App = ( + Form(null, + Form.Row(null, + Form.Label(null), + Form.Input(null) + ) + ) +); +``` + +> Note: +> +> 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. + ## JavaScript Expressions ### Attribute Expressions @@ -176,7 +238,6 @@ var content = ( ); ``` - ## Prior Work JSX is similar to several other JavaScript embedded XML language From fd9ddab532793cce38c231becad113dedd5c47b4 Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Tue, 7 Oct 2014 13:06:16 -0300 Subject: [PATCH 2/5] change the global variable to a new sample component --- docs/docs/02.1-jsx-in-depth.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/docs/02.1-jsx-in-depth.md b/docs/docs/02.1-jsx-in-depth.md index 43ce01c543..1f69e765b0 100644 --- a/docs/docs/02.1-jsx-in-depth.md +++ b/docs/docs/02.1-jsx-in-depth.md @@ -138,7 +138,7 @@ var tree = Nav(null, React.DOM.span(null)); 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 = Form; +var Form = MyFormComponent; var FormRow = Form.Row; var FormLabel = Form.Label; var FormInput = Form.Input; @@ -156,7 +156,7 @@ 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 = Form; +var Form = MyFormComponent; var App = (
@@ -171,11 +171,11 @@ var App = ( For doing this, you just need to create your *"sub-components"* as attributes of the main component: ```javascript -var Form = React.createClass({ ... }); +var MyFormComponent = React.createClass({ ... }); -Form.Row = React.createClass({ ... }); -Form.Label = React.createClass({ ... }); -Form.Input = 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. From 8a4b2763dc4fec2c13e13005e3c118ba48faa673 Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Wed, 8 Oct 2014 01:41:48 -0300 Subject: [PATCH 3/5] change note comment about namespaced components --- docs/docs/02.1-jsx-in-depth.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/02.1-jsx-in-depth.md b/docs/docs/02.1-jsx-in-depth.md index 1f69e765b0..ac81fd815a 100644 --- a/docs/docs/02.1-jsx-in-depth.md +++ b/docs/docs/02.1-jsx-in-depth.md @@ -193,7 +193,7 @@ var App = ( > Note: > -> 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. +> 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 From a7f157ebb15cacf8dc9e274f390f96ff92f2e3a6 Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Wed, 5 Nov 2014 12:32:16 -0200 Subject: [PATCH 4/5] update namespaced component to adapt with the v0.12 --- docs/docs/02.1-jsx-in-depth.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/docs/02.1-jsx-in-depth.md b/docs/docs/02.1-jsx-in-depth.md index 4d65d2c734..cd18fd8c37 100644 --- a/docs/docs/02.1-jsx-in-depth.md +++ b/docs/docs/02.1-jsx-in-depth.md @@ -136,10 +136,10 @@ JSX will take care to make the things right when compile your code. ```javascript var App = ( - Form(null, - Form.Row(null, - Form.Label(null), - Form.Input(null) + React.createElement(Form, null, + React.createElement(Form.Row, null, + React.createElement(Form.Label, null), + React.createElement(Form.Input, null) ) ) ); From 1adbc22fdeb6dce5a6628fd7cb4a7dc2883e25fc Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Thu, 6 Nov 2014 01:23:51 -0200 Subject: [PATCH 5/5] bugfix: remove conflict comment --- docs/docs/02.1-jsx-in-depth.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/docs/02.1-jsx-in-depth.md b/docs/docs/02.1-jsx-in-depth.md index cd18fd8c37..68f30db263 100644 --- a/docs/docs/02.1-jsx-in-depth.md +++ b/docs/docs/02.1-jsx-in-depth.md @@ -201,5 +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. ->>>>>>> master +> 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