From c3d8494cab8ebf0ee9ea3a416fa3326b6354b871 Mon Sep 17 00:00:00 2001 From: Shantanu Wable <97496261+shxntanu@users.noreply.github.com> Date: Sat, 19 Oct 2024 11:13:53 +0530 Subject: [PATCH 1/6] feat: add Vite to setup --- docs/basic/setup.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/basic/setup.md b/docs/basic/setup.md index 10156746..7bdebcf7 100644 --- a/docs/basic/setup.md +++ b/docs/basic/setup.md @@ -20,6 +20,7 @@ React has documentation for [how to start a new React project](https://react.dev - [Remix](https://remix.run/docs/tutorials/blog): `npx create-remix@latest` - [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/): `npm init gatsby --ts` - [Expo](https://docs.expo.dev/guides/typescript/): `npx create-expo-app -t with-typescript` +- [Vite](https://vite.dev/guide/): `npm create vite@latest my-react-app -- --template react-ts` ## Try React and TypeScript online From 89126b66ebaeba5c2bde12c937e14a4e543cd92c Mon Sep 17 00:00:00 2001 From: Shantanu Wable <97496261+shxntanu@users.noreply.github.com> Date: Sat, 19 Oct 2024 11:21:40 +0530 Subject: [PATCH 2/6] fix: remove a typo bracket --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f7a12534..7fe48dec 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ Cheatsheets for experienced React developers getting started with TypeScript - [The Migrating Cheatsheet](https://react-typescript-cheatsheet.netlify.app/docs/migration) helps collate advice for incrementally migrating large codebases from JS or Flow, **from people who have done it**. - We do not try to convince people to switch, only to help people who have already decided. - ⚠️This is a new cheatsheet, all assistance is welcome. -- [The HOC Cheatsheet](https://react-typescript-cheatsheet.netlify.app/docs/hoc)) specifically teaches people to write HOCs with examples. +- [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. From 78ddbb080394c45324c76f4699596e5c5e83a43f Mon Sep 17 00:00:00 2001 From: Shantanu Date: Sat, 19 Oct 2024 11:29:19 +0530 Subject: [PATCH 3/6] gen-readme changes --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 7fe48dec..e4b77759 100644 --- a/README.md +++ b/README.md @@ -161,6 +161,7 @@ React has documentation for [how to start a new React project](https://react.dev - [Remix](https://remix.run/docs/tutorials/blog): `npx create-remix@latest` - [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/): `npm init gatsby --ts` - [Expo](https://docs.expo.dev/guides/typescript/): `npx create-expo-app -t with-typescript` +- [Vite](https://vite.dev/guide/): `npm create vite@latest my-react-app -- --template react-ts` #### Try React and TypeScript online From e66d5ce0394311b91961fcdd96595857e545700c Mon Sep 17 00:00:00 2001 From: Shantanu Date: Sat, 19 Oct 2024 12:36:42 +0530 Subject: [PATCH 4/6] feat: remove Vite --- docs/basic/setup.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/basic/setup.md b/docs/basic/setup.md index 7bdebcf7..10156746 100644 --- a/docs/basic/setup.md +++ b/docs/basic/setup.md @@ -20,7 +20,6 @@ React has documentation for [how to start a new React project](https://react.dev - [Remix](https://remix.run/docs/tutorials/blog): `npx create-remix@latest` - [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/): `npm init gatsby --ts` - [Expo](https://docs.expo.dev/guides/typescript/): `npx create-expo-app -t with-typescript` -- [Vite](https://vite.dev/guide/): `npm create vite@latest my-react-app -- --template react-ts` ## Try React and TypeScript online From 3ce68049968589845009083cbc460bc9ec03f4a7 Mon Sep 17 00:00:00 2001 From: Shantanu Date: Sat, 19 Oct 2024 12:36:42 +0530 Subject: [PATCH 5/6] feat: remove Vite --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index e4b77759..7fe48dec 100644 --- a/README.md +++ b/README.md @@ -161,7 +161,6 @@ React has documentation for [how to start a new React project](https://react.dev - [Remix](https://remix.run/docs/tutorials/blog): `npx create-remix@latest` - [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/): `npm init gatsby --ts` - [Expo](https://docs.expo.dev/guides/typescript/): `npx create-expo-app -t with-typescript` -- [Vite](https://vite.dev/guide/): `npm create vite@latest my-react-app -- --template react-ts` #### Try React and TypeScript online From 161aadfcfe82b0114607a016a19ad0453cbbee4c Mon Sep 17 00:00:00 2001 From: Shantanu Date: Sat, 19 Oct 2024 16:13:48 +0530 Subject: [PATCH 6/6] hoc: add use cases for HOC in index --- docs/hoc/index.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/hoc/index.md b/docs/hoc/index.md index d2992ea3..8ec5e9e5 100644 --- a/docs/hoc/index.md +++ b/docs/hoc/index.md @@ -11,6 +11,13 @@ title: HOC Cheatsheet - Render props may be considered in the future - The goal is to write HOCs that offer type safety while not getting in the way. +There are a lot of use cases where an HOC is used. For example: + +- HOCs can wrap components to check if a user is authenticated before rendering, or to restrict access based on user roles. +- An HOC can conditionally render components based on feature flags or A/B testing. +- An HOC can provide translation functionality to components. +- An HOC can add logging or analytics tracking to components without modifying their core logic. + Here is a base HOC example you can copy right away: ```jsx