From d73c2b23e06665c57f4e615e2b5cfe122b98ac4d Mon Sep 17 00:00:00 2001 From: petehunt Date: Thu, 30 May 2013 14:16:44 -0700 Subject: [PATCH 1/5] Return of mixin docs --- docs/_config.yml | 14 ++++----- docs/_includes/nav_docs.html | 1 + docs/docs/api.md | 1 + docs/docs/mixins.md | 61 ++++++++++++++++++++++++++++++++++++ 4 files changed, 70 insertions(+), 7 deletions(-) create mode 100644 docs/docs/mixins.md diff --git a/docs/_config.yml b/docs/_config.yml index 486c3e2ae9abb..fb4b222498aa9 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -1,14 +1,14 @@ ---- -pygments: true +--- +markdown: redcarpet name: React +redcarpet: + extensions: + - fenced_code_blocks react_version: 0.3.0 -exclude: +pygments: true +exclude: - Gemfile - Gemfile.lock - README.md - Rakefile -redcarpet: - extensions: - - fenced_code_blocks -markdown: redcarpet baseurl: /react diff --git a/docs/_includes/nav_docs.html b/docs/_includes/nav_docs.html index e896ac8e50ff4..b1ae770c6a056 100644 --- a/docs/_includes/nav_docs.html +++ b/docs/_includes/nav_docs.html @@ -18,6 +18,7 @@

Reference

  • Event Handling
  • Advanced Components
  • API
    • +
  • Mixins
    • diff --git a/docs/docs/api.md b/docs/docs/api.md index 8f47b53aea258..5610be2f6b3b2 100644 --- a/docs/docs/api.md +++ b/docs/docs/api.md @@ -3,6 +3,7 @@ id: docs-api title: React API layout: docs prev: advanced-components.html +next: mixins.html --- ## React diff --git a/docs/docs/mixins.md b/docs/docs/mixins.md new file mode 100644 index 0000000000000..8302a8e19158d --- /dev/null +++ b/docs/docs/mixins.md @@ -0,0 +1,61 @@ +--- +id: docs-mixins +title: Mixins +layout: docs +prev: api.html +next: common-questions.html +--- + +Mixins allow code to be shared between multiple React components. They're pretty similar to mixins in Python or traits in PHP. Let's look at a simple example: + +```javascript +// mixins-simple.js +var MyMixin = { + getMessage: function() { + return 'hello world'; + } +}; + +var MyComponent = React.createClass({ + mixins: [MyMixin], + render: function() { + return
    {this.getMessage()}
    ; + } +}); +``` + +A class can use multiple mixins. Multiple mixins can also override any of the lifecycle methods and they'll be called for each mixin. Here's an example: + +```javascript +// mixins-advanced.js +var Mixin1 = { + componentDidMount: function() { + console.log('Mixin1.componentDidMount()'); + } +}; + +var Mixin2 = { + componentDidMount: function() { + console.log('Mixin2.componentDidMount()'); + } +}; + + +var MyComponent = React.createClass({ + mixins: [Mixin1, Mixin2], + render: function() { + return
    hello world
    ; + } +}); +``` + +When MyComponent is mounted in the page the following text will print to the console: + +``` +Mixin1.componentDidMount() +Mixin2.componentDidMount() +``` + +## When should you use mixins? + +In general, add a mixin whenever you want a component to share some utility methods, public interface, or lifecycle behavior. Often it's appropriate to use them as you would use a superclass in another OOP language. From 15d8200b135c79e363a36d0c7624321155a80e29 Mon Sep 17 00:00:00 2001 From: petehunt Date: Thu, 30 May 2013 14:20:47 -0700 Subject: [PATCH 2/5] oops --- docs/docs/mixins.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/docs/mixins.md b/docs/docs/mixins.md index 8302a8e19158d..7ed729253cca3 100644 --- a/docs/docs/mixins.md +++ b/docs/docs/mixins.md @@ -3,7 +3,6 @@ id: docs-mixins title: Mixins layout: docs prev: api.html -next: common-questions.html --- Mixins allow code to be shared between multiple React components. They're pretty similar to mixins in Python or traits in PHP. Let's look at a simple example: From 071201e84b240859073dcfb941a2f6250e3f30a2 Mon Sep 17 00:00:00 2001 From: petehunt Date: Thu, 30 May 2013 14:22:05 -0700 Subject: [PATCH 3/5] fixes --- docs/_includes/nav_docs.html | 2 +- docs/docs/api.md | 3 +-- docs/docs/mixins.md | 3 ++- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/_includes/nav_docs.html b/docs/_includes/nav_docs.html index b1ae770c6a056..d6d9e945a9980 100644 --- a/docs/_includes/nav_docs.html +++ b/docs/_includes/nav_docs.html @@ -17,8 +17,8 @@

    Reference

  • Component Lifecycle
  • Event Handling
  • Advanced Components
    • -
  • API
  • Mixins
    • +
  • API
    • diff --git a/docs/docs/api.md b/docs/docs/api.md index 5610be2f6b3b2..fd29070ecbc14 100644 --- a/docs/docs/api.md +++ b/docs/docs/api.md @@ -2,8 +2,7 @@ id: docs-api title: React API layout: docs -prev: advanced-components.html -next: mixins.html +prev: mixins.html --- ## React diff --git a/docs/docs/mixins.md b/docs/docs/mixins.md index 7ed729253cca3..1f78ebe4299ec 100644 --- a/docs/docs/mixins.md +++ b/docs/docs/mixins.md @@ -2,7 +2,8 @@ id: docs-mixins title: Mixins layout: docs -prev: api.html +prev: advanced-components.html +next: api.html --- Mixins allow code to be shared between multiple React components. They're pretty similar to mixins in Python or traits in PHP. Let's look at a simple example: From 84d4bbb13d7a39cf20e3c03228954094fc524fa6 Mon Sep 17 00:00:00 2001 From: petehunt Date: Thu, 30 May 2013 14:23:53 -0700 Subject: [PATCH 4/5] bla --- docs/docs/advanced-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/advanced-components.md b/docs/docs/advanced-components.md index 6a63b8f35b28b..2a07be7274d9d 100644 --- a/docs/docs/advanced-components.md +++ b/docs/docs/advanced-components.md @@ -4,7 +4,7 @@ title: Advanced Components description: How to build advanced composite components. layout: docs prev: event-handling.html -next: api.html +next: mixins.html --- Composite components extend a `ReactCompositeComponent` base class that provides From f586c58f960f6efb994a9fa325c524e1150844ad Mon Sep 17 00:00:00 2001 From: petehunt Date: Thu, 30 May 2013 14:45:22 -0700 Subject: [PATCH 5/5] @yungsters --- docs/docs/mixins.md | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/docs/docs/mixins.md b/docs/docs/mixins.md index 1f78ebe4299ec..65acef6ddfeae 100644 --- a/docs/docs/mixins.md +++ b/docs/docs/mixins.md @@ -6,10 +6,10 @@ prev: advanced-components.html next: api.html --- -Mixins allow code to be shared between multiple React components. They're pretty similar to mixins in Python or traits in PHP. Let's look at a simple example: +Mixins allow code to be shared between multiple React components. They are pretty similar to mixins +in Python or traits in PHP. Let's look at a simple example: ```javascript -// mixins-simple.js var MyMixin = { getMessage: function() { return 'hello world'; @@ -24,10 +24,13 @@ var MyComponent = React.createClass({ }); ``` -A class can use multiple mixins. Multiple mixins can also override any of the lifecycle methods and they'll be called for each mixin. Here's an example: +A class can use multiple mixins, but no two mixins can define the same method. Two mixins can, however, +implement the same [lifecycle method](component-lifecycle.html). In this case, each implementation will be invoked one after another. + +The only exception is the `shouldComponentUpdate` lifecycle method. This method may only be implemented once +(either by a mixin or by the component). ```javascript -// mixins-advanced.js var Mixin1 = { componentDidMount: function() { console.log('Mixin1.componentDidMount()'); @@ -49,7 +52,7 @@ var MyComponent = React.createClass({ }); ``` -When MyComponent is mounted in the page the following text will print to the console: +When `MyComponent` is mounted into the page, the following text will print to the console: ``` Mixin1.componentDidMount() @@ -58,4 +61,5 @@ Mixin2.componentDidMount() ## When should you use mixins? -In general, add a mixin whenever you want a component to share some utility methods, public interface, or lifecycle behavior. Often it's appropriate to use them as you would use a superclass in another OOP language. +In general, add a mixin whenever you want a component to share some utility methods, public interface, +or lifecycle behavior. Often it's appropriate to use them as you would use a superclass in another OOP language.