Skip to content

restructure menu #820

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
filiptammergard merged 1 commit into from
May 15, 2026
Merged

restructure menu #820

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ We appreciate your interest in contributing to this project. Here are some core

## 📋 Core Principles

1. **We're All About Cheatsheets**: Our main goal is to provide concise and easy-to-use cheatsheets. All code examples should be simple, easily searchable, and ready for copy-and-paste.
1. **Cheatsheet Style**: Our main goal is to provide a concise and easy-to-use cheatsheet. All code examples should be simple, easily searchable, and ready for copy-and-paste.

2. **Collapsible Explanations**: Keep explanations short and sweet, limited to 1-2 sentences. For more in-depth explanations, use `details` tags to provide additional context.

Expand Down
156 changes: 15 additions & 141 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,38 +24,30 @@ Cheatsheet for using React with TypeScript.

[![All Contributors](https://img.shields.io/github/contributors/typescript-cheatsheets/react-typescript-cheatsheet?color=orange&style=flat-square)](/CONTRIBUTORS.md) | [![Discord](https://img.shields.io/discord/508357248330760243.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/wTGS5z9)

- [The Basic Cheatsheet](https://react-typescript-cheatsheet.netlify.app/docs/basic/setup) is focused on helping React devs just start using TS in React **apps**
- Focus on opinionated best practices, copy+pastable examples.
- Explains some basic TS types usage and setup along the way.
- Answers the most Frequently Asked Questions.
- Does not cover generic type logic in detail. Instead we prefer to teach simple troubleshooting techniques for newbies.
- The goal is to get effective with TS without learning _too much_ TS.
- [The Advanced Cheatsheet](https://react-typescript-cheatsheet.netlify.app/docs/advanced) helps show and explain advanced usage of generic types for people writing reusable type utilities/functions/render prop/higher order components and TS+React **libraries**.
- It also has miscellaneous tips and tricks for pro users.
- Advice for contributing to DefinitelyTyped.
- The goal is to take _full advantage_ of TypeScript.
- [The HOC Cheatsheet](https://react-typescript-cheatsheet.netlify.app/docs/hoc) specifically teaches people to write HOCs with examples.
- Familiarity with [Generics](https://www.typescriptlang.org/docs/handbook/2/generics.html) is necessary.
- ⚠️This is the newest cheatsheet, all assistance is welcome.
[The Cheatsheet](https://react-typescript-cheatsheet.netlify.app/docs/basic/setup) is focused on helping React devs use TypeScript effectively:

- Opinionated best practices and copy+pastable examples.
- Covers basic TS types and setup, plus advanced usage of generic types for people writing reusable type utilities and React+TS **libraries**.
- Advice for contributing to DefinitelyTyped.

---

## Basic Cheatsheet
## Cheatsheet

### Basic Cheatsheet Table of Contents
### Table of Contents

<details>

<summary><b>Expand Table of Contents</b></summary>

- [React TypeScript Cheatsheet](#react-typescript-cheatsheet)
- [Basic Cheatsheet](#basic-cheatsheet)
- [Basic Cheatsheet Table of Contents](#basic-cheatsheet-table-of-contents)
- [Section 1: Setup](#section-1-setup)
- [Cheatsheet](#cheatsheet)
- [Table of Contents](#table-of-contents)
- [Setup](#setup)
- [Prerequisites](#prerequisites)
- [React and TypeScript starter kits](#react-and-typescript-starter-kits)
- [Try React and TypeScript online](#try-react-and-typescript-online)
- [Section 2: Getting Started](#section-2-getting-started)
- [Getting Started](#getting-started)
- [Function Components](#function-components)
- [Hooks](#hooks)
- [useState](#usestate)
Expand Down Expand Up @@ -106,15 +98,14 @@ Cheatsheet for using React with TypeScript.
- [Option 1: Using react-error-boundary](#option-1-using-react-error-boundary)
- [Option 2: Writing your custom error boundary component](#option-2-writing-your-custom-error-boundary-component)
- [Concurrent React/React Suspense](#concurrent-reactreact-suspense)
- [Linting](#linting)
- [My question isn't answered here!](#my-question-isnt-answered-here)
- [Contributors](#contributors)

</details>

<!--START-SECTION:setup-->

### Section 1: Setup
### Setup

#### Prerequisites

Expand Down Expand Up @@ -148,7 +139,7 @@ There are some tools that let you run React and TypeScript online, which can be

<!--END-SECTION:setup-->

### Section 2: Getting Started
### Getting Started

<!--START-SECTION:function-components-->

Expand Down Expand Up @@ -618,8 +609,6 @@ If you are writing a React Hooks library, don't forget that you should also expo
- https://github.com/palmerhq/the-platform
- https://github.com/sw-yx/hooks

[Something to add? File an issue](https://github.com/typescript-cheatsheets/react/issues/new).

<!--END-SECTION:hooks-->

<!--START-SECTION:class-components-->
Expand Down Expand Up @@ -729,8 +718,6 @@ class App extends React.Component<{

[View in the TypeScript Playground](https://www.typescriptlang.org/play/?jsx=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCtAGxQGc64BBMMOJADxiQDsATRsnQwAdAGFckHrxgAeAN4U4cEEgYoA5kgBccOjCjAeGgNwUAvgD44i8sshHuUXTwCuIAEZIoJuAHo-OGpgAGskOBgAC2A6JTg0SQhpHhgAEWA+AFkIVxSACgBKGzjlKJiRBxTvOABeOABmMzs4cziifm9C4ublIhhXKB44PJLlOFk+YAA3S1GxmzK6CpwwJdV1LXM4FH4F6KXKp1aesdk-SZnRgqblY-MgA)

[Something to add? File an issue](https://github.com/typescript-cheatsheets/react/issues/new).

#### Typing getDerivedStateFromProps

Before you start using `getDerivedStateFromProps`, please go through the [documentation](https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops) and [You Probably Don't Need Derived State](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html). Derived State can be implemented using hooks which can also help set up memoization.
Expand Down Expand Up @@ -874,8 +861,6 @@ For most apps this isn't needed — only library authors who re-export the props

</details>

[Something to add? File an issue](https://github.com/typescript-cheatsheets/react/issues/new).

<!--END-SECTION:default-props-->

<!--START-SECTION:basic-type-examples-->
Expand Down Expand Up @@ -970,7 +955,7 @@ export declare interface AppProps {
childrenElement: React.JSX.Element; // A single React element
style?: React.CSSProperties; // to pass through style props
onChange?: React.FormEventHandler<HTMLInputElement>; // form events! the generic parameter is the type of event.target
// more info: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/#wrappingmirroring
// more info: https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/patterns_by_usecase/#wrappingmirroring
props: Props & React.ComponentPropsWithoutRef<"button">; // to impersonate all the props of a button element and explicitly not forwarding its ref
props2: Props & React.ComponentPropsWithRef<MyButtonWithForwardRef>; // to impersonate all the props of MyButtonForwardedRef and explicitly forwarding its ref
}
Expand All @@ -988,8 +973,6 @@ Quote [@ferdaber](https://github.com/typescript-cheatsheets/react/issues/57): A

[More discussion: Where ReactNode does not overlap with React.JSX.Element](https://github.com/typescript-cheatsheets/react/issues/129)

[Something to add? File an issue](https://github.com/typescript-cheatsheets/react/issues/new).

#### Types or Interfaces?

You can use either Types or Interfaces to type Props and State, so naturally the question arises - which do you use?
Expand Down Expand Up @@ -1038,8 +1021,6 @@ It's a nuanced topic, don't get too hung up on it. Here's a handy table:

(source: [Karol Majewski](https://twitter.com/karoljmajewski/status/1082413696075382785))

[Something to add? File an issue](https://github.com/typescript-cheatsheets/react/issues/new).

<!--END-SECTION:basic-type-examples-->

<!--START-SECTION:get-derived-state-from-props-->
Expand Down Expand Up @@ -1443,7 +1424,7 @@ function Parent() {
}
```

**Read more**: [Wrapping/Mirroring a HTML Element](/docs/advanced/patterns_by_usecase#wrappingmirroring-a-html-element)
**Read more**: [Wrapping/Mirroring a HTML Element](/docs/basic/getting-started/patterns_by_usecase#wrappingmirroring-a-html-element)

#### Legacy Approaches (Pre-React 19)

Expand Down Expand Up @@ -1782,8 +1763,6 @@ export default ErrorBoundary;

```

[Something to add? File an issue](https://github.com/typescript-cheatsheets/react/issues/new).

<!--END-SECTION:error-boundaries-->

<!--START-SECTION:concurrent-->
Expand Down Expand Up @@ -1937,113 +1916,8 @@ The standalone version does not provide an `isPending` flag — use the hook if
- [`useActionState`, `useFormStatus`, `useOptimistic`](https://react.dev/reference/react) — built on top of transitions
- [Server Components and `'use server'`](https://react.dev/reference/rsc/server-components)

[Something to add? File an issue](https://github.com/typescript-cheatsheets/react/issues/new).

<!--END-SECTION:concurrent-->

<!--START-SECTION:linting-->

### Linting

Follow the TypeScript + ESLint docs at https://github.com/typescript-eslint/typescript-eslint:

```
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint
```

add a `lint` script to your `package.json`:

```json
"scripts": {
"lint": "eslint 'src/**/*.ts'"
},
```

and a suitable `.eslintrc.js` (using `.js` over `.json` here so we can add comments):

```js
module.exports = {
env: {
es6: true,
node: true,
jest: true,
},
extends: "eslint:recommended",
parser: "@typescript-eslint/parser",
plugins: ["@typescript-eslint"],
parserOptions: {
ecmaVersion: 2017,
sourceType: "module",
},
rules: {
indent: ["error", 2],
"linebreak-style": ["error", "unix"],
quotes: ["error", "single"],
"no-console": "warn",
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": [
"error",
{ vars: "all", args: "after-used", ignoreRestSiblings: false },
],
"@typescript-eslint/explicit-function-return-type": "warn", // Consider using explicit annotations for object literals and function return types even when they can be inferred.
"no-empty": "warn",
},
};
```

Most of this is taken from [the `tsdx` PR](https://github.com/palmerhq/tsdx/pull/70/files) which is for **libraries**.

More `.eslintrc.json` options to consider with more options you may want for **apps**:

```json
{
"extends": [
"airbnb",
"prettier",
"prettier/react",
"plugin:prettier/recommended",
"plugin:jest/recommended",
"plugin:unicorn/recommended"
],
"plugins": ["prettier", "jest", "unicorn"],
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"jest": true
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
},
"overrides": [
{
"files": ["**/*.ts", "**/*.tsx"],
"parser": "typescript-eslint-parser",
"rules": {
"no-undef": "off"
}
}
]
}
```

Another great resource is ["Using ESLint and Prettier in a TypeScript Project"](https://dev.to/robertcoopercode/using-eslint-and-prettier-in-a-typescript-project-53jb) by @robertcoopercode.

Wes Bos is also working on [TypeScript support for his eslint+prettier config.](https://github.com/wesbos/eslint-config-wesbos/issues/68)

If you're looking for information on Prettier, check out the [Prettier](https://github.com/typescript-cheatsheets/react/blob/main/docs/advanced/misc-concerns.md#prettier) guide.

<!--END-SECTION:linting-->

## My question isn't answered here!

- [File an issue](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/new).
Expand Down
20 changes: 0 additions & 20 deletions docs/advanced/index.md
View file
Open in desktop

This file was deleted.

Loading
Loading