updates

Author: codylindley

.eslintrc.json

@@ -0,0 +1,31 @@
+{
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "experimentalObjectRestSpread": true,
+            "jsx": true
+        },
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "single"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ]
+    }
+}

basic-react-components/4.2.md

@@ -25,7 +25,7 @@ String, naming the component, used in debugging messages. If using JSX this is s
 Callback function invoked once immediately before the initial rendering occurs
 ***
 [`componentDidMount`](http://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount) :
-Callback function immediately after the initial rendering occurs
+Callback function invoked immediately after the initial rendering occurs
 ***
 [`componentWillReceiveProps`](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops) :
 Callback function invoked when a component is receiving new props
@@ -43,33 +43,9 @@ Callback function invoked immediately after the component's updates are flushed
 Callback function invoked immediately before a component is unmounted from the DOM
 ***
 
-An example of creating a React component with both state and props is shown below.
-
-```
-var Timer = React.createClass({
-  getInitialState: function() {
-    return {secondsElapsed: Number(this.props.startTime) || 0};
-  },
-  tick: function() {
-    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
-  },
-  componentDidMount: function() {
-    this.interval = setInterval(this.tick, 1000);
-  },
-  componentWillUnmount: function() {
-    clearInterval(this.interval);
-  },
-  render: function() {
-    return (
-      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
-    );
-  }
-});
-
-ReactDOM.render(<Timer startTime="60" />, app);
-```
-
+An example of creating a React component, using `React.createClass()`, with both state and props is shown below.
 
+[source code](https://jsfiddle.net/12u58fjb/#tabs=js,result,html,resources)
 
 #### Notes
 

package.json

@@ -17,6 +17,11 @@
   },
   "homepage": "https://github.com/FrontendMasters/react-enlightenment#readme",
   "devDependencies": {
+    "eslint": "^2.7.0",
+    "eslint-config-standard": "^5.1.0",
+    "eslint-plugin-promise": "^1.1.0",
+    "eslint-plugin-react": "^4.3.0",
+    "eslint-plugin-standard": "^1.3.2",
     "gitbook-plugin-jsfiddle": "^1.0.0"
   }
 }

test.js

@@ -0,0 +1,26 @@
+var Timer = React.createClass({
+    getInitialState: function() {
+        return {
+            secondsElapsed: Number(this.props.startTime) || 0
+        };
+    },
+    tick: function() {
+        this.setState({
+            secondsElapsed: this.state.secondsElapsed + 1
+        });
+    },
+    componentDidMount: function() {
+        this.interval = setInterval(this.tick, 1000);
+    },
+    componentWillUnmount: function() {
+        clearInterval(this.interval);
+    },
+    render: function() {
+        return (
+            <div>
+                Seconds Elapsed: {this.state.secondsElapsed}
+            </div>
+        );
+    }
+});
+ReactDOM.render(< Timer startTime = "60" / >, app);