feat: add useState base

locol23 · locol23 · commit 8117fb80eb31 · 2020-05-28T21:31:16.000+09:00
diff --git a/README.md b/README.md
@@ -17,6 +17,8 @@ Learn React with TypeScript
   - State(withStateHandlers)
     - [Base](https://github.com/locol23/learn-react-typescript/tree/master/packages/recompose-state-base)
 - React Hooks
+  - useState
+    - [Base](./packages/hooks-use-state-base)
   - useEffect
     - [Base](./packages/hooks-use-effect-base)
     - [Goal](./packages/hooks-use-effect-goal)
diff --git a/packages/hooks-use-state-base/README.md b/packages/hooks-use-state-base/README.md
@@ -0,0 +1,20 @@
+# hooks-use-state-base
+
+[Hooks API Reference](https://reactjs.org/docs/hooks-reference.html)
+
+## useEffect
+
+```tsx
+const App = () => {
+  const [title, setTitle] = useState<string>('Initial Title')
+  const handler = () => setTitle('Change Title')
+
+  return (
+    <>
+      <h1>{title}</h1>
+      <button onClick={handler}>click</button>
+    </>
+  )
+}
+```
+
diff --git a/packages/hooks-use-state-base/package-lock.json b/packages/hooks-use-state-base/package-lock.json
diff --git a/packages/hooks-use-state-base/package.json b/packages/hooks-use-state-base/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "hooks-use-state-base",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "https://github.com/locol23/learn-react-ts.git",
+  "license": "MIT",
+  "scripts": {
+    "clean": "rimraf dist .cache",
+    "parcel:dev": "parcel src/index.html --open",
+    "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",
+    "npm-run-all": "^4.1.5",
+    "parcel-bundler": "^1.12.4",
+    "rimraf": "^3.0.0",
+    "typescript": "^3.9.3"
+  }
+}
diff --git a/packages/hooks-use-state-base/src/components/App.tsx b/packages/hooks-use-state-base/src/components/App.tsx
@@ -0,0 +1,14 @@
+import React, { useState } from 'react'
+
+export const App = () => {
+  const [title, setTitle] = useState<string>('Initial Title')
+  const handler = () => setTitle('Change Title')
+
+  return (
+    <>
+      <h1>{title}</h1>
+      <button onClick={handler}>click</button>
+    </>
+  )
+}
+
diff --git a/packages/hooks-use-state-base/src/index.html b/packages/hooks-use-state-base/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-state-base/src/index.tsx b/packages/hooks-use-state-base/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-state-base/tsconfig.json b/packages/hooks-use-state-base/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "CommonJS",
+    "lib": ["ESNext", "DOM"],
+    "allowJs": false,
+    "jsx": "react",
+    "removeComments": true,
+    "strict": true,
+    "moduleResolution": "Node",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["./src/**/*"],
+  "exclude": ["./node_modules"]
+}
