Skip to content

Commit 4ce53bc

Browse files
author
Islam Attrash
authored
Merge branch 'master' into master
2 parents c290af0 + 04fe13e commit 4ce53bc

File tree

1 file changed

+125
-93
lines changed

1 file changed

+125
-93
lines changed

‎README.md

Lines changed: 125 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,30 @@
55

66
<summary><b>Table of Contents</b></summary>
77

8-
- [Prerequisites](#prerequisites)
9-
- [React + Typescript Starter Kits](#react---typescript-starter-kits)
10-
- [Import React](#import-react)
11-
- [Stateless Functional Components](#stateless-functional-components)
12-
- [Stateful Class-based Components](#stateful-class-based-components)
13-
- [Typing DefaultProps](#typing-defaultprops)
14-
- [Extracting Prop Types](#extracting-prop-types)
15-
- [Basic Prop Types Examples](#basic-prop-types-examples)
16-
- [Useful React Type Examples](#useful-react-type-examples)
17-
- [Forms and Events](#forms-and-events)
18-
- [Higher Order Components/Render Props](#higher-order-components-render-props)
19-
- [References/createRef](#references-createref)
20-
- [Component/Design System Development](#component-design-system-development)
21-
- [Building](#building)
22-
- [Prettier + TSLint](#prettier---tslint)
23-
- [Working with Non-Typescript Libraries (writing your own index.d.ts)](#working-with-non-typescript-libraries--writing-your-own-indexdts-)
8+
- [Section 1: Setup](#section-1--setup)
9+
* [Prerequisites](#prerequisites)
10+
* [React + Typescript Starter Kits](#react---typescript-starter-kits)
11+
* [Import React](#import-react)
12+
- [Section 2: Getting Started](#section-2--getting-started)
13+
* [Stateless Functional Components](#stateless-functional-components)
14+
* [Stateful Class-based Components](#stateful-class-based-components)
15+
* [Typing DefaultProps](#typing-defaultprops)
16+
* [Extracting Prop Types](#extracting-prop-types)
17+
* [Basic Prop Types Examples](#basic-prop-types-examples)
18+
* [Useful React Type Examples](#useful-react-type-examples)
19+
* [Forms and Events](#forms-and-events)
20+
- [Section 3: Advanced Guides](#section-3--advanced-guides)
21+
* [Higher Order Components/Render Props](#higher-order-components-render-props)
22+
* [Context](#context)
23+
* [Forwarding References/createRef](#forwarding-references-createref)
24+
* [Portals](#portals)
25+
* [Error Boundaries](#error-boundaries)
26+
* [Timeout/Placeholder/createFetcher](#timeout-placeholder-createfetcher)
27+
- [Section 4: Misc. Concerns](#section-4--misc-concerns)
28+
* [Component/Design System Development](#component-design-system-development)
29+
* [Building](#building)
30+
* [Prettier + TSLint](#prettier---tslint)
31+
* [Working with Non-Typescript Libraries (writing your own index.d.ts)](#working-with-non-typescript-libraries--writing-your-own-indexdts-)
2432
- [Troubleshooting Handbook: Types](#troubleshooting-handbook--types)
2533
* [Union types](#union-types)
2634
* [Optional Types](#optional-types)
@@ -37,26 +45,27 @@
3745

3846
</details>
3947

48+
# Section 1: Setup
4049

41-
# Prerequisites
50+
## Prerequisites
4251

4352
1. good understanding of [React](https://reactjs.org)
4453
2. familiarity with [Typescript Types](https://www.typescriptlang.org/docs/handbook/basic-types.html)
4554
3. having read [the Typescript section in the official React docs](https://reactjs.org/docs/static-type-checking.html#typescript).
4655
4. (optional) Read Microsoft's [TypeScript-React-Starter](https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter) docs.
4756

48-
# React + Typescript Starter Kits
57+
## React + Typescript Starter Kits
4958

5059
1. <https://github.com/wmonk/create-react-app-typescript> is the officially recommended Typescript fork of `create-react-app`.
5160

52-
> CodeSandbox has a [React TypeScript template](https://codesandbox.io/s/react-ts) based on this project.
53-
61+
> CodeSandbox has a [React TypeScript template](https://codesandbox.io/s/react-ts) based on this project. *Contributed by: [@antmdvs](https://github.com/sw-yx/react-typescript-cheatsheet/pull/11)*
62+
5463
2. <https://github.com/sw-yx/create-react-app-parcel-typescript> sets up a React + Typescript app with Parcel :)
5564
3. <https://github.com/basarat/typescript-react/tree/master/01%20bootstrap> for manual setup of React + Typescript + Webpack + Babel
5665

5766
In particular, make sure that you have `@types/react` and `@types/react-dom` installed. [Read more about the DefinitelyTyped project if you are unfamiliar](https://definitelytyped.org/).
5867

59-
# Import React
68+
## Import React
6069

6170
```tsx
6271
import * as React from 'react';
@@ -80,7 +89,11 @@ Please PR or [File an issue](https://github.com/sw-yx/react-typescript-cheatshee
8089
</details>
8190

8291

83-
# Stateless Functional Components
92+
# Section 2: Getting Started
93+
94+
## Stateless Functional Components
95+
96+
*Contributed by: [@jasanst](https://github.com/sw-yx/react-typescript-cheatsheet/pull/9)*
8497

8598
You can specify the type of props as you destructure them:
8699

@@ -96,14 +109,9 @@ const App: React.SFC<{ message: string }> = ({ message }) => <div>{message}</div
96109

97110
Quite frankly I prefer the former pattern as it's shorter.
98111

99-
<details>
112+
[Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new).
100113

101-
<summary>Explanation</summary>
102-
103-
This is not yet written. Please PR or [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new) with your suggestions!
104-
</details>
105-
106-
# Stateful Class-based Components
114+
## Stateful Class-based Components
107115

108116
Within Typescript, `React.Component` is a generic type (aka `React.Component<PropType, StateType>`), so you actually want to provide it with prop and (optionally) state types:
109117

@@ -127,7 +135,7 @@ class App extends React.Component<{
127135
}, {
128136
count: number, // this is the state type
129137
}> {
130-
state = {
138+
state = {
131139
count: 0
132140
}
133141
render() {
@@ -179,14 +187,12 @@ class App extends React.Component<{
179187
}
180188
}
181189
```
182-
<details>
183190

184-
<summary>Explanation</summary>
191+
[Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new).
185192

186-
This is not yet written. Please PR or [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new) with your suggestions!
187-
</details>
193+
## Typing DefaultProps
188194

189-
# Typing DefaultProps
195+
It is easy to [type defaults for functional components](https://twitter.com/GeeWengel/status/1000242363376205825), but there is some debate in the community on how to type the `static defaultProps` field for class-based components.
190196

191197
It is easy to type a defaultProps static member of a React component. There's more than one way to do it, but since we want to show the neatest code as possible
192198
we choosed to propose this way of implementing them:
@@ -234,10 +240,9 @@ The problem with this approach that if we need to add another prop in the future
234240
`IMyComponentDefaultProps`!
235241
</details>
236242

243+
## Extracting Prop Types
237244

238-
# Extracting Prop Types
239-
240-
Instead of defining prop types inline, you can declare them separately (useful for reusability or code organization):
245+
Instead of defining prop types *inline*, you can declare them separately (useful for reusability or code organization):
241246

242247
```tsx
243248
type AppProps = { message: string }
@@ -267,14 +272,9 @@ class App extends React.Component<AppProps, AppState> {
267272

268273
`interface`s are different from `type`s in Typescript, but for our purposes they do the same things. [read more](https://medium.com/@martin_hotell/interface-vs-type-alias-in-typescript-2-7-2a8f1777af4c)
269274

270-
<details>
271-
272-
<summary>Explanation</summary>
273-
274-
This is not yet written. Please PR or [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new) with your suggestions!
275-
</details>
275+
[Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new).
276276

277-
# Basic Prop Types Examples
277+
## Basic Prop Types Examples
278278

279279
```tsx
280280
type AppProps = {
@@ -299,7 +299,7 @@ type AppProps = {
299299
}
300300
```
301301
302-
# Useful React Type Examples
302+
## Useful React Type Examples
303303
304304
```tsx
305305
export declare interface AppProps {
@@ -313,14 +313,9 @@ export declare interface AppProps {
313313
}
314314
```
315315

316-
<details>
317-
318-
<summary>Explanation</summary>
319-
320-
This is not yet written. Please PR or [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new) with your suggestions!
321-
</details>
316+
[Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new).
322317

323-
# Forms and Events
318+
## Forms and Events
324319

325320
This can be a bit tricky. The tooling really comes in handy here, as the @type definitions come with a wealth of typing. Type what you are looking for and usually the autocomplete will help you out. Here is what it looks like for an `onChange` for a form event:
326321

@@ -349,14 +344,11 @@ class App extends React.Component<{}, { // no props
349344
}
350345
```
351346

352-
<details>
347+
[Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new).
353348

354-
<summary>Explanation</summary>
355-
356-
This is not yet written. Please PR or [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new) with your suggestions!
357-
</details>
349+
# Section 3: Advanced Guides
358350

359-
# Higher Order Components/Render Props
351+
## Higher Order Components/Render Props
360352

361353
Sometimes you will want to write a function that can take a React element or a string or something else as a prop. The best Type to use for such a situation is `React.ReactNode` which fits anywhere a normal, well, React Node would fit:
362354

@@ -384,14 +376,60 @@ export interface Props {
384376
}
385377
```
386378

387-
<details>
379+
[Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new).
388380

389-
<summary>Explanation</summary>
381+
## Context
390382

391-
This is not yet written. Please PR or [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new) with your suggestions!
392-
</details>
383+
*Contributed by: [@jpavon](https://github.com/sw-yx/react-typescript-cheatsheet/pull/13)*
384+
385+
Using the new context API `React.createContext`:
386+
387+
```tsx
388+
interface ProviderState {
389+
themeColor: string
390+
}
391+
392+
interface UpdateStateArg {
393+
key: keyof ProviderState
394+
value: string
395+
}
396+
397+
interface ProviderStore {
398+
state: ProviderState
399+
update: (arg: UpdateStateArg) => void
400+
}
393401

394-
# References/createRef
402+
const Context = React.createContext({} as ProviderStore)
403+
404+
class Provider extends React.Component<{}, ProviderState> {
405+
public readonly state = {
406+
themeColor: 'red'
407+
}
408+
409+
private update = ({ key, value }: UpdateStateArg) => {
410+
this.setState({ [key]: value })
411+
}
412+
413+
public render() {
414+
const store: ProviderStore = {
415+
state: this.state,
416+
update: this.update
417+
}
418+
419+
return (
420+
<Context.Provider value={store}>
421+
{this.props.children}
422+
</Context.Provider>
423+
)
424+
}
425+
}
426+
427+
const Consumer = Context.Consumer
428+
```
429+
430+
[Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new).
431+
432+
## Forwarding References/createRef
395433

396434
Use a `React.RefObject`:
397435

@@ -404,57 +442,51 @@ class CssThemeProvider extends React.PureComponent<Props> {
404442
}
405443
```
406444

407-
<details>
445+
[Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new).
408446

409-
<summary>Explanation</summary>
447+
## Portals
410448

411-
This is not yet written. Please PR or [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new) with your suggestions!
412-
</details>
449+
*Not written yet.*
413450

414-
# Component/Design System Development
451+
[Want to contribute this section? Respond in this issue.](https://github.com/sw-yx/react-typescript-cheatsheet/issues/6)
415452

416-
For developing with Storybook, read the docs I maintain over here: <https://storybook.js.org/configurations/typescript-config/>. This includes automatic proptype documentation generation, which is awesome :)
453+
## Error Boundaries
417454

418-
<details>
419-
420-
<summary>Explanation</summary>
455+
*Not written yet.*
421456

422-
This is not yet written. Please PR or [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new) with your suggestions!
423-
</details>
457+
[Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new).
424458

425-
# Building
459+
## Timeout/Placeholder/createFetcher
426460

427-
Please contribute on this topic! [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new).
461+
*Not written yet.* watch <https://github.com/sw-yx/fresh-async-react> for more on React Suspense and Time Slicing.
428462

429-
<details>
463+
[Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new).
430464

431-
<summary>Explanation</summary>
465+
# Section 4: Misc. Concerns
432466

433-
This is not yet written. Please PR or [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new) with your suggestions!
434-
</details>
467+
Sometimes writing React isn't just about React. While we don't focus on other libraries like Redux (see below for more on that), here are some tips on other common concerns when making apps with React + Typescript.
435468

436-
# Prettier + TSLint
469+
## Component/Design System Development
437470

438-
Please contribute on this topic! [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new).
471+
For developing with Storybook, read the docs I maintain over here: <https://storybook.js.org/configurations/typescript-config/>. This includes automatic proptype documentation generation, which is awesome :)
439472

440-
<details>
473+
[Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new).
441474

442-
<summary>Explanation</summary>
475+
## Building
443476

444-
This is not yet written. Please PR or [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new) with your suggestions!
445-
</details>
477+
*Not written yet.*
446478

447-
# Working with Non-Typescript Libraries (writing your own index.d.ts)
479+
[Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new).
448480

449-
Please contribute on this topic! [We have an ongoing issue here with some references](https://github.com/sw-yx/react-typescript-cheatsheet/issues/8).
481+
## Prettier + TSLint
450482

451-
<details>
483+
We have an active discussion on Linting [here](https://github.com/sw-yx/react-typescript-cheatsheet/issues/7).
452484

453-
<summary>Explanation</summary>
485+
## Working with Non-Typescript Libraries (writing your own index.d.ts)
454486

455-
This is not yet written. Please PR or [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new) with your suggestions!
456-
</details>
487+
*Not written yet.*
457488

489+
Please contribute on this topic! [We have an ongoing issue here with some references](https://github.com/sw-yx/react-typescript-cheatsheet/issues/8).
458490

459491
# Troubleshooting Handbook: Types
460492

0 commit comments

Comments
 (0)