Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions src/pages/examples/class-components.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
---
name: Class Components
route: /examples/class-components
menu: Examples
---

import SEO from '../../components/Seo';

<SEO
description="Using TypeScript with React class components."
title="Class Components"
keywords={['class components']}
/>

# 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<MyProps, MyState> {
state: MyState = {
// optional second annotation for better type inference
count: 0,
};
render() {
return (
<div>
{this.props.message} {this.state.count}
</div>
);
}
}
```
2 changes: 1 addition & 1 deletion src/pages/examples/hocs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ menu: Examples
import SEO from '../../components/Seo';

<SEO
description="Using TypeScript with higher order components or HOCs."
description="Using TypeScript with higher order components or HOCs in React."
title="Higher Order Components (HOCs)"
keywords={['higher-order components', 'higher order components', 'hocs']}
/>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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!