From f83a1a6c3b165b835dd037637de3726be089d87a Mon Sep 17 00:00:00 2001 From: Aroyan <43630681+aroyan@users.noreply.github.com> Date: Sun, 19 Mar 2023 04:39:05 +0800 Subject: [PATCH] Update links to the latest React documentation (#3675) * feat: add Set JavaScript content * refactor: update links to the latest react documentation This commit updates all links that referred to outdated(legacy) React documentation to the latest version --- .../103-rendering/100-component-life-cycle.md | 1 + .../content/103-rendering/101-lists-and-keys.md | 3 ++- .../react/content/103-rendering/103-refs.md | 2 ++ .../react/content/103-rendering/104-events.md | 1 + .../104-hooks/100-basic-hooks/100-use-state.md | 2 +- .../104-hooks/100-basic-hooks/101-use-effect.md | 2 +- .../content/104-hooks/100-basic-hooks/index.md | 3 +-- .../104-hooks/101-writing-your-own-hooks.md | 1 + .../react/content/104-hooks/102-common-hooks.md | 16 ++++++++++++++-- .../roadmaps/react/content/104-hooks/index.md | 3 +-- .../content/106-state-management/100-context.md | 2 +- src/data/roadmaps/react/content/112-suspense.md | 2 +- src/data/roadmaps/react/content/113-portals.md | 2 +- 13 files changed, 28 insertions(+), 12 deletions(-) diff --git a/src/data/roadmaps/react/content/103-rendering/100-component-life-cycle.md b/src/data/roadmaps/react/content/103-rendering/100-component-life-cycle.md index b5544d96f..26b74a8d1 100644 --- a/src/data/roadmaps/react/content/103-rendering/100-component-life-cycle.md +++ b/src/data/roadmaps/react/content/103-rendering/100-component-life-cycle.md @@ -5,6 +5,7 @@ Each component has several “lifecycle methods” that you can override to run Visit the following resources to learn more: - [The Component Lifecycle](https://reactjs.org/docs/react-component.html#the-component-lifecycle) +- [Lifecycle of Reactive Effects](https://react.dev/learn/lifecycle-of-reactive-effects) diff --git a/src/data/roadmaps/react/content/103-rendering/101-lists-and-keys.md b/src/data/roadmaps/react/content/103-rendering/101-lists-and-keys.md index 16ff095aa..537f42395 100644 --- a/src/data/roadmaps/react/content/103-rendering/101-lists-and-keys.md +++ b/src/data/roadmaps/react/content/103-rendering/101-lists-and-keys.md @@ -5,5 +5,6 @@ When you render lists in React, you can use the `key` prop to specify a unique k Visit the following resources to learn more: - [Lists and Keys](https://reactjs.org/docs/lists-and-keys.html) +- [Rendering Lists](https://react.dev/learn/rendering-lists) - [List components in React by Example](https://www.robinwieruch.de/react-list-component/) -- [Why do we need the key prop in React?](https://www.robinwieruch.de/react-list-key/) +- [Why do we need the key prop in React?](https://www.robinwieruch.de/react-list-key/) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/103-rendering/103-refs.md b/src/data/roadmaps/react/content/103-rendering/103-refs.md index 1e3366610..f58a7318e 100644 --- a/src/data/roadmaps/react/content/103-rendering/103-refs.md +++ b/src/data/roadmaps/react/content/103-rendering/103-refs.md @@ -7,6 +7,8 @@ In the typical React dataflow, props are the only way that parent components int Visit the following resources to learn more: - [Refs and DOM](https://reactjs.org/docs/refs-and-the-dom.html) +- [Referencing Values with Refs](https://react.dev/learn/referencing-values-with-refs) +- [Manipulating the DOM with Refs](https://react.dev/learn/manipulating-the-dom-with-refs) - [Examples of using refs in React](https://www.robinwieruch.de/react-ref/) - [The Complete Guide to useRef() and Refs in React](https://dmitripavlutin.com/react-useref-guide/) - [Learn useRef in 11 Minutes - Web Dev Simplified](https://www.youtube.com/watch?v=t2ypzz6gJm0) diff --git a/src/data/roadmaps/react/content/103-rendering/104-events.md b/src/data/roadmaps/react/content/103-rendering/104-events.md index 9140f7af9..5c9c00bd4 100644 --- a/src/data/roadmaps/react/content/103-rendering/104-events.md +++ b/src/data/roadmaps/react/content/103-rendering/104-events.md @@ -9,4 +9,5 @@ Visit the following resources to learn more: - [Handling Events in React](https://reactjs.org/docs/handling-events.html) - [Synthetic Events in React](https://reactjs.org/docs/events.html) +- [Responding to Events](https://react.dev/learn/responding-to-events) - [React Event Handler](https://www.robinwieruch.de/react-event-handler/) diff --git a/src/data/roadmaps/react/content/104-hooks/100-basic-hooks/100-use-state.md b/src/data/roadmaps/react/content/104-hooks/100-basic-hooks/100-use-state.md index b7fb3188d..966595709 100644 --- a/src/data/roadmaps/react/content/104-hooks/100-basic-hooks/100-use-state.md +++ b/src/data/roadmaps/react/content/104-hooks/100-basic-hooks/100-use-state.md @@ -4,5 +4,5 @@ Visit the following resources to learn more: -- [Using the State Hook](https://reactjs.org/docs/hooks-state.html) +- [Using the State Hook](https://react.dev/reference/react/useState) - [React useState Hook by Example](https://www.robinwieruch.de/react-usestate-hook/) diff --git a/src/data/roadmaps/react/content/104-hooks/100-basic-hooks/101-use-effect.md b/src/data/roadmaps/react/content/104-hooks/100-basic-hooks/101-use-effect.md index 01a78c0ff..be5a933d7 100644 --- a/src/data/roadmaps/react/content/104-hooks/100-basic-hooks/101-use-effect.md +++ b/src/data/roadmaps/react/content/104-hooks/100-basic-hooks/101-use-effect.md @@ -4,5 +4,5 @@ Visit the following resources to learn more: -- [Using the Effect Hook](https://reactjs.org/docs/hooks-effect.html) +- [Using the Effect Hook](https://react.dev/reference/react/useEffect) - [React useEffect Hook by Example](https://www.robinwieruch.de/react-useeffect-hook/) diff --git a/src/data/roadmaps/react/content/104-hooks/100-basic-hooks/index.md b/src/data/roadmaps/react/content/104-hooks/100-basic-hooks/index.md index da4f098fe..f67576315 100644 --- a/src/data/roadmaps/react/content/104-hooks/100-basic-hooks/index.md +++ b/src/data/roadmaps/react/content/104-hooks/100-basic-hooks/index.md @@ -4,5 +4,4 @@ Hooks were introduced in React 16.8 and they let us use React's features-like ma Visit the following resources to learn more: -- [Introduction to Hooks](https://reactjs.org/docs/hooks-intro.html) -- [Hooks Reference](https://reactjs.org/docs/hooks-reference.html) +- [Hooks Reference](https://react.dev/reference/react) diff --git a/src/data/roadmaps/react/content/104-hooks/101-writing-your-own-hooks.md b/src/data/roadmaps/react/content/104-hooks/101-writing-your-own-hooks.md index d46beb87d..16ee04b71 100644 --- a/src/data/roadmaps/react/content/104-hooks/101-writing-your-own-hooks.md +++ b/src/data/roadmaps/react/content/104-hooks/101-writing-your-own-hooks.md @@ -5,5 +5,6 @@ Building your own Hooks lets you extract component logic into reusable functions Visit the following resources to learn more: - [Creating Custom Hooks](https://reactjs.org/docs/hooks-custom.html) +- [Reusing Logic with Custom Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) - [How to create a custom Hook (1)](https://www.freecodecamp.org/news/how-to-create-react-hooks/) - [How to create a custom Hook (2) followed by Examples](https://www.robinwieruch.de/react-custom-hook/) diff --git a/src/data/roadmaps/react/content/104-hooks/102-common-hooks.md b/src/data/roadmaps/react/content/104-hooks/102-common-hooks.md index e3c69b3fd..0750b971e 100644 --- a/src/data/roadmaps/react/content/104-hooks/102-common-hooks.md +++ b/src/data/roadmaps/react/content/104-hooks/102-common-hooks.md @@ -4,8 +4,20 @@ React also has a lot of hooks that allow you to write more efficient React code. Visit the following resources to learn more: -- [React Hooks Reference](https://reactjs.org/docs/hooks-reference.html#usereducer) -- [useState Hook by Example](https://reactjs.org/docs/hooks-state.html) +- [useCallback](https://react.dev/reference/react/useCallback) +- [useContext](https://react.dev/reference/react/useContext) +- [useDebugValue](https://react.dev/reference/react/useDebugValue) +- [useDeferredValue](https://react.dev/reference/react/useDeferredValue) +- [useEffect](https://react.dev/reference/react/useEffect) +- [useId](https://react.dev/reference/react/useId) +- [useImperativeHandle](https://react.dev/reference/react/useImperativeHandle) +- [useInsertionEffect](https://react.dev/reference/react/useInsertionEffect) +- [useLayoutEffect](https://react.dev/reference/react/useLayoutEffect) +- [useReducer](https://react.dev/reference/react/useReducer) +- [useRef](https://react.dev/reference/react/useRef) +- [useState](https://react.dev/reference/react/useState) +- [useSyncExternalStore](https://react.dev/reference/react/useSyncExternalStore) +- [useTransition](https://react.dev/reference/react/useTransition) - [useCallback Hook by Example](https://www.robinwieruch.de/react-usecallback-hook/) - [useMemo Hook by Example](https://www.robinwieruch.de/react-usememo-hook/) - [useContext Hook by Example](https://www.robinwieruch.de/react-usecontext-hook/) diff --git a/src/data/roadmaps/react/content/104-hooks/index.md b/src/data/roadmaps/react/content/104-hooks/index.md index da4f098fe..f67576315 100644 --- a/src/data/roadmaps/react/content/104-hooks/index.md +++ b/src/data/roadmaps/react/content/104-hooks/index.md @@ -4,5 +4,4 @@ Hooks were introduced in React 16.8 and they let us use React's features-like ma Visit the following resources to learn more: -- [Introduction to Hooks](https://reactjs.org/docs/hooks-intro.html) -- [Hooks Reference](https://reactjs.org/docs/hooks-reference.html) +- [Hooks Reference](https://react.dev/reference/react) diff --git a/src/data/roadmaps/react/content/106-state-management/100-context.md b/src/data/roadmaps/react/content/106-state-management/100-context.md index 2996f4484..e4afdb8f3 100644 --- a/src/data/roadmaps/react/content/106-state-management/100-context.md +++ b/src/data/roadmaps/react/content/106-state-management/100-context.md @@ -6,5 +6,5 @@ In a typical React application, data is passed top-down (parent to child) via pr Visit the following resources to learn more: -- [Official React Context Docs](https://reactjs.org/docs/context.html) +- [Passing Data Deeply with Context](https://react.dev/learn/passing-data-deeply-with-context) - [State with useContext and useState/useReducer](https://www.robinwieruch.de/react-state-usereducer-usestate-usecontext/) diff --git a/src/data/roadmaps/react/content/112-suspense.md b/src/data/roadmaps/react/content/112-suspense.md index fcc20ec2f..16b14d564 100644 --- a/src/data/roadmaps/react/content/112-suspense.md +++ b/src/data/roadmaps/react/content/112-suspense.md @@ -11,4 +11,4 @@ Here is a general overview of how React Suspense works: Visit the following resources to learn more: -- [React Suspense - Official Docs](https://reactjs.org/docs/react-api.html#suspense) +- [React Suspense](https://react.dev/reference/react/Suspense) diff --git a/src/data/roadmaps/react/content/113-portals.md b/src/data/roadmaps/react/content/113-portals.md index b8daa343f..2457078e9 100644 --- a/src/data/roadmaps/react/content/113-portals.md +++ b/src/data/roadmaps/react/content/113-portals.md @@ -4,4 +4,4 @@ Portals provide a first-class way to render children into a DOM node that exists Visit the following resources to learn more: -- [Portals in React](https://reactjs.org/docs/portals.html) +- [Portals in React](https://react.dev/reference/react-dom/createPortal)