Merge pull request #62 from locol23/feature/add-use-effect-goal

locol23 · web-flow · commit f8f0e65be7d1 · 2020-05-28T20:24:49.000+09:00
feat: add useEffect Goal
diff --git a/README.md b/README.md
@@ -22,6 +22,7 @@ Learn React with TypeScript
     - [Goal](https://github.com/locol23/learn-react-typescript/tree/master/packages/hooks-state-goal)
   - useEffect
     - [Base](./packages/hooks-use-effect-base)
+    - [Goal](./packages/hooks-use-effect-goal)
   - useContext
     - [Base](./packages/hooks-use-context-base)
   - State(useReducer)
diff --git a/packages/hooks-use-effect-goal/.babelrc b/packages/hooks-use-effect-goal/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["react", ["env", {"targets": {"chorme": 67} }]],
+  "plugins": ["transform-object-rest-spread", "transform-class-properties"]
+}
diff --git a/packages/hooks-use-effect-goal/README.md b/packages/hooks-use-effect-goal/README.md
@@ -0,0 +1,18 @@
+# hooks-use-effect-goal
+
+[Hooks API Reference](https://reactjs.org/docs/hooks-reference.html)
+
+## useEffect
+
+```tsx
+const App = () => {
+  const [title, setTitle] = useState('Initial Title')
+
+  useEffect(() => {
+    setTitle('Use Effect')
+  }, [])
+
+  return <h1>{title}</h1>
+}
+```
+
diff --git a/packages/hooks-use-effect-goal/package-lock.json b/packages/hooks-use-effect-goal/package-lock.json
diff --git a/packages/hooks-use-effect-goal/package.json b/packages/hooks-use-effect-goal/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "hooks-use-effect-goal",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "https://github.com/locol23/learn-react-ts.git",
+  "license": "MIT",
+  "scripts": {
+    "clean": "rimraf dist",
+    "parcel:dev": "parcel src/index.html",
+    "parcel:prod": "parcel build src/index.html",
+    "dev": "run-s clean parcel:dev",
+    "build": "run-s clean parcel:prod"
+  },
+  "dependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.35",
+    "@types/react-dom": "^16.9.8",
+    "babel-core": "^6.26.3",
+    "npm-run-all": "^4.1.5",
+    "parcel-bundler": "^1.12.4",
+    "rimraf": "^3.0.0"
+  }
+}
diff --git a/packages/hooks-use-effect-goal/src/components/App.tsx b/packages/hooks-use-effect-goal/src/components/App.tsx
@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react'
+
+export const App = () => {
+  const [title, setTitle] = useState('Initial Title')
+
+  useEffect(() => {
+    setTimeout(() => {
+      setTitle('Use Effect')
+    }, 2000)
+  }, [])
+
+  const [text, setText] = useState('Initial Text')
+  const handlerOne = () => setText('Text 1')
+  const handlerTwo = () => setText('Text 2')
+
+  useEffect(() => console.log(`current text is ${text}`), [text])
+
+  const createSession = () => console.log('create session')
+  const postData = (data: { name: string }) => console.log('post data', data)
+  const closeSession = () => console.log('close session')
+
+  useEffect(() => {
+    createSession()
+    postData({ name: 'Tom' })
+
+    return closeSession()
+  }, [])
+
+  return (
+    <>
+      <h1>{title}</h1>
+      <div>{text}</div>
+      <button onClick={handlerOne}>click1</button>
+      <button onClick={handlerTwo}>click2</button>
+    </>
+  )
+}
diff --git a/packages/hooks-use-effect-goal/src/index.html b/packages/hooks-use-effect-goal/src/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>React Typescript Boilerplate</title>
+</head>
+<body>
+  <div id="app">Loading...</div>
+  <script src="index.tsx"></script>
+</body>
+</html>
diff --git a/packages/hooks-use-effect-goal/src/index.tsx b/packages/hooks-use-effect-goal/src/index.tsx
@@ -0,0 +1,5 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { App } from './components/App'
+
+ReactDOM.render(<App />, document.getElementById('app'))
diff --git a/packages/hooks-use-effect-goal/tsconfig.json b/packages/hooks-use-effect-goal/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "ES2015",
+    "allowJs": false,
+    "jsx": "react",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "strictPropertyInitialization": true,
+    "rootDir": "src",
+    "outDir": "./dist/"
+  },
+  "exclude": ["dist", "node_modules"]
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "presets": ["react", ["env", {"targets": {"chorme": 67} }]],
 +  "plugins": ["transform-object-rest-spread", "transform-class-properties"]
 +}