docs: hooks rules

Author: mujue

.eslintrc

@@ -0,0 +1,33 @@
+{
+  "extends": [
+    "airbnb",
+    "plugin:jsx-a11y/recommended",
+    "prettier",
+    "prettier/react"
+  ],
+  "plugins": [
+    "jsx-a11y",
+    "prettier",
+    // "react-hooks"
+  ],
+  "rules": {
+    // "react-hooks/rules-of-hooks": 2, // Checks rules of Hooks
+    // "react-hooks/exhaustive-deps": 1, // Checks effect dependencies
+    "semi": 0,
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [
+          ".js",
+          ".jsx"
+        ]
+      }
+    ],
+    "prettier/prettier": [
+      "error",
+      {
+        "semi": false
+      }
+    ]
+  }
+}

.npmrc

@@ -1,2 +1,2 @@
 # .npmrc
-registry=https://registry.npmjs.org/
+registry=http://r.cnpmjs.org/

.yarnrc

@@ -1,3 +1,3 @@
 # .yarnrc
 
-registry "https://registry.npmjs.org/"
+registry "http://r.cnpmjs.org/"

package.json

@@ -10,18 +10,28 @@
     "react-scripts": "2.1.8"
   },
   "devDependencies": {
+    "eslint": "^7.5.0",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.20.4",
+    "eslint-plugin-react-hooks": "^4.0.8",
+    "prettier": "^2.0.5",
     "typescript": "3.3.3"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint ."
   },
   "browserslist": [
     ">0.2%",
     "not dead",
     "not ie <= 11",
     "not op_mini all"
   ]
-}
+}

src/index.js

@@ -1,9 +1,11 @@
+/* eslint-disable no-unused-vars */
 import React from "react"
 import ReactDOM from "react-dom"
-import { HookApp, ClassApp } from './tasks/task1'
-import { Demo } from './tasks/task2'
-import { RuleCase } from "./tasks/task3";
-import useInterval from './useInterval'
+// eslint-disable-next-line import/named
+import { HookApp, ClassApp } from "./tasks/task1"
+import Demo from "./tasks/task2"
+import RuleCase from "./tasks/task3_if_rule"
+import useInterval from "./useInterval"
 import "./styles.css"
 
 function View() {
@@ -16,8 +18,9 @@ function View() {
       {/* <Demo /> */}
       <RuleCase />
     </>
-  );
+  )
 }
 
-const rootElement = document.getElementById("root");
-ReactDOM.render(<View />, rootElement);
+// eslint-disable-next-line no-undef
+const rootElement = document.getElementById("root")
+ReactDOM.render(<View />, rootElement)

src/tasks/task2.js

@@ -3,7 +3,7 @@ import React from "react"
 const { useState, useEffect } = React
 
 function Demo() {
-  const [count, setCount] = React.useState(0)
+  const [count, setCount] = useState(0)
 
   useEffect(() => {
     const id = setInterval(() => {
@@ -18,4 +18,4 @@ function Demo() {
   return <div>Count: {count}</div>
 }
 
-export { Demo }
+export default Demo

src/tasks/task3.js

@@ -0,0 +1,20 @@
+/* eslint-disable no-unused-vars */
+import React from "react"
+
+const { useState, useEffect, useReducer } = React
+
+// common case
+function RuleCase() {
+  const [value, forceUpdate] = useReducer((n) => n + 1, 0)
+  const [a, setA] = useState(1)
+  if (Math.floor(Math.random() * 100) > 50) {
+    useEffect(() => {
+      forceUpdate()
+    }, [])
+    return <div>render one</div>
+  }
+
+  return <div>render two</div>
+}
+
+export default RuleCase