From c9c581ebd22af8933283880a69685c39014cc764 Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Sun, 27 Jan 2019 03:52:08 +0900 Subject: [PATCH 1/6] Add the example for useState to playground --- playground/src/hooks/use-state.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 playground/src/hooks/use-state.tsx diff --git a/playground/src/hooks/use-state.tsx b/playground/src/hooks/use-state.tsx new file mode 100644 index 0000000..12a5867 --- /dev/null +++ b/playground/src/hooks/use-state.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; + +interface CounterProps { + initialCount: number; +} + +export default function Counter({initialCount}: CounterProps) { + const [count, setCount] = React.useState(initialCount); + return ( + <> + Count: {count} + + + + + ); +} From 3f1b6d5890d3794ef3317433c609ec9ddba24657 Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Sun, 27 Jan 2019 03:55:23 +0900 Subject: [PATCH 2/6] Modify to add useState example to README_SOURCE --- README_SOURCE.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/README_SOURCE.md b/README_SOURCE.md index fa2a059..044048a 100644 --- a/README_SOURCE.md +++ b/README_SOURCE.md @@ -313,6 +313,14 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({ > https://reactjs.org/docs/hooks-intro.html +#### - useState + +> https://reactjs.org/docs/hooks-reference.html#usestate + +::codeblock='playground/src/hooks/use-state.tsx':: + +[⇧ back to top](#table-of-contents) + #### - useReducer Hook for state management like Redux in a function component. From 6fcd440348ca249e1683d1a9367e6c1822b57f85 Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Sun, 27 Jan 2019 03:56:16 +0900 Subject: [PATCH 3/6] Modify to generate new README.md --- README.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/README.md b/README.md index 173ab24..bde0422 100644 --- a/README.md +++ b/README.md @@ -770,6 +770,33 @@ export default () => ( > https://reactjs.org/docs/hooks-intro.html +#### - useState + +> https://reactjs.org/docs/hooks-reference.html#usestate + +```tsx +import * as React from 'react'; + +interface CounterProps { + initialCount: number; +} + +export default function Counter({initialCount}: CounterProps) { + const [count, setCount] = React.useState(initialCount); + return ( + <> + Count: {count} + + + + + ); +} + +``` + +[⇧ back to top](#table-of-contents) + #### - useReducer Hook for state management like Redux in a function component. From c13d8100307937bc953d7c08b97c71bb69718b88 Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Sun, 27 Jan 2019 04:04:10 +0900 Subject: [PATCH 4/6] Modify to remove unnecessary type arg --- README.md | 2 +- playground/src/hooks/use-state.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index bde0422..09c6e32 100644 --- a/README.md +++ b/README.md @@ -782,7 +782,7 @@ interface CounterProps { } export default function Counter({initialCount}: CounterProps) { - const [count, setCount] = React.useState(initialCount); + const [count, setCount] = React.useState(initialCount); return ( <> Count: {count} diff --git a/playground/src/hooks/use-state.tsx b/playground/src/hooks/use-state.tsx index 12a5867..6832f67 100644 --- a/playground/src/hooks/use-state.tsx +++ b/playground/src/hooks/use-state.tsx @@ -5,7 +5,7 @@ interface CounterProps { } export default function Counter({initialCount}: CounterProps) { - const [count, setCount] = React.useState(initialCount); + const [count, setCount] = React.useState(initialCount); return ( <> Count: {count} From efdbbc0ed5cf349705449e9f686abe7cbdbd22d7 Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Sun, 27 Jan 2019 04:33:30 +0900 Subject: [PATCH 5/6] Modify to use 'type' instead of 'interface' when we declare Props type definition --- playground/src/hooks/use-state.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/playground/src/hooks/use-state.tsx b/playground/src/hooks/use-state.tsx index 6832f67..3a7413a 100644 --- a/playground/src/hooks/use-state.tsx +++ b/playground/src/hooks/use-state.tsx @@ -1,10 +1,8 @@ import * as React from 'react'; -interface CounterProps { - initialCount: number; -} +type Props = { initialCount: number }; -export default function Counter({initialCount}: CounterProps) { +export default function Counter({initialCount}: Props) { const [count, setCount] = React.useState(initialCount); return ( <> From 33a43119e39a89d754477f7323ed4d6d011ff79d Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Sun, 27 Jan 2019 04:34:02 +0900 Subject: [PATCH 6/6] Modify to generate new README.md --- README.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 09c6e32..7172f08 100644 --- a/README.md +++ b/README.md @@ -777,11 +777,9 @@ export default () => ( ```tsx import * as React from 'react'; -interface CounterProps { - initialCount: number; -} +type Props = { initialCount: number }; -export default function Counter({initialCount}: CounterProps) { +export default function Counter({initialCount}: Props) { const [count, setCount] = React.useState(initialCount); return ( <>