Use function components in example/readme

zpao · zpao · commit 22847fbcdc44 · 2018-11-18T12:48:28.000-08:00
diff --git a/README.md b/README.md
@@ -53,10 +53,8 @@ Your views should be node modules that export a React component. Let's assume yo
 ```js
 var React = require('react');
 
-class HelloMessage extends React.Component {
-  render() {
-    return <div>Hello {this.props.name}</div>;
-  }
+function HelloMessage(props) {
+  return <div>Hello {props.name}</div>;
 }
 
 module.exports = HelloMessage;
@@ -90,15 +88,13 @@ Simply pass the relevant props to a layout component.
 ```js
 var React = require('react');
 
-class DefaultLayout extends React.Component {
-  render() {
-    return (
-      <html>
-        <head><title>{this.props.title}</title></head>
-        <body>{this.props.children}</body>
-      </html>
-    );
-  }
+function DefaultLayout(props) {
+  return (
+    <html>
+      <head><title>{props.title}</title></head>
+      <body>{props.children}</body>
+    </html>
+  );
 }
 
 module.exports = DefaultLayout;
@@ -109,14 +105,12 @@ module.exports = DefaultLayout;
 var React = require('react');
 var DefaultLayout = require('./layouts/default');
 
-class HelloMessage extends React.Component {
-  render() {
-    return (
-      <DefaultLayout title={this.props.title}>
-        <div>Hello {this.props.name}</div>
-      </DefaultLayout>
-    );
-  }
+function HelloMessage(props) {
+  return (
+    <DefaultLayout title={props.title}>
+      <div>Hello {props.name}</div>
+    </DefaultLayout>
+  );
 }
 
 module.exports = HelloMessage;
diff --git a/examples/simple/views/index.jsx b/examples/simple/views/index.jsx
@@ -11,19 +11,17 @@ function countTo(n: number): string {
   return a.join(', ');
 }
 
-class Index extends React.Component {
-  render() {
-    return (
-      <Layout title={this.props.title}>
-        <h1>{this.props.title}</h1>
-        <p>Welcome to {this.props.title}</p>
-        <p>
-          I can count to 10:
-          {countTo(10)}
-        </p>
-      </Layout>
-    );
-  }
+function Index(props) {
+  return (
+    <Layout title={props.title}>
+      <h1>{props.title}</h1>
+      <p>Welcome to {props.title}</p>
+      <p>
+        I can count to 10:
+        {countTo(10)}
+      </p>
+    </Layout>
+  );
 }
 
 Index.propTypes = {
diff --git a/examples/simple/views/layout.jsx b/examples/simple/views/layout.jsx
@@ -1,28 +1,26 @@
 var React = require('react');
 var PropTypes = require('prop-types');
 
-class Layout extends React.Component {
-  render() {
-    return (
-      <html>
-        <head>
-          <title>{this.props.title}</title>
-          <link rel="stylesheet" href="/stylesheets/style.css" />
-          <script
-            dangerouslySetInnerHTML={{
-              __html: `
-            // This is making use of ES6 template strings, which allow for
-            // multiline strings. We specified "{jsx: {harmony: true}}" when
-            // creating the engine in app.js to get this feature.
-            console.log("hello world");
-          `,
-            }}
-          />
-        </head>
-        <body>{this.props.children}</body>
-      </html>
-    );
-  }
+function Layout(props) {
+  return (
+    <html>
+      <head>
+        <title>{props.title}</title>
+        <link rel="stylesheet" href="/stylesheets/style.css" />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+          // This is making use of ES6 template strings, which allow for
+          // multiline strings. We specified "{jsx: {harmony: true}}" when
+          // creating the engine in app.js to get this feature.
+          console.log("hello world");
+        `,
+          }}
+        />
+      </head>
+      <body>{props.children}</body>
+    </html>
+  );
 }
 
 Layout.propTypes = {
