From 5e59a1fcd9a05791eb731381a82cbd4ccd80b662 Mon Sep 17 00:00:00 2001
From: gillchristian <gillchristiang@gmail.com>
Date: Sun, 22 May 2016 14:14:04 -0300
Subject: [PATCH] Docs to ES6: Displaying data example.

---
 docs/02-displaying-data.md     | 12 ++++---
 docs/04-multiple-components.md | 63 +++++++++++++++++-----------------
 2 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/docs/02-displaying-data.md b/docs/02-displaying-data.md
index f9158275..70ad425a 100644
--- a/docs/02-displaying-data.md
+++ b/docs/02-displaying-data.md
@@ -36,8 +36,8 @@ Let's look at a really simple example. Create a `hello-react.html` file with the
 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:
 
 ```javascript
-var HelloWorld = React.createClass({
-  render: function() {
+class HelloWorld extends React.Component {
+  render() {
     return (
       <p>
         Hello, <input type="text" placeholder="Your name here" />!
@@ -45,14 +45,16 @@ var HelloWorld = React.createClass({
       </p>
     );
   }
-});
+}
 
-setInterval(function() {
+function tick() {
   ReactDOM.render(
     <HelloWorld date={new Date()} />,
     document.getElementById('example')
   );
-}, 500);
+}
+
+setInterval(tick, 500);
 ```
 
 ## Reactive Updates
diff --git a/docs/04-multiple-components.md b/docs/04-multiple-components.md
index 24323a9c..c7447677 100644
--- a/docs/04-multiple-components.md
+++ b/docs/04-multiple-components.md
@@ -17,8 +17,8 @@ By building modular components that reuse other components with well-defined int
 Let's create a simple Avatar component which shows a Facebook page picture and name using the Facebook Graph API.
 
 ```javascript
-var Avatar = React.createClass({
-  render: function() {
+class Avatar extends React.Component {
+  render() {
     return (
       <div>
         <PagePic pagename={this.props.pagename} />
@@ -26,25 +26,25 @@ var Avatar = React.createClass({
       </div>
     );
   }
-});
+}
 
-var PagePic = React.createClass({
-  render: function() {
+class PagePic extends React.Component {
+  render() {
     return (
       <img src={'https://graph.facebook.com/' + this.props.pagename + '/picture'} />
     );
   }
-});
+}
 
-var PageLink = React.createClass({
-  render: function() {
+class PageLink extends React.Component {
+  render() {
     return (
       <a href={'https://www.facebook.com/' + this.props.pagename}>
         {this.props.pagename}
       </a>
     );
   }
-});
+}
 
 ReactDOM.render(
   <Avatar pagename="Engineering" />,
@@ -110,13 +110,12 @@ In most cases, this can be sidestepped by hiding elements instead of destroying
 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`:
 
 ```javascript
-  render: function() {
-    var results = this.props.results;
+  render() {
     return (
       <ol>
-        {results.map(function(result) {
-          return <li key={result.id}>{result.text}</li>;
-        })}
+        {this.props.results.map((result) => (
+          <li key={result.id}>{result.text}</li>
+        ))}
       </ol>
     );
   }
@@ -128,41 +127,41 @@ The `key` should *always* be supplied directly to the components in the array, n
 
 ```javascript
 // WRONG!
-var ListItemWrapper = React.createClass({
-  render: function() {
+class ListItemWrapper extends React.Component {
+  render() {
     return <li key={this.props.data.id}>{this.props.data.text}</li>;
   }
-});
-var MyComponent = React.createClass({
-  render: function() {
+}
+class MyComponent extends React.Component {
+  render() {
     return (
       <ul>
-        {this.props.results.map(function(result) {
-          return <ListItemWrapper data={result}/>;
-        })}
+        {this.props.results.map((result) => (
+          <ListItemWrapper data={result} />
+        )}
       </ul>
     );
   }
-});
+}
 ```
 ```javascript
 // Correct :)
-var ListItemWrapper = React.createClass({
-  render: function() {
+class ListItemWrapper extends React.Component {
+  render() {
     return <li>{this.props.data.text}</li>;
   }
-});
-var MyComponent = React.createClass({
-  render: function() {
+}
+class MyComponent extends React.Component {
+  render() {
     return (
       <ul>
-        {this.props.results.map(function(result) {
-           return <ListItemWrapper key={result.id} data={result}/>;
-        })}
+        {this.props.results.map((result) => (
+          <ListItemWrapper key={result.id} data={result} />
+        )}
       </ul>
     );
   }
-});
+}
 ```
 
 You can also key children by passing a ReactFragment object. See [Keyed Fragments](create-fragment.html) for more details.