rewrite pure function components as class based components to be able…

… to use livereload. This is a kind of paradigm regression but as I dont want to struggle for weeks with HMR, I prefer waiting to have someone more familiar with it have a look.
hartym · Apr 13, 2016 · d54f8e8 · d54f8e8
1 parent bd0a7c3
commit d54f8e8
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 108 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -14,6 +14,7 @@
     "jsx-quotes": [
       "error",
       "prefer-double"
-    ]
+    ],
+    "react/prefer-stateless-function": "off"
   }
 }
diff --git a/src/example/components/About.js b/src/example/components/About.js
@@ -1,23 +1,27 @@
 import React from 'react'
 import ReadTheDocs from './ReadTheDocs'
 
-const About = () => (
-  <div className="jumbotron">
-    <h1 className="display-3">About</h1>
-    <p className="lead">
-      LeanJS is written by Romain Dorgueil, taking inspiration from the bazillion starter kits
-      available out there.
-    </p>
-    <p className="lead">
-      «Same Same but Different.»
-    </p>
-    <p className="lead">
-      Leaner, mostly.
-    </p>
-    <p>
-      <ReadTheDocs />
-    </p>
-  </div>
-)
+class About extends React.Component {
+  render () {
+    return (
+      <div className="jumbotron">
+        <h1 className="display-3">About</h1>
+        <p className="lead">
+          LeanJS is written by Romain Dorgueil, taking inspiration from the bazillion starter kits
+          available out there.
+        </p>
+        <p className="lead">
+          «Same Same but Different.»
+        </p>
+        <p className="lead">
+          Leaner, mostly.
+        </p>
+        <p>
+          <ReadTheDocs />
+        </p>
+      </div>
+    )
+  }
+}
 
 export default About
diff --git a/src/example/components/Layout.js b/src/example/components/Layout.js
@@ -1,47 +1,50 @@
 import React from 'react'
 import { Link, IndexLink } from 'react-router'
 
-const Layout = ({ children }) => (
-  <div>
-    <nav className="navbar navbar-fixed-top navbar-light bg-faded">
-      <div className="container">
-        <IndexLink className="navbar-brand" to="/">
-          <i className="fa fa-code" />
-          {' '}
-          LeanJS
-        </IndexLink>
-        <ul className="nav navbar-nav">
-          <li className="nav-item">
-            <IndexLink className="nav-link" to="/" activeClassName="active">
-              Home
+class Layout extends React.Component {
+  render () {
+    return (
+      <div>
+        <nav className="navbar navbar-fixed-top navbar-light bg-faded">
+          <div className="container">
+            <IndexLink className="navbar-brand" to="/">
+              <i className="fa fa-code"/>
+              {' '}
+              LeanJS
             </IndexLink>
-          </li>
-          <li className="nav-item">
-            <Link className="nav-link" to="/about" activeClassName="active">
-              About
-            </Link>
-          </li>
-        </ul>
+            <ul className="nav navbar-nav">
+              <li className="nav-item">
+                <IndexLink className="nav-link" to="/" activeClassName="active">
+                  Home
+                </IndexLink>
+              </li>
+              <li className="nav-item">
+                <Link className="nav-link" to="/about" activeClassName="active">
+                  About
+                </Link>
+              </li>
+            </ul>
+          </div>
+        </nav>
+
+        <div className="container">
+          <div className="row">
+            {this.props.children}
+          </div>
+        </div>
+
+        <hr />
+
+        <footer>
+          <p>
+            This is a sample project that can be used as a base. Each libraries used or re-used is
+            subject to its own license, the glue is beerware.
+          </p>
+        </footer>
       </div>
-    </nav>
-
-    <div className="container">
-      <div className="row">
-        {children}
-      </div>
-    </div>
-
-    <hr />
-
-    <footer>
-      <p>
-        This is a sample project that can be used as a base. Each libraries used or re-used is
-        subject to its own
-        license, the glue is beerware.
-      </p>
-    </footer>
-  </div>
-)
+    )
+  }
+}
 
 Layout.propTypes = {
   children: React.PropTypes.oneOfType([

diff --git a/src/example/components/Lorem.js b/src/example/components/Lorem.js
@@ -1,11 +1,15 @@
 import React from 'react'
 import LoremColumn from './LoremColumn'
 
-const Lorem = () => (
-  <div className="row">
-    <LoremColumn className="col-lg-6" />
-    <LoremColumn className="col-lg-6" />
-  </div>
-)
+class Lorem extends React.Component {
+  render () {
+    return (
+      <div className="row">
+        <LoremColumn className="col-lg-6" />
+        <LoremColumn className="col-lg-6" />
+      </div>
+    )
+  }
+}
 
 export default Lorem
diff --git a/src/example/components/LoremColumn.js b/src/example/components/LoremColumn.js
@@ -1,40 +1,44 @@
 import React from 'react'
 
-const LoremColumn = ({ className }) => (
-  <div className={className}>
-    <h4>Subheading</h4>
-    <p>
-      Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.
-    </p>
-
-    <h4>Subheading</h4>
-    <p>
-      Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus
-      sit amet fermentum.
-    </p>
-
-    <h4>Subheading</h4>
-    <p>
-      Maecenas sed diam eget risus varius blandit sit amet non magna.
-    </p>
-
-    <h4>Subheading</h4>
-    <p>
-      Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.
-    </p>
-
-    <h4>Subheading</h4>
-    <p>
-      Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus
-      sit amet fermentum.
-    </p>
-
-    <h4>Subheading</h4>
-    <p>
-      Maecenas sed diam eget risus varius blandit sit amet non magna.
-    </p>
-  </div>
-)
+class LoremColumn extends React.Component {
+  render () {
+    return (
+      <div className={this.props.className}>
+        <h4>Subheading</h4>
+        <p>
+          Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.
+        </p>
+
+        <h4>Subheading</h4>
+        <p>
+          Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur
+          purus sit amet fermentum.
+        </p>
+
+        <h4>Subheading</h4>
+        <p>
+          Maecenas sed diam eget risus varius blandit sit amet non magna.
+        </p>
+
+        <h4>Subheading</h4>
+        <p>
+          Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.
+        </p>
+
+        <h4>Subheading</h4>
+        <p>
+          Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur
+          purus sit amet fermentum.
+        </p>
+
+        <h4>Subheading</h4>
+        <p>
+          Maecenas sed diam eget risus varius blandit sit amet non magna.
+        </p>
+      </div>
+    )
+  }
+}
 
 LoremColumn.propTypes = {
   className: React.PropTypes.string

diff --git a/src/example/components/ReadTheDocs.js b/src/example/components/ReadTheDocs.js
@@ -1,13 +1,17 @@
 import React from 'react'
 
-const ReadTheDocs = () => (
-  <a
-    className="btn btn-lg btn-success"
-    href="https://github.com/hartym/LeanJS/blob/master/README.rst"
-    target="_blank" role="button"
-  >
-    <i className="fa fa-book" />{' '}Read the docs
-  </a>
-)
+class ReadTheDocs extends React.Component {
+  render () {
+    return (
+      <a
+        className="btn btn-lg btn-success"
+        href="https://github.com/hartym/LeanJS/blob/master/README.rst"
+        target="_blank" role="button"
+      >
+        <i className="fa fa-book" />{' '}Read the docs
+      </a>
+    );
+  }
+}
 
 export default ReadTheDocs