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 b453d16..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)'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!