{"body":"","parents":["a808d481692236153c046d9c6a7ce9af55be40ec"],"commit":{"revision":"d73c2b23e06665c57f4e615e2b5cfe122b98ac4d","authorName":"petehunt","shortRevision":"d73c2b23e0","authoredAt":"2013-05-30T14:16:44-07:00","subject":"Return of mixin docs","authorEmail":"floydophone@gmail.com"},"patch":"diff --git a\/docs\/_config.yml b\/docs\/_config.yml\nindex 486c3e2ae9..fb4b222498 100644\n--- a\/docs\/_config.yml\n+++ b\/docs\/_config.yml\n@@ -1,14 +1,14 @@\n----\n-pygments: true\n+--- \n+markdown: redcarpet\n name: React\n+redcarpet: \n+ extensions: \n+ - fenced_code_blocks\n react_version: 0.3.0\n-exclude:\n+pygments: true\n+exclude: \n - Gemfile\n - Gemfile.lock\n - README.md\n - Rakefile\n-redcarpet:\n- extensions:\n- - fenced_code_blocks\n-markdown: redcarpet\n baseurl: \/react\ndiff --git a\/docs\/_includes\/nav_docs.html b\/docs\/_includes\/nav_docs.html\nindex e896ac8e50..b1ae770c6a 100644\n--- a\/docs\/_includes\/nav_docs.html\n+++ b\/docs\/_includes\/nav_docs.html\n@@ -18,6 +18,7 @@\n

Mixins<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\ndiff --git a\/docs\/docs\/api.md b\/docs\/docs\/api.md\nindex 8f47b53aea..5610be2f6b 100644\n--- a\/docs\/docs\/api.md\n+++ b\/docs\/docs\/api.md\n@@ -3,6 +3,7 @@ id: docs-api\n title: React API\n layout: docs\n prev: advanced-components.html\n+next: mixins.html\n ---\n \n ## React\ndiff --git a\/docs\/docs\/mixins.md b\/docs\/docs\/mixins.md\nnew file mode 100644\nindex 0000000000..8302a8e191\n--- \/dev\/null\n+++ b\/docs\/docs\/mixins.md\n@@ -0,0 +1,61 @@\n+---\n+id: docs-mixins\n+title: Mixins\n+layout: docs\n+prev: api.html\n+next: common-questions.html\n+---\n+\n+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:\n+\n+```javascript\n+\/\/ mixins-simple.js\n+var MyMixin = {\n+ getMessage: function() {\n+ return 'hello world';\n+ }\n+};\n+\n+var MyComponent = React.createClass({\n+ mixins: [MyMixin],\n+ render: function() {\n+ return

{this.getMessage()}<\/div>;\n+ }\n+});\n+```\n+\n+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:\n+\n+```javascript\n+\/\/ mixins-advanced.js\n+var Mixin1 = {\n+ componentDidMount: function() {\n+ console.log('Mixin1.componentDidMount()');\n+ }\n+};\n+\n+var Mixin2 = {\n+ componentDidMount: function() {\n+ console.log('Mixin2.componentDidMount()');\n+ }\n+};\n+\n+\n+var MyComponent = React.createClass({\n+ mixins: [Mixin1, Mixin2],\n+ render: function() {\n+ return

hello world<\/div>;\n+ }\n+});\n+```\n+\n+When MyComponent is mounted in the page the following text will print to the console:\n+\n+```\n+Mixin1.componentDidMount()\n+Mixin2.componentDidMount()\n+```\n+\n+## When should you use mixins?\n+\n+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.\n","files":[{"status":"M","path":"docs\/_config.yml"},{"status":"M","path":"docs\/_includes\/nav_docs.html"},{"status":"M","path":"docs\/docs\/api.md"},{"status":"A","path":"docs\/docs\/mixins.md"}]}

dillon1000/react

Files changed