From af2077cda19b348796bfd8582999aa00ec6c9bb9 Mon Sep 17 00:00:00 2001 From: Aryan Jabbari Date: Sat, 18 May 2019 18:36:42 -0400 Subject: [PATCH 1/2] Edit sentence --- src/pages/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/index.mdx b/src/pages/index.mdx index b453d16..ce48146 100644 --- a/src/pages/index.mdx +++ b/src/pages/index.mdx @@ -19,6 +19,6 @@ Visit the [GitHub repository](https://github.com/AryanJ-NYC/reactandtypescript.d For questions that are not covered in the documentation or to chat about React + TypeScript, join our [Spectrum Chat](https://spectrum.chat/react-and-typescript). -A special thank you to [@swyx](https://twitter.com/swyx)'s [React TypeScript cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet). +A special thank you to [@swyx](https://twitter.com/swyx) for starting the [React TypeScript cheatsheet](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet) and inspiring the existence of this website.. Lastly, tweet me at [@AryanJabbari](https://twitter.com/AryanJabbari). Words of encouragement are always welcome! From b59725b95218c1df162a7d2da4677230ab6cdca3 Mon Sep 17 00:00:00 2001 From: Aryan Jabbari Date: Sat, 18 May 2019 18:57:04 -0400 Subject: [PATCH 2/2] Add class components page. Closes #8. --- src/pages/examples/class-components.mdx | 42 +++++++++++++++++++++++++ src/pages/examples/hocs.mdx | 2 +- src/pages/index.mdx | 2 +- 3 files changed, 44 insertions(+), 2 deletions(-) create mode 100644 src/pages/examples/class-components.mdx diff --git a/src/pages/examples/class-components.mdx b/src/pages/examples/class-components.mdx new file mode 100644 index 0000000..5652f10 --- /dev/null +++ b/src/pages/examples/class-components.mdx @@ -0,0 +1,42 @@ +--- +name: Class Components +route: /examples/class-components +menu: Examples +--- + +import SEO from '../../components/Seo'; + + + +# Class Components + +`React.Component` is used to describe a class component. `React.Component` is a generic type that takes two **_optional_** type variables, `PropType` and `StateType`. + +The following example is from the [react-typescript-cheatsheet](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet). + +```typescript +type MyProps = { + // using `interface` is also ok + message: string; +}; +type MyState = { + count: number; // like this +}; +class App extends React.Component { + state: MyState = { + // optional second annotation for better type inference + count: 0, + }; + render() { + return ( +
+ {this.props.message} {this.state.count} +
+ ); + } +} +``` diff --git a/src/pages/examples/hocs.mdx b/src/pages/examples/hocs.mdx index 7717856..7a2c2a9 100644 --- a/src/pages/examples/hocs.mdx +++ b/src/pages/examples/hocs.mdx @@ -7,7 +7,7 @@ menu: Examples import SEO from '../../components/Seo'; diff --git a/src/pages/index.mdx b/src/pages/index.mdx index ce48146..c07a3ab 100644 --- a/src/pages/index.mdx +++ b/src/pages/index.mdx @@ -19,6 +19,6 @@ Visit the [GitHub repository](https://github.com/AryanJ-NYC/reactandtypescript.d For questions that are not covered in the documentation or to chat about React + TypeScript, join our [Spectrum Chat](https://spectrum.chat/react-and-typescript). -A special thank you to [@swyx](https://twitter.com/swyx) for starting the [React TypeScript cheatsheet](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet) and inspiring the existence of this website.. +A special thank you to [@swyx](https://twitter.com/swyx) for starting the [React TypeScript cheatsheet](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet) and inspiring the existence of this website. Lastly, tweet me at [@AryanJabbari](https://twitter.com/AryanJabbari). Words of encouragement are always welcome!