{"parents":["f6fdfd1bf0d13e51098a6009c2c85687b1245c9b"],"commit":{"subject":"Docs to ES6: Displaying data example.","shortRevision":"f5f1769583","authorEmail":"gillchristiang@gmail.com","authorName":"gillchristian","revision":"f5f1769583d14803f3e74bf522cf28b10b5a1a5c","authoredAt":"2016-05-22T14:14:04-03:00"},"files":[{"path":"docs\/docs\/02-displaying-data.md","status":"M"},{"path":"docs\/docs\/04-multiple-components.md","status":"M"}],"body":"","patch":"diff --git a\/docs\/docs\/02-displaying-data.md b\/docs\/docs\/02-displaying-data.md\nindex f9158275e0..70ad425add 100644\n--- a\/docs\/docs\/02-displaying-data.md\n+++ b\/docs\/docs\/02-displaying-data.md\n@@ -36,8 +36,8 @@ Let's look at a really simple example. Create a `hello-react.html` file with the\n For the rest of the documentation, we'll just focus on the JavaScript code and assume it's inserted into a template like the one above. Replace the placeholder comment above with the following JSX:\n \n ```javascript\n-var HelloWorld = React.createClass({\n- render: function() {\n+class HelloWorld extends React.Component {\n+ render() {\n return (\n

\n Hello, !\n@@ -45,14 +45,16 @@ var HelloWorld = React.createClass({\n <\/p>\n );\n }\n-});\n+}\n \n-setInterval(function() {\n+function tick() {\n ReactDOM.render(\n ,\n document.getElementById('example')\n );\n-}, 500);\n+}\n+\n+setInterval(tick, 500);\n ```\n \n ## Reactive Updates\ndiff --git a\/docs\/docs\/04-multiple-components.md b\/docs\/docs\/04-multiple-components.md\nindex 24323a9cf1..c74476779a 100644\n--- a\/docs\/docs\/04-multiple-components.md\n+++ b\/docs\/docs\/04-multiple-components.md\n@@ -17,8 +17,8 @@ By building modular components that reuse other components with well-defined int\n Let's create a simple Avatar component which shows a Facebook page picture and name using the Facebook Graph API.\n \n ```javascript\n-var Avatar = React.createClass({\n- render: function() {\n+class Avatar extends React.Component {\n+ render() {\n return (\n

\n \n@@ -26,25 +26,25 @@ var Avatar = React.createClass({\n <\/div>\n );\n }\n-});\n+}\n \n-var PagePic = React.createClass({\n- render: function() {\n+class PagePic extends React.Component {\n+ render() {\n return (\n

\n );\n }\n-});\n+}\n \n-var PageLink = React.createClass({\n- render: function() {\n+class PageLink extends React.Component {\n+ render() {\n return (\n \n {this.props.pagename}\n <\/a>\n );\n }\n-});\n+}\n \n ReactDOM.render(\n ,\n@@ -110,13 +110,12 @@ In most cases, this can be sidestepped by hiding elements instead of destroying\n The situation gets more complicated when the children are shuffled around (as in search results) or if new components are added onto the front of the list (as in streams). In these cases where the identity and state of each child must be maintained across render passes, you can uniquely identify each child by assigning it a `key`:\n \n ```javascript\n- render: function() {\n- var results = this.props.results;\n+ render() {\n return (\n

{result.text}<\/li>;\n- })}\n+ {this.props.results.map((result) => (\n+
{result.text}<\/li>\n+ ))}\n <\/ol>\n );\n }\n@@ -128,41 +127,41 @@ The `key` should *always* be supplied directly to the components in the array, n\n \n ```javascript\n \/\/ WRONG!\n-var ListItemWrapper = React.createClass({\n- render: function() {\n+class ListItemWrapper extends React.Component {\n+ render() {\n return
{this.props.data.text}<\/li>;\n }\n-});\n-var MyComponent = React.createClass({\n- render: function() {\n+}\n+class MyComponent extends React.Component {\n+ render() {\n return (\n

dillon1000/react

Files changed