From c8d6f69d5911cfd2bdb4e64ec6fd442575575ac8 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 24 Nov 2025 17:20:33 +0100 Subject: [PATCH] chore: sync content to repo (#9397) Co-authored-by: kamranahmedse <4921183+kamranahmedse@users.noreply.github.com> --- .../content/animation@bRpeoo9zXrnZ2IHSI7JX4.md | 2 +- .../content/api-calls@b4AP2OggxFAwsQtUwiUJJ.md | 5 ++--- .../content/apollo@8nMbfGxe3STMbrAVcqHHh.md | 2 +- .../content/ark-ui@kiCTo0U6VgNON8rv_Ktlj.md | 2 +- .../react/content/astro@_HoZkE7FH-v3wI_722ZTF.md | 2 +- .../react/content/axios@ElqWQClryfSYdL7P_mgYK.md | 2 +- .../content/chakra-ui@uqphqAnlcJOLnwHZs5jWu.md | 2 +- .../content/cli-tools@tU4Umtnfu01t9gLlnlK6b.md | 4 ++-- ...component--libraries@thfnymb_UIiKxakKfiua5.md | 16 ++++++++-------- .../component-lifecycle@8OBlgDRUg-CTgDXY-QHyO.md | 2 +- .../content/components@79K4xgljcoSHkCYI1D55O.md | 2 +- .../content/composition@4T59gdcwdXqj9kCuK7cfp.md | 4 ++-- ...onditional-rendering@aE6XBgH23135_9QmD4ff2.md | 2 +- .../content/context@10uL0r388lKh8pWYWqRZD.md | 2 +- ...reating-custom-hooks@HX75SExuzR5AP7TQ94qid.md | 4 ++-- .../content/css-modules@awoEhwPKjUcR84XGL6Som.md | 2 +- .../content/cypress@zN7Ps1puD-YpHbKi1pHH8.md | 2 +- .../error-boundaries@gMHMjsh0i8paLZUH5mDX3.md | 2 +- .../content/events@Nex2HcTOYIbfqUzXyxSMY.md | 6 +++--- .../content/formik@gr1CaLvL7tFOkIRywSsID.md | 4 ++-- .../react/content/forms@KHcC5pFN3qLnsbPPKpYd2.md | 2 +- .../framer-motion@H6-XGDjs4f-qbv13v5av0.md | 2 +- .../content/frameworks@W-atg_Msa9uPLr6RXAKSb.md | 4 ++-- ...unctional-components@8mw4TxlLN4ZKAlLl-_NVV.md | 2 +- ...-component-libraries@MnDgQq9Vcxsu3wDqv5uh2.md | 2 +- ...igh-order-components@zOENl96GUZRw2PP2KxIck.md | 2 +- ...hooks-best-practices@mkyU0ug8MXxV4biHuOity.md | 4 ++-- .../react/content/hooks@LbLQhonBqzxHU6B-L--Vq.md | 2 +- .../react/content/jest@opa61u9gYgSpoPtxp58wu.md | 2 +- .../react/content/jotai@yI6XiNW04EL78UL4lkVgd.md | 4 ++-- .../react/content/jsx@WREBxWSNQDD_6fzpHL6CE.md | 2 +- .../lists-and-keys@HeWVCPHqVnnbOn6zIim4K.md | 2 +- .../content/material-ui@gy7eBxPOlwG8BvxHVLDQ9.md | 4 ++-- .../mobile-applications@txARr3lgTvy-vJCj5zAb1.md | 4 ++-- .../react/content/mobx@1kbrCI5JS0c9wbzxXpgFU.md | 6 +++--- .../content/nextjs@HdWq9ue0JdwmwqSIN2OD_.md | 4 ++-- .../content/panda-css@akVNUPOqaTXaSHoQFlkP_.md | 2 +- .../content/playwright@g39P0c6M2sHNoUPs0m8tr.md | 2 +- .../content/portals@DcDggX4OmmwvJGHwuV86t.md | 2 +- .../props-vs-state@RFuy3Eho3mnW1GpP08BVw.md | 2 +- .../content/radix-ui@XL9XOV2h0BAuA5cFcM5L_.md | 2 +- .../content/react-aria@RvDfKoa_HIW3QDBfkPv3m.md | 2 +- .../react-hook-form@_5ht0PAdVOJWPzTRS1mVg.md | 4 ++-- .../react-native@NvXAq1vN2wpncdW-yTL4c.md | 2 +- .../content/react-query@5EPmbiNdP_vhIXclv_GjV.md | 11 ++++++----- .../react-router@-WjJBYCmRRj08n_9HxohY.md | 2 +- .../react-router@jvp43wFkKlGQX2y7IxkbM.md | 4 +++- .../react-spring@WzoB5B6SdOI4Mzv6U51nY.md | 2 +- ...eact-testing-library@cQllxv7qGbRtM9O5llgN6.md | 2 +- .../react/content/refs@_zNAOhFWMcWqP4oxNPCXF.md | 2 +- .../react/content/relay@cLfM342sZfsCwmPPxQpEI.md | 2 +- .../render-props@vdumdIglnouf1KyGIGZnc.md | 2 +- .../content/rendering@0uiGsC5SWavNdlFqizkKe.md | 10 +++++----- .../content/routers@NStw6bi_pPB49K41BFSgo.md | 2 +- .../content/rtk-query@h49-tjEkKcq7d7ikRHIOx.md | 2 +- .../content/server-apis@SUeXDkmOLipdRP4fSrZOH.md | 4 ++-- .../content/shadcn-ui@njKsYNkwTXPQ1NjlGKXab.md | 2 +- .../state-management@I7_mX4h-Yywp1YyTJRKXI.md | 2 +- .../content/suspense@_F3WMxhzaK9F8_-zHDDMF.md | 10 +++++----- .../react/content/swr@-ea1KsXEyz-4voHXklG_J.md | 2 +- .../tailwind-css@KO3viVIJJREtxXxsocN7j.md | 2 +- .../tanstack-router@zWL8VLx_g0SWubavJDs6i.md | 4 ++-- .../content/testing@e_lwZ-a72-tAan2KDX6k3.md | 2 +- .../types--validation@UNlvRp6k3_RDoTAAIEfJ1.md | 2 +- .../content/typescript@ElgRwv5LSVg5FXGx-2K2s.md | 2 +- .../react/content/urql@9M5jRu0pj8KMvg9f-2oqZ.md | 10 +++++----- .../content/usecallback@dgoDNDtW2_q9R9yhkXrcz.md | 2 +- .../content/usecontext@D5_O-uElftYGQr_bTU_se.md | 5 ++--- .../content/useeffect@8OnzX03hkZ9K9i__tjmFX.md | 2 +- .../content/usememo@w3bNp7OkehI1gjx8NzlC8.md | 4 ++-- .../content/usereducer@v48Mv0wQqjXbvy8x6gDjQ.md | 4 ++-- .../content/useref@t_laNdMmdLApYszqXRdWg.md | 2 +- .../content/usestate@FK59Zsm5ENA9g11XWCan_.md | 2 +- .../react/content/vite@y9ToYDix-koRbR6FLydFw.md | 2 +- .../content/vitest@LULjhsPNONyI5912DKzPw.md | 5 ++--- .../content/writing-css@DfrCkbD-HEHwLymv10zb5.md | 2 +- .../react/content/zod@K3RZ8ESxWCpLKHePF87Hy.md | 2 +- .../content/zustand@nl5imPsdY2oEWlg-9TTuk.md | 4 ++-- 78 files changed, 127 insertions(+), 127 deletions(-) diff --git a/src/data/roadmaps/react/content/animation@bRpeoo9zXrnZ2IHSI7JX4.md b/src/data/roadmaps/react/content/animation@bRpeoo9zXrnZ2IHSI7JX4.md index 3ec662eaf..33e731ab2 100644 --- a/src/data/roadmaps/react/content/animation@bRpeoo9zXrnZ2IHSI7JX4.md +++ b/src/data/roadmaps/react/content/animation@bRpeoo9zXrnZ2IHSI7JX4.md @@ -6,4 +6,4 @@ Visit the following resources to learn more: - [@article@Framer Motion Docs](https://www.framer.com/motion/) - [@article@GSAP Docs](https://gsap.com/docs/v3/) -- [@article@React Spring Docs](https://www.react-spring.dev/docs/getting-started) +- [@article@React Spring Docs](https://www.react-spring.dev/docs/getting-started) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/api-calls@b4AP2OggxFAwsQtUwiUJJ.md b/src/data/roadmaps/react/content/api-calls@b4AP2OggxFAwsQtUwiUJJ.md index 8a7e52c4f..221e68836 100644 --- a/src/data/roadmaps/react/content/api-calls@b4AP2OggxFAwsQtUwiUJJ.md +++ b/src/data/roadmaps/react/content/api-calls@b4AP2OggxFAwsQtUwiUJJ.md @@ -1,9 +1,8 @@ # API Calls -APIs, short for Application Programming Interfaces, are software-to-software interfaces. Meaning, they allow different applications to talk to each other and exchange information or functionality. This allows businesses to access another business’s data, piece of code, software, or services in order to extend the functionality of their own products — all while saving time and money. -There are several options available to make API calls from your React.js applications. +APIs, short for Application Programming Interfaces, are software-to-software interfaces. Meaning, they allow different applications to talk to each other and exchange information or functionality. This allows businesses to access another business’s data, piece of code, software, or services in order to extend the functionality of their own products — all while saving time and money. There are several options available to make API calls from your React.js applications. Visit the following resources to learn more: - [@article@AJAX and APIs](https://reactjs.org/docs/faq-ajax.html) -- [@article@How to fetch data in React](https://www.robinwieruch.de/react-hooks-fetch-data/) +- [@article@How to fetch data in React](https://www.robinwieruch.de/react-hooks-fetch-data/) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/apollo@8nMbfGxe3STMbrAVcqHHh.md b/src/data/roadmaps/react/content/apollo@8nMbfGxe3STMbrAVcqHHh.md index 2998402db..97a0a08c6 100644 --- a/src/data/roadmaps/react/content/apollo@8nMbfGxe3STMbrAVcqHHh.md +++ b/src/data/roadmaps/react/content/apollo@8nMbfGxe3STMbrAVcqHHh.md @@ -8,4 +8,4 @@ Visit the following resources to learn more: - [@article@Official Docs](https://www.apollographql.com/docs/) - [@video@Official YouTube Channel](https://www.youtube.com/c/ApolloGraphQL/) - [@video@GraphQL With React Tutorial - Apollo Client](https://www.youtube.com/watch?v=YyUWW04HwKY) -- [@feed@Explore top posts about Apollo](https://app.daily.dev/tags/apollo?ref=roadmapsh) +- [@feed@Explore top posts about Apollo](https://app.daily.dev/tags/apollo?ref=roadmapsh) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/ark-ui@kiCTo0U6VgNON8rv_Ktlj.md b/src/data/roadmaps/react/content/ark-ui@kiCTo0U6VgNON8rv_Ktlj.md index 563930eb9..d47acd0ff 100644 --- a/src/data/roadmaps/react/content/ark-ui@kiCTo0U6VgNON8rv_Ktlj.md +++ b/src/data/roadmaps/react/content/ark-ui@kiCTo0U6VgNON8rv_Ktlj.md @@ -6,5 +6,5 @@ Visit the following resources to learn more: - [@official@Official Website](https://ark-ui.com/) - [@official@Official Website](https://ark-ui.com/react/docs/overview/introduction) -- [@video@Hands On ARK UI](https://www.youtube.com/watch?v=zjo-77I0unk) - [@article@What is ARK UI?](https://shaxadd.medium.com/enhance-your-user-interfaces-with-ark-ui-a-comprehensive-guide-7e87dd0a79cf) +- [@video@Hands On ARK UI](https://www.youtube.com/watch?v=zjo-77I0unk) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/astro@_HoZkE7FH-v3wI_722ZTF.md b/src/data/roadmaps/react/content/astro@_HoZkE7FH-v3wI_722ZTF.md index 5a248c949..f532b4db5 100644 --- a/src/data/roadmaps/react/content/astro@_HoZkE7FH-v3wI_722ZTF.md +++ b/src/data/roadmaps/react/content/astro@_HoZkE7FH-v3wI_722ZTF.md @@ -6,4 +6,4 @@ Visit the following resources to learn more: - [@official@Astro Website](https://astro.build/) - [@video@Astro Crash Course in 60 Minutes](https://www.youtube.com/watch?v=NniT0vKyn-E) -- [@video@How To: Add/Integrate React.js and TailwindCss into Astro framework](https://www.youtube.com/watch?v=d6CsWTVa42o) +- [@video@How To: Add/Integrate React.js and TailwindCss into Astro framework](https://www.youtube.com/watch?v=d6CsWTVa42o) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/axios@ElqWQClryfSYdL7P_mgYK.md b/src/data/roadmaps/react/content/axios@ElqWQClryfSYdL7P_mgYK.md index 4a4577741..da708f371 100644 --- a/src/data/roadmaps/react/content/axios@ElqWQClryfSYdL7P_mgYK.md +++ b/src/data/roadmaps/react/content/axios@ElqWQClryfSYdL7P_mgYK.md @@ -8,4 +8,4 @@ Visit the following resources to learn more: - [@article@Axios Getting Started](https://axios-http.com/docs/intro) - [@article@How to make HTTP requests with Axios](https://blog.logrocket.com/how-to-make-http-requests-like-a-pro-with-axios/#why) -- [@feed@Explore top posts about Axios](https://app.daily.dev/tags/axios?ref=roadmapsh) +- [@feed@Explore top posts about Axios](https://app.daily.dev/tags/axios?ref=roadmapsh) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/chakra-ui@uqphqAnlcJOLnwHZs5jWu.md b/src/data/roadmaps/react/content/chakra-ui@uqphqAnlcJOLnwHZs5jWu.md index 5d2d08642..909b7d91a 100644 --- a/src/data/roadmaps/react/content/chakra-ui@uqphqAnlcJOLnwHZs5jWu.md +++ b/src/data/roadmaps/react/content/chakra-ui@uqphqAnlcJOLnwHZs5jWu.md @@ -7,4 +7,4 @@ Visit the following resources to learn more: - [@article@Chakra UI Website](https://chakra-ui.com/) - [@article@Chakra UI Official Getting Started](https://chakra-ui.com/docs/getting-started) - [@video@Official Getting Started Video](https://youtu.be/wI2vqXsjsIo) -- [@video@Chakra UI Crash Course](https://youtu.be/s-bIsz-NR3c) +- [@video@Chakra UI Crash Course](https://youtu.be/s-bIsz-NR3c) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/cli-tools@tU4Umtnfu01t9gLlnlK6b.md b/src/data/roadmaps/react/content/cli-tools@tU4Umtnfu01t9gLlnlK6b.md index 042936746..8f1a3c0e9 100644 --- a/src/data/roadmaps/react/content/cli-tools@tU4Umtnfu01t9gLlnlK6b.md +++ b/src/data/roadmaps/react/content/cli-tools@tU4Umtnfu01t9gLlnlK6b.md @@ -1,6 +1,6 @@ # CLI Tools -Here is the list of most common CLI tools for React development: +Visit the following resources to learn more: - [@article@vite](https://vitejs.dev) -- [@feed@Explore top posts about CLI](https://app.daily.dev/tags/cli?ref=roadmapsh) +- [@feed@Explore top posts about CLI](https://app.daily.dev/tags/cli?ref=roadmapsh) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/component--libraries@thfnymb_UIiKxakKfiua5.md b/src/data/roadmaps/react/content/component--libraries@thfnymb_UIiKxakKfiua5.md index 14f6a2cba..a11262f8b 100644 --- a/src/data/roadmaps/react/content/component--libraries@thfnymb_UIiKxakKfiua5.md +++ b/src/data/roadmaps/react/content/component--libraries@thfnymb_UIiKxakKfiua5.md @@ -1,8 +1,8 @@ -# Component / Libraries - -React component libraries are collections of pre-built, reusable components that can be used to speed up the development process. They can be styled using CSS in various ways, including traditional CSS files, CSS modules, and CSS-in-JS solutions like styled-components. - -Visit the following resources to learn more: - -- [@article@MUI: React Component Library](https://mui.com/) -- [@article@NextUI.org](https://nextui.org/) +# Component / Libraries + +React component libraries are collections of pre-built, reusable components that can be used to speed up the development process. They can be styled using CSS in various ways, including traditional CSS files, CSS modules, and CSS-in-JS solutions like styled-components. + +Visit the following resources to learn more: + +- [@article@MUI: React Component Library](https://mui.com/) +- [@article@NextUI.org](https://nextui.org/) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/component-lifecycle@8OBlgDRUg-CTgDXY-QHyO.md b/src/data/roadmaps/react/content/component-lifecycle@8OBlgDRUg-CTgDXY-QHyO.md index 8461d9f23..08e8f779b 100644 --- a/src/data/roadmaps/react/content/component-lifecycle@8OBlgDRUg-CTgDXY-QHyO.md +++ b/src/data/roadmaps/react/content/component-lifecycle@8OBlgDRUg-CTgDXY-QHyO.md @@ -11,4 +11,4 @@ Visit the following resources to learn more: - [@article@React component lifecycle: React lifecycle methods & hooks](https://tsh.io/blog/react-component-lifecycle-methods-vs-hooks/) - [@article@The React lifecycle: methods and hooks explained](https://retool.com/blog/the-react-lifecycle-methods-and-hooks-explained#react-hooks-and-the-component-lifecycle) - [@article@React Lifecycle: Methods & Hooks In Detail](https://www.bairesdev.com/blog/react-lifecycle-methods-hooks/) -- [@article@lifecycle diagram](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) +- [@article@lifecycle diagram](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/components@79K4xgljcoSHkCYI1D55O.md b/src/data/roadmaps/react/content/components@79K4xgljcoSHkCYI1D55O.md index 41bb0e370..4cdceba69 100644 --- a/src/data/roadmaps/react/content/components@79K4xgljcoSHkCYI1D55O.md +++ b/src/data/roadmaps/react/content/components@79K4xgljcoSHkCYI1D55O.md @@ -7,4 +7,4 @@ Visit the following resources to learn more: - [@official@Creating and nesting components](https://react.dev/learn#components) - [@article@Explore the different types of components in React](https://www.robinwieruch.de/react-component-types/) - [@article@What is the difference between components, elements, and instances?](https://www.robinwieruch.de/react-element-component/) -- [@video@Components & Templates in React](https://www.youtube.com/watch?v=9D1x7-2FmTA) +- [@video@Components & Templates in React](https://www.youtube.com/watch?v=9D1x7-2FmTA) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/composition@4T59gdcwdXqj9kCuK7cfp.md b/src/data/roadmaps/react/content/composition@4T59gdcwdXqj9kCuK7cfp.md index 1fdc75e7a..3710ed348 100644 --- a/src/data/roadmaps/react/content/composition@4T59gdcwdXqj9kCuK7cfp.md +++ b/src/data/roadmaps/react/content/composition@4T59gdcwdXqj9kCuK7cfp.md @@ -4,7 +4,7 @@ React has a powerful composition model, and it is recommended to use composition Visit the following resources to learn more: +- [@official@Passing JSX as children](https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children) - [@article@Composition vs Inheritance](https://reactjs.org/docs/composition-vs-inheritance.html) - [@article@How to perform component composition in React](https://www.robinwieruch.de/react-component-composition/) -- [@article@Achieving Reusability With React Composition](https://formidable.com/blog/2021/react-composition/) -- [@official@Passing JSX as children](https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children) +- [@article@Achieving Reusability With React Composition](https://formidable.com/blog/2021/react-composition/) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/conditional-rendering@aE6XBgH23135_9QmD4ff2.md b/src/data/roadmaps/react/content/conditional-rendering@aE6XBgH23135_9QmD4ff2.md index db3dce474..62c683c06 100644 --- a/src/data/roadmaps/react/content/conditional-rendering@aE6XBgH23135_9QmD4ff2.md +++ b/src/data/roadmaps/react/content/conditional-rendering@aE6XBgH23135_9QmD4ff2.md @@ -8,4 +8,4 @@ Visit the following resources to learn more: - [@official@Conditional Rendering](https://react.dev/learn/conditional-rendering) - [@article@Different techniques for conditional rendering in React](https://www.robinwieruch.de/conditional-rendering-react/) -- [@video@Conditional rendering in React](https://www.youtube.com/watch?v=4oCVDkb_EIs) +- [@video@Conditional rendering in React](https://www.youtube.com/watch?v=4oCVDkb_EIs) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/context@10uL0r388lKh8pWYWqRZD.md b/src/data/roadmaps/react/content/context@10uL0r388lKh8pWYWqRZD.md index 123e0cfed..ebf026906 100644 --- a/src/data/roadmaps/react/content/context@10uL0r388lKh8pWYWqRZD.md +++ b/src/data/roadmaps/react/content/context@10uL0r388lKh8pWYWqRZD.md @@ -7,5 +7,5 @@ In a typical React application, data is passed top-down (parent to child) via pr Visit the following resources to learn more: - [@official@Passing Data Deeply with Context](https://react.dev/learn/passing-data-deeply-with-context) -- [@video@React Context API Crash Course](https://www.youtube.com/watch?v=t9WmZFnE6Hg) - [@article@State with useContext and useState/useReducer](https://www.robinwieruch.de/react-state-usereducer-usestate-usecontext/) +- [@video@React Context API Crash Course](https://www.youtube.com/watch?v=t9WmZFnE6Hg) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/creating-custom-hooks@HX75SExuzR5AP7TQ94qid.md b/src/data/roadmaps/react/content/creating-custom-hooks@HX75SExuzR5AP7TQ94qid.md index 43a5dea55..3e8f90a9b 100644 --- a/src/data/roadmaps/react/content/creating-custom-hooks@HX75SExuzR5AP7TQ94qid.md +++ b/src/data/roadmaps/react/content/creating-custom-hooks@HX75SExuzR5AP7TQ94qid.md @@ -5,6 +5,6 @@ Building your own Hooks lets you extract component logic into reusable functions Visit the following resources to learn more: - [@official@Reusing Logic with Custom Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) -- [@video@Custom Hooks in React](https://www.youtube.com/watch?v=I2Bgi0Qcdvc) - [@article@How to create a custom Hook (2) followed by Examples](https://www.robinwieruch.de/react-custom-hook/) -- [@feed@Explore top posts about React Hooks](https://app.daily.dev/tags/react-hooks?ref=roadmapsh) +- [@video@Custom Hooks in React](https://www.youtube.com/watch?v=I2Bgi0Qcdvc) +- [@feed@Explore top posts about React Hooks](https://app.daily.dev/tags/react-hooks?ref=roadmapsh) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/css-modules@awoEhwPKjUcR84XGL6Som.md b/src/data/roadmaps/react/content/css-modules@awoEhwPKjUcR84XGL6Som.md index 284917b47..d916223c7 100644 --- a/src/data/roadmaps/react/content/css-modules@awoEhwPKjUcR84XGL6Som.md +++ b/src/data/roadmaps/react/content/css-modules@awoEhwPKjUcR84XGL6Som.md @@ -7,4 +7,4 @@ Visit the following resources to learn more: - [@opensource@Project GitHub Repository](https://github.com/css-modules/css-modules) - [@article@Using CSS Modules In React App](https://medium.com/@ralph1786/using-css-modules-in-react-app-c2079eadbb87) - [@video@CSS Modules: Why are they great?](https://www.youtube.com/watch?v=pKMWU9OrA2s) -- [@feed@Explore top posts about CSS](https://app.daily.dev/tags/css?ref=roadmapsh) +- [@feed@Explore top posts about CSS](https://app.daily.dev/tags/css?ref=roadmapsh) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/cypress@zN7Ps1puD-YpHbKi1pHH8.md b/src/data/roadmaps/react/content/cypress@zN7Ps1puD-YpHbKi1pHH8.md index 856442ed1..339d17dd7 100644 --- a/src/data/roadmaps/react/content/cypress@zN7Ps1puD-YpHbKi1pHH8.md +++ b/src/data/roadmaps/react/content/cypress@zN7Ps1puD-YpHbKi1pHH8.md @@ -7,4 +7,4 @@ Visit the following resources to learn more: - [@official@Official Website](https://www.cypress.io/) - [@article@Official Documentation](https://docs.cypress.io/guides/overview/why-cypress#Other) - [@video@Cypress End-to-End Testing](https://www.youtube.com/watch?v=7N63cMKosIE) -- [@feed@Explore top posts about Cypress](https://app.daily.dev/tags/cypress?ref=roadmapsh) +- [@feed@Explore top posts about Cypress](https://app.daily.dev/tags/cypress?ref=roadmapsh) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/error-boundaries@gMHMjsh0i8paLZUH5mDX3.md b/src/data/roadmaps/react/content/error-boundaries@gMHMjsh0i8paLZUH5mDX3.md index ef02c0b72..d27b07a75 100644 --- a/src/data/roadmaps/react/content/error-boundaries@gMHMjsh0i8paLZUH5mDX3.md +++ b/src/data/roadmaps/react/content/error-boundaries@gMHMjsh0i8paLZUH5mDX3.md @@ -6,4 +6,4 @@ Error boundaries are React components that catch JavaScript errors anywhere in t Visit the following resources to learn more: -- [@official@Error Boundaries in React](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) +- [@official@Error Boundaries in React](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/events@Nex2HcTOYIbfqUzXyxSMY.md b/src/data/roadmaps/react/content/events@Nex2HcTOYIbfqUzXyxSMY.md index e6f53c9fb..ff63468d7 100644 --- a/src/data/roadmaps/react/content/events@Nex2HcTOYIbfqUzXyxSMY.md +++ b/src/data/roadmaps/react/content/events@Nex2HcTOYIbfqUzXyxSMY.md @@ -2,11 +2,11 @@ Handling events with React elements is very similar to handling events on DOM elements. There are some syntax differences: -- React events are named using camelCase, rather than lowercase. -- With JSX you pass a function as the event handler, rather than a string. +* React events are named using camelCase, rather than lowercase. +* With JSX you pass a function as the event handler, rather than a string. Visit the following resources to learn more: - [@official@Responding to Events](https://react.dev/learn/responding-to-events) - [@official@React Event Object (Synthetic Event)](https://react.dev/reference/react-dom/components/common#react-event-object) -- [@article@React Event Handler](https://www.robinwieruch.de/react-event-handler/) +- [@article@React Event Handler](https://www.robinwieruch.de/react-event-handler/) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/formik@gr1CaLvL7tFOkIRywSsID.md b/src/data/roadmaps/react/content/formik@gr1CaLvL7tFOkIRywSsID.md index 4e8e2dae0..8ea764de7 100644 --- a/src/data/roadmaps/react/content/formik@gr1CaLvL7tFOkIRywSsID.md +++ b/src/data/roadmaps/react/content/formik@gr1CaLvL7tFOkIRywSsID.md @@ -5,6 +5,6 @@ Formik is another famous opensource form library that helps with getting values Visit the following resources to learn more: - [@official@Official Website — Formik](https://formik.org/) -- [@video@Formik - Building React Forms easier](https://www.youtube.com/watch?v=khGypss-RJs) -- [@video@React Formik Tutorial with Yup (React Form Validation)](https://www.youtube.com/watch?v=7Ophfq0lEAY) - [@opensource@formik/formik](https://github.com/formik/formik) +- [@video@Formik - Building React Forms easier](https://www.youtube.com/watch?v=khGypss-RJs) +- [@video@React Formik Tutorial with Yup (React Form Validation)](https://www.youtube.com/watch?v=7Ophfq0lEAY) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/forms@KHcC5pFN3qLnsbPPKpYd2.md b/src/data/roadmaps/react/content/forms@KHcC5pFN3qLnsbPPKpYd2.md index 6f3b8e5f8..db2d6e372 100644 --- a/src/data/roadmaps/react/content/forms@KHcC5pFN3qLnsbPPKpYd2.md +++ b/src/data/roadmaps/react/content/forms@KHcC5pFN3qLnsbPPKpYd2.md @@ -5,4 +5,4 @@ Although you can build forms using vanilla React, it normally requires a lot of Visit the following resources to learn more: - [@article@How to use Forms in React](https://www.robinwieruch.de/react-form/) -- [@video@React Forms: the SIMPLEST way](https://www.youtube.com/watch?v=CT-72lTXdPg) +- [@video@React Forms: the SIMPLEST way](https://www.youtube.com/watch?v=CT-72lTXdPg) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/framer-motion@H6-XGDjs4f-qbv13v5av0.md b/src/data/roadmaps/react/content/framer-motion@H6-XGDjs4f-qbv13v5av0.md index 85afd5e3f..10b1bc7bf 100644 --- a/src/data/roadmaps/react/content/framer-motion@H6-XGDjs4f-qbv13v5av0.md +++ b/src/data/roadmaps/react/content/framer-motion@H6-XGDjs4f-qbv13v5av0.md @@ -7,4 +7,4 @@ It powers the amazing animations and interactions in Framer, the web builder for Visit the following resources to learn more: - [@official@Framer Motion Website](https://www.framer.com/motion/introduction/) -- [@video@Framer Motion Crash Course with React & TS](https://www.youtube.com/watch?v=hjbxaYTMhy0&list=PLA4qBVt61k3Phpwt7uqaptIg9NYZ5aNu_) +- [@video@Framer Motion Crash Course with React & TS](https://www.youtube.com/watch?v=hjbxaYTMhy0&list=PLA4qBVt61k3Phpwt7uqaptIg9NYZ5aNu_) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/frameworks@W-atg_Msa9uPLr6RXAKSb.md b/src/data/roadmaps/react/content/frameworks@W-atg_Msa9uPLr6RXAKSb.md index 11b852c5e..82b97281f 100644 --- a/src/data/roadmaps/react/content/frameworks@W-atg_Msa9uPLr6RXAKSb.md +++ b/src/data/roadmaps/react/content/frameworks@W-atg_Msa9uPLr6RXAKSb.md @@ -7,6 +7,6 @@ There are several frameworks and libraries available for server-side rendering R Visit the following resources to learn more: - [@article@Next.js](https://nextjs.org/) -- [@video@Next.js 14 Full Course 2024](https://www.youtube.com/watch?v=wm5gMKuwSYk) - [@article@Remix](https://remix.run/) -- [@video@Remix Crash Course](https://www.youtube.com/watch?v=RBYJTop1e-g) +- [@video@Next.js 14 Full Course 2024](https://www.youtube.com/watch?v=wm5gMKuwSYk) +- [@video@Remix Crash Course](https://www.youtube.com/watch?v=RBYJTop1e-g) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/functional-components@8mw4TxlLN4ZKAlLl-_NVV.md b/src/data/roadmaps/react/content/functional-components@8mw4TxlLN4ZKAlLl-_NVV.md index 590339679..899ef2c2d 100644 --- a/src/data/roadmaps/react/content/functional-components@8mw4TxlLN4ZKAlLl-_NVV.md +++ b/src/data/roadmaps/react/content/functional-components@8mw4TxlLN4ZKAlLl-_NVV.md @@ -9,4 +9,4 @@ Visit the following resources to learn more: - [@official@Passing props to a component](https://react.dev/learn/passing-props-to-a-component) - [@article@Functional Components in React](https://www.robinwieruch.de/react-function-component/) - [@video@React JS Functional Components](https://www.youtube.com/watch?v=NJ_qbsLf52w) -- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh) +- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/headless-component-libraries@MnDgQq9Vcxsu3wDqv5uh2.md b/src/data/roadmaps/react/content/headless-component-libraries@MnDgQq9Vcxsu3wDqv5uh2.md index 8417b9306..0b0827572 100644 --- a/src/data/roadmaps/react/content/headless-component-libraries@MnDgQq9Vcxsu3wDqv5uh2.md +++ b/src/data/roadmaps/react/content/headless-component-libraries@MnDgQq9Vcxsu3wDqv5uh2.md @@ -5,5 +5,5 @@ Headless component libraries have some powerful state, logic and data management Visit the following resources to learn more: - [@article@What are headless components?](https://dev.to/verthon/headless-ui-libraries-the-key-to-flexible-and-accessible-user-interfaces-546p) -- [@video@Rise of Headless Components](https://www.youtube.com/watch?v=_WtVG_pKsxM) - [@article@Headless Components: A Comprehensive Guide](https://blog.logrocket.com/the-complete-guide-to-building-headless-interface-components-in-react/) +- [@video@Rise of Headless Components](https://www.youtube.com/watch?v=_WtVG_pKsxM) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/high-order-components@zOENl96GUZRw2PP2KxIck.md b/src/data/roadmaps/react/content/high-order-components@zOENl96GUZRw2PP2KxIck.md index 53c410d14..e6f7d4b45 100644 --- a/src/data/roadmaps/react/content/high-order-components@zOENl96GUZRw2PP2KxIck.md +++ b/src/data/roadmaps/react/content/high-order-components@zOENl96GUZRw2PP2KxIck.md @@ -13,4 +13,4 @@ Visit the following resources to learn more: - [@video@Learn React Higher Order Component (HOC) in 10 Minutes](https://youtu.be/J5P0q7EROfw?si=-8s5h1b0mZSGVgLt) - [@video@ReactJS Tutorial - Higher Order Components (Part 1)](https://www.youtube.com/watch?v=B6aNv8nkUSw) - [@video@ReactJS Tutorial - Higher Order Components (Part 2)](https://www.youtube.com/watch?v=rsBQj6X7UK8) -- [@video@ReactJS Tutorial - Higher Order Components (Part 3)](https://www.youtube.com/watch?v=l8V59zIdBXU) +- [@video@ReactJS Tutorial - Higher Order Components (Part 3)](https://www.youtube.com/watch?v=l8V59zIdBXU) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/hooks-best-practices@mkyU0ug8MXxV4biHuOity.md b/src/data/roadmaps/react/content/hooks-best-practices@mkyU0ug8MXxV4biHuOity.md index 6f943a9ec..572fa760d 100644 --- a/src/data/roadmaps/react/content/hooks-best-practices@mkyU0ug8MXxV4biHuOity.md +++ b/src/data/roadmaps/react/content/hooks-best-practices@mkyU0ug8MXxV4biHuOity.md @@ -2,10 +2,10 @@ To fully leverage the capabilities of React Hooks, it is crucial to adopt best practices that not only enhance code readability but also optimize performance. By adhering to these practices, developers can create cleaner, more maintainable components that make the most of React's powerful features, leading to a more efficient and enjoyable development experience. -Learn more from the following resources: +Visit the following resources to learn more: - [@official@Rules of Hooks](https://react.dev/reference/rules/rules-of-hooks/) - [@article@React Hooks Best Practices: Unlocking Efficiency and Elegance](https://medium.com/womenintechnology/react-hooks-best-practices-unlocking-efficiency-and-elegance-da23f7e1418a) - [@article@Mastering React Hooks: Best Practices and Common Pitfalls](https://dev.to/codesensei/mastering-react-hooks-best-practices-and-common-pitfalls-3d9i) - [@article@React Hooks Cheat Sheet: Best Practices with Examples](https://blog.logrocket.com/react-hooks-cheat-sheet-solutions-common-problems/) -- [@article@React Custom Hooks: Best Practices and Examples](https://utopia-insights.dev/react-custom-hooks-best-practices-and-examples/) +- [@article@React Custom Hooks: Best Practices and Examples](https://utopia-insights.dev/react-custom-hooks-best-practices-and-examples/) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/hooks@LbLQhonBqzxHU6B-L--Vq.md b/src/data/roadmaps/react/content/hooks@LbLQhonBqzxHU6B-L--Vq.md index 573f9a851..e3b108afb 100644 --- a/src/data/roadmaps/react/content/hooks@LbLQhonBqzxHU6B-L--Vq.md +++ b/src/data/roadmaps/react/content/hooks@LbLQhonBqzxHU6B-L--Vq.md @@ -5,4 +5,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: - [@official@Hooks Reference](https://react.dev/reference/react) -- [@feed@Explore top posts about React Hooks](https://app.daily.dev/tags/react-hooks?ref=roadmapsh) +- [@feed@Explore top posts about React Hooks](https://app.daily.dev/tags/react-hooks?ref=roadmapsh) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/jest@opa61u9gYgSpoPtxp58wu.md b/src/data/roadmaps/react/content/jest@opa61u9gYgSpoPtxp58wu.md index a8ea9f241..73e815dfa 100644 --- a/src/data/roadmaps/react/content/jest@opa61u9gYgSpoPtxp58wu.md +++ b/src/data/roadmaps/react/content/jest@opa61u9gYgSpoPtxp58wu.md @@ -5,5 +5,5 @@ Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It Visit the following resources to learn more: - [@official@Jest Website](https://jestjs.io/) -- [@feed@Explore top posts about Jest](https://app.daily.dev/tags/jest?ref=roadmapsh) - [@article@Testing JavaScript with Jest on Vultr](https://developer.mozilla.org/en-US/blog/test-javascript-with-jest-on-vultr/) +- [@feed@Explore top posts about Jest](https://app.daily.dev/tags/jest?ref=roadmapsh) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/jotai@yI6XiNW04EL78UL4lkVgd.md b/src/data/roadmaps/react/content/jotai@yI6XiNW04EL78UL4lkVgd.md index f84a35b3d..a8ca5784a 100644 --- a/src/data/roadmaps/react/content/jotai@yI6XiNW04EL78UL4lkVgd.md +++ b/src/data/roadmaps/react/content/jotai@yI6XiNW04EL78UL4lkVgd.md @@ -4,8 +4,8 @@ Jotai takes an atomic approach to global React state management. Build state by combining atoms and renders are automatically optimized based on atom dependency. This solves the extra re-render issue of React context, eliminates the need for memoization, and provides a similar developer experience to signals while maintaining a declarative programming model. -It scales from a simple useState replacement to an enterprise TypeScript application with complex requirements. Plus there are plenty of utilities and extensions to help you along the way! +Visit the following resources to learn more: - [@official@Official Website: Jotai](https://jotai.org/) -- [@video@Jotai React - Better Global State Management](https://www.youtube.com/watch?v=ZcKzPZN7Ids) - [@article@State Management on React - Jotai](https://dev.to/kevin-uehara/state-management-on-react-part-3-jotai-i7f) +- [@video@Jotai React - Better Global State Management](https://www.youtube.com/watch?v=ZcKzPZN7Ids) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/jsx@WREBxWSNQDD_6fzpHL6CE.md b/src/data/roadmaps/react/content/jsx@WREBxWSNQDD_6fzpHL6CE.md index 6966398f4..ee69274bd 100644 --- a/src/data/roadmaps/react/content/jsx@WREBxWSNQDD_6fzpHL6CE.md +++ b/src/data/roadmaps/react/content/jsx@WREBxWSNQDD_6fzpHL6CE.md @@ -7,4 +7,4 @@ Visit the following resources to learn more: - [@official@Writing markup with JSX](https://react.dev/learn/writing-markup-with-jsx) - [@official@JavaScript in JSX with Curly Braces](https://react.dev/learn/javascript-in-jsx-with-curly-braces) - [@article@Working with JSX - React - CodeGuage](https://www.codeguage.com/courses/react/jsx) -- [@feed@Explore top posts about JSX](https://app.daily.dev/tags/jsx?ref=roadmapsh) +- [@feed@Explore top posts about JSX](https://app.daily.dev/tags/jsx?ref=roadmapsh) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/lists-and-keys@HeWVCPHqVnnbOn6zIim4K.md b/src/data/roadmaps/react/content/lists-and-keys@HeWVCPHqVnnbOn6zIim4K.md index 840583859..e20990b32 100644 --- a/src/data/roadmaps/react/content/lists-and-keys@HeWVCPHqVnnbOn6zIim4K.md +++ b/src/data/roadmaps/react/content/lists-and-keys@HeWVCPHqVnnbOn6zIim4K.md @@ -7,4 +7,4 @@ Visit the following resources to learn more: - [@official@Lists and Keys](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key) - [@official@Rendering Lists](https://react.dev/learn/rendering-lists) - [@article@List components in React by Example](https://www.robinwieruch.de/react-list-component/) -- [@article@Why do we need the key prop in React?](https://www.robinwieruch.de/react-list-key/) +- [@article@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/material-ui@gy7eBxPOlwG8BvxHVLDQ9.md b/src/data/roadmaps/react/content/material-ui@gy7eBxPOlwG8BvxHVLDQ9.md index 634c862fc..b028a9957 100644 --- a/src/data/roadmaps/react/content/material-ui@gy7eBxPOlwG8BvxHVLDQ9.md +++ b/src/data/roadmaps/react/content/material-ui@gy7eBxPOlwG8BvxHVLDQ9.md @@ -2,8 +2,8 @@ Material UI is an open-source React component library that implements Google's Material Design. -It includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box, and features a suite of customization options that make it easy to implement your own custom design system on top of our components. +Visit the following resources to learn more: - [@official@Material UI website](https://mui.com/material-ui/getting-started/) - [@video@React Material UI Course](https://www.youtube.com/watch?v=BHEPVdfBAqE&list=PLC3y8-rFHvwh-K9mDlrrcDywl7CeVL2rO) -- [@video@Material UI with React](https://www.youtube.com/watch?v=5cvg2qZwYrI) +- [@video@Material UI with React](https://www.youtube.com/watch?v=5cvg2qZwYrI) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/mobile-applications@txARr3lgTvy-vJCj5zAb1.md b/src/data/roadmaps/react/content/mobile-applications@txARr3lgTvy-vJCj5zAb1.md index d8e290b67..07ff2bbb0 100644 --- a/src/data/roadmaps/react/content/mobile-applications@txARr3lgTvy-vJCj5zAb1.md +++ b/src/data/roadmaps/react/content/mobile-applications@txARr3lgTvy-vJCj5zAb1.md @@ -1,6 +1,6 @@ # Mobile -React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use the React framework along with native platform capabilities. +Visit the following resources to learn more: - [@article@React Native Official website](https://reactnative.dev/) -- [@video@React Native Course for Beginners](https://www.youtube.com/watch?v=ZBCUegTZF7M) +- [@video@React Native Course for Beginners](https://www.youtube.com/watch?v=ZBCUegTZF7M) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/mobx@1kbrCI5JS0c9wbzxXpgFU.md b/src/data/roadmaps/react/content/mobx@1kbrCI5JS0c9wbzxXpgFU.md index 3f5f5d8fa..f090d2b2f 100644 --- a/src/data/roadmaps/react/content/mobx@1kbrCI5JS0c9wbzxXpgFU.md +++ b/src/data/roadmaps/react/content/mobx@1kbrCI5JS0c9wbzxXpgFU.md @@ -1,8 +1,8 @@ # MobX -MobX is a powerful and intuitive state management library that enhances application scalability and simplicity through its use of functional reactive programming. The core philosophy of MobX is rooted in straightforwardness and efficiency. Developers can write minimalistic, boilerplate-free code that clearly expresses their intentions. For instance, updating a record field is as simple as performing a standard JavaScript assignment, with MobX automatically detecting changes and propagating them throughout the application. This eliminates the need for specialized tools in asynchronous data processes. +Visit the following resources to learn more: - [@official@Official Website: MobX](https://mobx.js.org/) -- [@video@Mobx React - State Management](https://www.youtube.com/watch?v=AgcaGGkYy_8) -- [@video@MobX Tutorial with React and Typescript](https://www.youtube.com/watch?v=ElgfQdq-Htk) - [@article@How to Improve State Management in React with MobX](https://medium.com/whitespectre/how-to-improve-state-management-in-react-with-mobx-568808ff86a4) +- [@video@Mobx React - State Management](https://www.youtube.com/watch?v=AgcaGGkYy_8) +- [@video@MobX Tutorial with React and Typescript](https://www.youtube.com/watch?v=ElgfQdq-Htk) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/nextjs@HdWq9ue0JdwmwqSIN2OD_.md b/src/data/roadmaps/react/content/nextjs@HdWq9ue0JdwmwqSIN2OD_.md index 864d4f4ce..70ec69211 100644 --- a/src/data/roadmaps/react/content/nextjs@HdWq9ue0JdwmwqSIN2OD_.md +++ b/src/data/roadmaps/react/content/nextjs@HdWq9ue0JdwmwqSIN2OD_.md @@ -6,7 +6,7 @@ Visit the following resources to learn more: - [@official@Official Website](https://nextjs.org/) - [@official@Official Docs for Getting Started](https://nextjs.org/docs/getting-started) -- [@video@Next.js Full course](https://www.youtube.com/watch?v=9P8mASSREYM\&list=PLC3y8-rFHvwgC9mj0qv972IO5DmD-H0ZH) - [@article@Mastering Next.js](https://masteringnextjs.com/) +- [@video@Next.js Full course](https://www.youtube.com/watch?v=9P8mASSREYM&list=PLC3y8-rFHvwgC9mj0qv972IO5DmD-H0ZH) - [@video@Next.js for Beginners - freeCodeCamp](https://youtu.be/KjY94sAKLlw?si=orve81YcY8Fm2vDy) -- [@feed@Explore top posts about JavaScript](https://app.daily.dev/tags/javascript?ref=roadmapsh) +- [@feed@Explore top posts about JavaScript](https://app.daily.dev/tags/javascript?ref=roadmapsh) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/panda-css@akVNUPOqaTXaSHoQFlkP_.md b/src/data/roadmaps/react/content/panda-css@akVNUPOqaTXaSHoQFlkP_.md index 096a3ab2d..16234e586 100644 --- a/src/data/roadmaps/react/content/panda-css@akVNUPOqaTXaSHoQFlkP_.md +++ b/src/data/roadmaps/react/content/panda-css@akVNUPOqaTXaSHoQFlkP_.md @@ -6,5 +6,5 @@ Visit the following resources to learn more: - [@official@Official Website](https://panda-css.com) - [@official@Tutorials and videos to get started with Panda!](https://panda-css.com/learn) -- [@video@Panda CSS First Impressions | Theo Reacts](https://www.youtube.com/watch?v=UlY-Ixddjm0) - [@article@Panda CSS – CSS-in-JS without Runtime Overhead](https://infinum.com/blog/panda-css-css-in-js-without-runtime-overhead/) +- [@video@Panda CSS First Impressions | Theo Reacts](https://www.youtube.com/watch?v=UlY-Ixddjm0) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/playwright@g39P0c6M2sHNoUPs0m8tr.md b/src/data/roadmaps/react/content/playwright@g39P0c6M2sHNoUPs0m8tr.md index 9539751e2..ec34bbb64 100644 --- a/src/data/roadmaps/react/content/playwright@g39P0c6M2sHNoUPs0m8tr.md +++ b/src/data/roadmaps/react/content/playwright@g39P0c6M2sHNoUPs0m8tr.md @@ -5,5 +5,5 @@ Playwright Test was created specifically to accommodate the needs of end-to-end Visit the following resources to learn more: - [@official@Official Website: Playwright](https://playwright.dev/) -- [@video@Get started with end-to-end testing: Playwright](https://www.youtube.com/playlist?list=PLQ6Buerc008ed-F9OksF7ek37wR3y916p) - [@article@Playwright Tutorial: Learn Basics and Setup](https://www.browserstack.com/guide/playwright-tutorial) +- [@video@Get started with end-to-end testing: Playwright](https://www.youtube.com/playlist?list=PLQ6Buerc008ed-F9OksF7ek37wR3y916p) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/portals@DcDggX4OmmwvJGHwuV86t.md b/src/data/roadmaps/react/content/portals@DcDggX4OmmwvJGHwuV86t.md index 1c3ae2901..6c3054904 100644 --- a/src/data/roadmaps/react/content/portals@DcDggX4OmmwvJGHwuV86t.md +++ b/src/data/roadmaps/react/content/portals@DcDggX4OmmwvJGHwuV86t.md @@ -5,4 +5,4 @@ Portals provide a first-class way to render children into a DOM node that exists Visit the following resources to learn more: - [@official@Portals in React](https://react.dev/reference/react-dom/createPortal) -- [@video@React Portals](https://www.youtube.com/watch?v=HpHLa-5Wdys) +- [@video@React Portals](https://www.youtube.com/watch?v=HpHLa-5Wdys) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/props-vs-state@RFuy3Eho3mnW1GpP08BVw.md b/src/data/roadmaps/react/content/props-vs-state@RFuy3Eho3mnW1GpP08BVw.md index 53ec0bb60..0f5895af4 100644 --- a/src/data/roadmaps/react/content/props-vs-state@RFuy3Eho3mnW1GpP08BVw.md +++ b/src/data/roadmaps/react/content/props-vs-state@RFuy3Eho3mnW1GpP08BVw.md @@ -7,4 +7,4 @@ Visit the following resources to learn more: - [@official@State: A Component's Memory](https://react.dev/learn/state-a-components-memory) - [@article@How to use Props in React](https://www.robinwieruch.de/react-pass-props-to-component/) - [@article@What is the difference between state and props in React?](https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react) -- [@article@How to update state from props in React](https://www.robinwieruch.de/react-derive-state-props/) +- [@article@How to update state from props in React](https://www.robinwieruch.de/react-derive-state-props/) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/radix-ui@XL9XOV2h0BAuA5cFcM5L_.md b/src/data/roadmaps/react/content/radix-ui@XL9XOV2h0BAuA5cFcM5L_.md index 2ee378560..2117bed39 100644 --- a/src/data/roadmaps/react/content/radix-ui@XL9XOV2h0BAuA5cFcM5L_.md +++ b/src/data/roadmaps/react/content/radix-ui@XL9XOV2h0BAuA5cFcM5L_.md @@ -6,5 +6,5 @@ Visit the following resources to learn more: - [@official@Getting Started with Radix UI](https://www.radix-ui.com/themes/docs/overview/getting-started) - [@official@Official Website](https://www.radix-ui.com/) -- [@video@Radix UI Course](https://www.youtube.com/playlist?list=PLlNdnoKwDZdwANQoaakE8-kYMyKFOETlo) - [@article@What is Radix UI?](https://medium.com/@olivier.trinh/what-is-radix-ui-ff535bbb52d5) +- [@video@Radix UI Course](https://www.youtube.com/playlist?list=PLlNdnoKwDZdwANQoaakE8-kYMyKFOETlo) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/react-aria@RvDfKoa_HIW3QDBfkPv3m.md b/src/data/roadmaps/react/content/react-aria@RvDfKoa_HIW3QDBfkPv3m.md index e14a4b230..2d5624696 100644 --- a/src/data/roadmaps/react/content/react-aria@RvDfKoa_HIW3QDBfkPv3m.md +++ b/src/data/roadmaps/react/content/react-aria@RvDfKoa_HIW3QDBfkPv3m.md @@ -5,4 +5,4 @@ React Aria is style-free out of the box, allowing you to build custom designs to Visit the following resources to learn more: - [@official@Getting Started with React Aria](https://react-spectrum.adobe.com/react-aria/) -- [@video@Why You Should Use React Aria Components](https://www.youtube.com/watch?v=lTPh6NGLAmk) +- [@video@Why You Should Use React Aria Components](https://www.youtube.com/watch?v=lTPh6NGLAmk) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/react-hook-form@_5ht0PAdVOJWPzTRS1mVg.md b/src/data/roadmaps/react/content/react-hook-form@_5ht0PAdVOJWPzTRS1mVg.md index 2d9c74a88..02be9981c 100644 --- a/src/data/roadmaps/react/content/react-hook-form@_5ht0PAdVOJWPzTRS1mVg.md +++ b/src/data/roadmaps/react/content/react-hook-form@_5ht0PAdVOJWPzTRS1mVg.md @@ -4,6 +4,6 @@ React hook form is an opensource form library for react. Performant, flexible an Visit the following resources to learn more: -- [@article@React Hook Form: Official Website](https://react-hook-form.com/) - [@opensource@react-hook-form/react-hook-form](https://github.com/react-hook-form/react-hook-form) -- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh) +- [@article@React Hook Form: Official Website](https://react-hook-form.com/) +- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/react-native@NvXAq1vN2wpncdW-yTL4c.md b/src/data/roadmaps/react/content/react-native@NvXAq1vN2wpncdW-yTL4c.md index e6b68f352..8ca5ac51e 100644 --- a/src/data/roadmaps/react/content/react-native@NvXAq1vN2wpncdW-yTL4c.md +++ b/src/data/roadmaps/react/content/react-native@NvXAq1vN2wpncdW-yTL4c.md @@ -6,4 +6,4 @@ Visit the following resources to learn more: - [@official@React Native: Official Website](https://reactnative.dev/) - [@official@Official Getting Started](https://reactnative.dev/docs/getting-started) -- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh) +- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/react-query@5EPmbiNdP_vhIXclv_GjV.md b/src/data/roadmaps/react/content/react-query@5EPmbiNdP_vhIXclv_GjV.md index 59d0d531e..38779683c 100644 --- a/src/data/roadmaps/react/content/react-query@5EPmbiNdP_vhIXclv_GjV.md +++ b/src/data/roadmaps/react/content/react-query@5EPmbiNdP_vhIXclv_GjV.md @@ -1,10 +1,11 @@ -# React Query +# TanStack Query -Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue. +TanStack Query, previously known as React Query, is a powerful library for fetching, caching, synchronizing, and updating server state in your React applications. It simplifies the process of handling asynchronous data, reducing boilerplate code and improving the user experience by providing features like automatic retries, background updates, and optimistic updates. It essentially helps you manage data fetching and caching in a declarative and efficient way. Visit the following resources to learn more: - [@opensource@TanStack Query](https://github.com/TanStack/query) -- [@video@React Query in 100 Seconds](https://www.youtube.com/watch?v=novnyCaa7To) -- [@video@React Query Tutorial for Beginners - Complete Playlist](https://www.youtube.com/playlist?list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2) -- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh) +- [@official@TanStack Query](https://tanstack.com/query/latest) +- [@article@TanStack for Beginners: A Complete Guide & Tutorial](https://codeparrot.ai/blogs/tanstack-for-beginners-a-complete-guide-tutorial) +- [@video@TanStack Query - How to become a React Query God](https://www.youtube.com/watch?v=mPaCnwpFvZY) +- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/react-router@-WjJBYCmRRj08n_9HxohY.md b/src/data/roadmaps/react/content/react-router@-WjJBYCmRRj08n_9HxohY.md index a839ae966..beea57d25 100644 --- a/src/data/roadmaps/react/content/react-router@-WjJBYCmRRj08n_9HxohY.md +++ b/src/data/roadmaps/react/content/react-router@-WjJBYCmRRj08n_9HxohY.md @@ -5,4 +5,4 @@ There used to be Remix in this list but they announced to merge Remix into react Visit the following resources to learn more: - [@official@Official Website](https://remix.run/) -- [@official@Announcement to merge Remix into react-router](https://remix.run/blog/merging-remix-and-react-router) +- [@official@Announcement to merge Remix into react-router](https://remix.run/blog/merging-remix-and-react-router) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/react-router@jvp43wFkKlGQX2y7IxkbM.md b/src/data/roadmaps/react/content/react-router@jvp43wFkKlGQX2y7IxkbM.md index 905f375d3..13492ed5a 100644 --- a/src/data/roadmaps/react/content/react-router@jvp43wFkKlGQX2y7IxkbM.md +++ b/src/data/roadmaps/react/content/react-router@jvp43wFkKlGQX2y7IxkbM.md @@ -1,7 +1,9 @@ # React Router -React router is the most famous library when it comes to implementing routing in React applications. +React Router is a standard library for routing in React applications. It enables navigation between different views or components within a single-page application (SPA) without requiring the browser to reload the page. It provides a declarative way to define routes and map them to specific components, allowing users to seamlessly navigate through different parts of the application. Visit the following resources to learn more: - [@official@React Router — Official Website](https://reactrouter.com/) +- [@article@What is React Router?](https://www.w3schools.com/react/react_router.asp) +- [@article@React Router V7: A Crash Course](https://dev.to/pedrotech/react-router-v7-a-crash-course-2m86) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/react-spring@WzoB5B6SdOI4Mzv6U51nY.md b/src/data/roadmaps/react/content/react-spring@WzoB5B6SdOI4Mzv6U51nY.md index db28c8971..60f79f0ff 100644 --- a/src/data/roadmaps/react/content/react-spring@WzoB5B6SdOI4Mzv6U51nY.md +++ b/src/data/roadmaps/react/content/react-spring@WzoB5B6SdOI4Mzv6U51nY.md @@ -5,5 +5,5 @@ React Spring is a popular animation library for React that leverages the princip Visit the following resources to learn more: - [@official@React Spring — Official Website](https://www.react-spring.dev/) -- [@video@React Spring Crash Course](https://www.youtube.com/watch?v=f2vdduklY20&list=PLLnpHn493BHGrM7tAQL8qVtqwqzbuuE5_) - [@article@How to Create Interactive Animations Using React Spring](https://www.sitepoint.com/react-spring-interactive-animations/) +- [@video@React Spring Crash Course](https://www.youtube.com/watch?v=f2vdduklY20&list=PLLnpHn493BHGrM7tAQL8qVtqwqzbuuE5_) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/react-testing-library@cQllxv7qGbRtM9O5llgN6.md b/src/data/roadmaps/react/content/react-testing-library@cQllxv7qGbRtM9O5llgN6.md index 36e279c2c..faa7e18b6 100644 --- a/src/data/roadmaps/react/content/react-testing-library@cQllxv7qGbRtM9O5llgN6.md +++ b/src/data/roadmaps/react/content/react-testing-library@cQllxv7qGbRtM9O5llgN6.md @@ -6,4 +6,4 @@ Visit the following resources to learn more: - [@article@React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) - [@article@How to use React Testing Library](https://www.robinwieruch.de/react-testing-library/) -- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh) +- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/refs@_zNAOhFWMcWqP4oxNPCXF.md b/src/data/roadmaps/react/content/refs@_zNAOhFWMcWqP4oxNPCXF.md index 49314b65d..af5862027 100644 --- a/src/data/roadmaps/react/content/refs@_zNAOhFWMcWqP4oxNPCXF.md +++ b/src/data/roadmaps/react/content/refs@_zNAOhFWMcWqP4oxNPCXF.md @@ -11,4 +11,4 @@ Visit the following resources to learn more: - [@article@Examples of using refs in React](https://www.robinwieruch.de/react-ref/) - [@article@The Complete Guide to useRef() and Refs in React](https://dmitripavlutin.com/react-useref-guide/) - [@article@What Exactly Are Refs? - React - CodeGuage](https://www.codeguage.com/courses/react/refs) -- [@video@Learn useRef in 11 Minutes - Web Dev Simplified](https://www.youtube.com/watch?v=t2ypzz6gJm0) +- [@video@Learn useRef in 11 Minutes - Web Dev Simplified](https://www.youtube.com/watch?v=t2ypzz6gJm0) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/relay@cLfM342sZfsCwmPPxQpEI.md b/src/data/roadmaps/react/content/relay@cLfM342sZfsCwmPPxQpEI.md index 07d6cc9ce..9465f107e 100644 --- a/src/data/roadmaps/react/content/relay@cLfM342sZfsCwmPPxQpEI.md +++ b/src/data/roadmaps/react/content/relay@cLfM342sZfsCwmPPxQpEI.md @@ -5,4 +5,4 @@ Relay is a JavaScript client used in the browser to fetch GraphQL data. It's a J Visit the following resources to learn more: - [@official@Official Website](https://relay.dev/) -- [@official@Introduction to Relay modern](https://relay.dev/docs/) +- [@official@Introduction to Relay modern](https://relay.dev/docs/) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/render-props@vdumdIglnouf1KyGIGZnc.md b/src/data/roadmaps/react/content/render-props@vdumdIglnouf1KyGIGZnc.md index 9ff58bb0e..5858c6c66 100644 --- a/src/data/roadmaps/react/content/render-props@vdumdIglnouf1KyGIGZnc.md +++ b/src/data/roadmaps/react/content/render-props@vdumdIglnouf1KyGIGZnc.md @@ -8,4 +8,4 @@ Visit the following resources to learn more: - [@official@Render Props in React](https://react.dev/learn/passing-props-to-a-component) - [@article@How to create a Render Prop Component](https://www.robinwieruch.de/react-render-props/) -- [@article@Render Props Pattern](https://www.patterns.dev/posts/render-props-pattern/) +- [@article@Render Props Pattern](https://www.patterns.dev/posts/render-props-pattern/) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/rendering@0uiGsC5SWavNdlFqizkKe.md b/src/data/roadmaps/react/content/rendering@0uiGsC5SWavNdlFqizkKe.md index 9f92dc6a3..c3d4586a0 100644 --- a/src/data/roadmaps/react/content/rendering@0uiGsC5SWavNdlFqizkKe.md +++ b/src/data/roadmaps/react/content/rendering@0uiGsC5SWavNdlFqizkKe.md @@ -4,10 +4,10 @@ React follows a declarative approach to rendering components, which means that d The virtual DOM (VDOM) is an important aspect of how React works. It is a lightweight in-memory representation of the DOM (Document Object Model), and it is used to optimize the rendering of components in a React application. -- Components are written as JavaScript classes or functions that define a render method. The render method returns a description of what the component should look like, using JSX syntax. -- When a component is rendered, React creates a virtual DOM (VDOM) representation of the component. The VDOM is a lightweight in-memory representation of the DOM, and it is used to optimize the rendering of components. -- React compares the VDOM representation of the component with the previous VDOM representation (if it exists). If there are differences between the two VDOMs, React calculates the minimum number of DOM updates needed to bring the actual DOM into line with the new VDOM. -- React updates the actual DOM with the minimum number of DOM updates needed to reflect the changes in the VDOM. +* Components are written as JavaScript classes or functions that define a render method. The render method returns a description of what the component should look like, using JSX syntax. +* When a component is rendered, React creates a virtual DOM (VDOM) representation of the component. The VDOM is a lightweight in-memory representation of the DOM, and it is used to optimize the rendering of components. +* React compares the VDOM representation of the component with the previous VDOM representation (if it exists). If there are differences between the two VDOMs, React calculates the minimum number of DOM updates needed to bring the actual DOM into line with the new VDOM. +* React updates the actual DOM with the minimum number of DOM updates needed to reflect the changes in the VDOM. This process is known as reconciliation, and it is an important aspect of how React works. By using a declarative approach and a VDOM, React is able to optimize the rendering of components and improve the performance of web applications. @@ -15,4 +15,4 @@ Visit the following resources to learn more: - [@official@Render and Commit - Official Docs](https://react.dev/learn/render-and-commit) - [@article@Rendering in React - ui.dev](https://ui.dev/why-react-renders) -- [@article@Fix the slow render before you fix the re-render](https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render) +- [@article@Fix the slow render before you fix the re-render](https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/routers@NStw6bi_pPB49K41BFSgo.md b/src/data/roadmaps/react/content/routers@NStw6bi_pPB49K41BFSgo.md index 55aef2a31..569c68de2 100644 --- a/src/data/roadmaps/react/content/routers@NStw6bi_pPB49K41BFSgo.md +++ b/src/data/roadmaps/react/content/routers@NStw6bi_pPB49K41BFSgo.md @@ -5,4 +5,4 @@ Routing is an essential concept in Single Page Applications (SPA). When your app Visit the following resources to learn more: - [@article@How to use Routing in React JS: A Comprehensive Guide.](https://blog.logrocket.com/react-router-v6-guide/) -- [@video@React Router 6 – Tutorial for Beginners.](https://www.youtube.com/watch?v=59IXY5IDrBA) +- [@video@React Router 6 – Tutorial for Beginners.](https://www.youtube.com/watch?v=59IXY5IDrBA) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/rtk-query@h49-tjEkKcq7d7ikRHIOx.md b/src/data/roadmaps/react/content/rtk-query@h49-tjEkKcq7d7ikRHIOx.md index 8344234ff..8a9995db5 100644 --- a/src/data/roadmaps/react/content/rtk-query@h49-tjEkKcq7d7ikRHIOx.md +++ b/src/data/roadmaps/react/content/rtk-query@h49-tjEkKcq7d7ikRHIOx.md @@ -4,4 +4,4 @@ Visit the following resources to learn more: -- [@article@RTK Query - Official Website](https://redux-toolkit.js.org/rtk-query/overview) +- [@article@RTK Query - Official Website](https://redux-toolkit.js.org/rtk-query/overview) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/server-apis@SUeXDkmOLipdRP4fSrZOH.md b/src/data/roadmaps/react/content/server-apis@SUeXDkmOLipdRP4fSrZOH.md index b539dec82..c5b63cd48 100644 --- a/src/data/roadmaps/react/content/server-apis@SUeXDkmOLipdRP4fSrZOH.md +++ b/src/data/roadmaps/react/content/server-apis@SUeXDkmOLipdRP4fSrZOH.md @@ -2,6 +2,6 @@ The react-dom/server APIs let you render React components to HTML on the server. These APIs are only used on the server at the top level of your app to generate the initial HTML. A [framework](https://react.dev/learn/start-a-new-react-project#production-grade-react-frameworks) may call them for you. Most of your components don’t need to import or use them. -Learn more from the following resources: +Visit the following resources to learn more: -- [@official@Documentation For API](https://react.dev/reference/react-dom/server) +- [@official@Documentation For API](https://react.dev/reference/react-dom/server) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/shadcn-ui@njKsYNkwTXPQ1NjlGKXab.md b/src/data/roadmaps/react/content/shadcn-ui@njKsYNkwTXPQ1NjlGKXab.md index b847958bd..4b04a9bb1 100644 --- a/src/data/roadmaps/react/content/shadcn-ui@njKsYNkwTXPQ1NjlGKXab.md +++ b/src/data/roadmaps/react/content/shadcn-ui@njKsYNkwTXPQ1NjlGKXab.md @@ -6,5 +6,5 @@ Visit the following resources to learn more: - [@official@Official Website](https://ui.shadcn.com/) - [@official@Documentation](https://ui.shadcn.com/docs) -- [@video@Shadcn Setup and Tutorial](https://www.youtube.com/watch?v=v0_AT8zaLo8) - [@article@Shadcn Guide](https://blog.logrocket.com/shadcn-ui-adoption-guide/) +- [@video@Shadcn Setup and Tutorial](https://www.youtube.com/watch?v=v0_AT8zaLo8) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/state-management@I7_mX4h-Yywp1YyTJRKXI.md b/src/data/roadmaps/react/content/state-management@I7_mX4h-Yywp1YyTJRKXI.md index 366218d00..090459866 100644 --- a/src/data/roadmaps/react/content/state-management@I7_mX4h-Yywp1YyTJRKXI.md +++ b/src/data/roadmaps/react/content/state-management@I7_mX4h-Yywp1YyTJRKXI.md @@ -5,4 +5,4 @@ Application state management is the process of maintaining knowledge of an appli Visit the following resources to learn more: - [@article@What is State Management?](https://www.techtarget.com/searchapparchitecture/definition/state-management) -- [@article@Overview of State in React](https://www.robinwieruch.de/react-state/) +- [@article@Overview of State in React](https://www.robinwieruch.de/react-state/) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/suspense@_F3WMxhzaK9F8_-zHDDMF.md b/src/data/roadmaps/react/content/suspense@_F3WMxhzaK9F8_-zHDDMF.md index 1d3ec42f5..988bdeb87 100644 --- a/src/data/roadmaps/react/content/suspense@_F3WMxhzaK9F8_-zHDDMF.md +++ b/src/data/roadmaps/react/content/suspense@_F3WMxhzaK9F8_-zHDDMF.md @@ -4,12 +4,12 @@ React Suspense is a feature in React that allows components to "suspend" renderi Here is a general overview of how React Suspense works: -- A component that uses Suspense wraps a component that may need to "suspend" rendering in a `Suspense` component. -- The wrapped component throws a promise when it needs to suspend rendering. -- The `Suspense` component catches the promise and renders a fallback component while the promise is pending. -- When the promise resolves, the wrapped component is rendered with the required data. +* A component that uses Suspense wraps a component that may need to "suspend" rendering in a `Suspense` component. +* The wrapped component throws a promise when it needs to suspend rendering. +* The `Suspense` component catches the promise and renders a fallback component while the promise is pending. +* When the promise resolves, the wrapped component is rendered with the required data. Visit the following resources to learn more: - [@official@React Suspense](https://react.dev/reference/react/Suspense) -- [@article@React Suspense - A complete guide](https://hygraph.com/blog/react-suspense) +- [@article@React Suspense - A complete guide](https://hygraph.com/blog/react-suspense) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/swr@-ea1KsXEyz-4voHXklG_J.md b/src/data/roadmaps/react/content/swr@-ea1KsXEyz-4voHXklG_J.md index f82971efd..f64f040d7 100644 --- a/src/data/roadmaps/react/content/swr@-ea1KsXEyz-4voHXklG_J.md +++ b/src/data/roadmaps/react/content/swr@-ea1KsXEyz-4voHXklG_J.md @@ -9,4 +9,4 @@ With just one hook, you can significantly simplify the data fetching logic in yo Visit the following resources to learn more: - [@article@SWR: React Hooks for Data Fetching](https://swr.vercel.app/) -- [@feed@Explore top posts about Next.js](https://app.daily.dev/tags/nextjs?ref=roadmapsh) +- [@feed@Explore top posts about Next.js](https://app.daily.dev/tags/nextjs?ref=roadmapsh) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/tailwind-css@KO3viVIJJREtxXxsocN7j.md b/src/data/roadmaps/react/content/tailwind-css@KO3viVIJJREtxXxsocN7j.md index 8f8aac17d..dc69c651a 100644 --- a/src/data/roadmaps/react/content/tailwind-css@KO3viVIJJREtxXxsocN7j.md +++ b/src/data/roadmaps/react/content/tailwind-css@KO3viVIJJREtxXxsocN7j.md @@ -9,4 +9,4 @@ Visit the following resources to learn more: - [@video@Tailwind CSS Crash Course](https://www.youtube.com/watch?v=UBOj6rqRUME) - [@video@Should You Use Tailwind CSS?](https://www.youtube.com/watch?v=hdGsFpZ0J2E) - [@video@Official Screencasts](https://www.youtube.com/c/TailwindLabs/videos) -- [@feed@Explore top posts about Tailwind CSS](https://app.daily.dev/tags/tailwind-css?ref=roadmapsh) +- [@feed@Explore top posts about Tailwind CSS](https://app.daily.dev/tags/tailwind-css?ref=roadmapsh) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/tanstack-router@zWL8VLx_g0SWubavJDs6i.md b/src/data/roadmaps/react/content/tanstack-router@zWL8VLx_g0SWubavJDs6i.md index 33b2b29ee..1fbbfc44a 100644 --- a/src/data/roadmaps/react/content/tanstack-router@zWL8VLx_g0SWubavJDs6i.md +++ b/src/data/roadmaps/react/content/tanstack-router@zWL8VLx_g0SWubavJDs6i.md @@ -2,8 +2,8 @@ TanStack Router is a powerful router for building React applications, offering a range of advanced features to streamline development. -Learn more from the following resources: +Visit the following resources to learn more: - [@article@TanStack Router Documentation](https://tanstack.com/router/latest/docs/framework/react/overview) - [@video@TanStack Router - Crash Course](https://www.youtube.com/watch?v=4sslBg8LprE&list=PLOQjd5dsGSxJilh0lBofeY8Qib98kzmF5) -- [@video@TanStack Router Vite: Ultimate Guide for Beginners](https://www.youtube.com/watch?v=AN9rD7y9MS8) +- [@video@TanStack Router Vite: Ultimate Guide for Beginners](https://www.youtube.com/watch?v=AN9rD7y9MS8) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/testing@e_lwZ-a72-tAan2KDX6k3.md b/src/data/roadmaps/react/content/testing@e_lwZ-a72-tAan2KDX6k3.md index b70ed9e2c..b538c0a24 100644 --- a/src/data/roadmaps/react/content/testing@e_lwZ-a72-tAan2KDX6k3.md +++ b/src/data/roadmaps/react/content/testing@e_lwZ-a72-tAan2KDX6k3.md @@ -6,4 +6,4 @@ Visit the following resources to learn more: - [@article@What is Software Testing?](https://www.guru99.com/software-testing-introduction-importance.html) - [@article@Testing Pyramid](https://www.browserstack.com/guide/testing-pyramid-for-test-automation) -- [@feed@Explore top posts about Testing](https://app.daily.dev/tags/testing?ref=roadmapsh) +- [@feed@Explore top posts about Testing](https://app.daily.dev/tags/testing?ref=roadmapsh) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/types--validation@UNlvRp6k3_RDoTAAIEfJ1.md b/src/data/roadmaps/react/content/types--validation@UNlvRp6k3_RDoTAAIEfJ1.md index 7e274176c..d98c46c4a 100644 --- a/src/data/roadmaps/react/content/types--validation@UNlvRp6k3_RDoTAAIEfJ1.md +++ b/src/data/roadmaps/react/content/types--validation@UNlvRp6k3_RDoTAAIEfJ1.md @@ -7,4 +7,4 @@ One thing you should note is that TypeScript can only help you avoid mistakes du Visit the following resources to learn more: - [@article@What is TypeScript and why would I use it in place of JavaScript?](https://stackoverflow.com/questions/12694530/what-is-typescript-and-why-would-i-use-it-in-place-of-javascript) -- [@article@When Use Zod](https://www.totaltypescript.com/when-should-you-use-zod) +- [@article@When Use Zod](https://www.totaltypescript.com/when-should-you-use-zod) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/typescript@ElgRwv5LSVg5FXGx-2K2s.md b/src/data/roadmaps/react/content/typescript@ElgRwv5LSVg5FXGx-2K2s.md index a6a955f8b..e1afad85b 100644 --- a/src/data/roadmaps/react/content/typescript@ElgRwv5LSVg5FXGx-2K2s.md +++ b/src/data/roadmaps/react/content/typescript@ElgRwv5LSVg5FXGx-2K2s.md @@ -7,4 +7,4 @@ Visit the following resources to learn more: - [@official@Official Website](https://www.typescriptlang.org/) - [@article@The TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html) - [@video@TypeScript for Beginners](https://www.youtube.com/watch?v=BwuLxPH8IDs) -- [@feed@Explore top posts about TypeScript](https://app.daily.dev/tags/typescript?ref=roadmapsh) +- [@feed@Explore top posts about TypeScript](https://app.daily.dev/tags/typescript?ref=roadmapsh) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/urql@9M5jRu0pj8KMvg9f-2oqZ.md b/src/data/roadmaps/react/content/urql@9M5jRu0pj8KMvg9f-2oqZ.md index d9d03b8dc..ebde69ec3 100644 --- a/src/data/roadmaps/react/content/urql@9M5jRu0pj8KMvg9f-2oqZ.md +++ b/src/data/roadmaps/react/content/urql@9M5jRu0pj8KMvg9f-2oqZ.md @@ -4,13 +4,13 @@ urql (Universal React Query Library) is a library for managing GraphQL data in R urql is designed to be easy to use and flexible, with a simple API for performing GraphQL queries and mutations. It is based on the concept of a client, which is used to manage the GraphQL data for an application. The client provides a set of utilities and APIs for managing GraphQL data, including: -- executeQuery: A utility for executing a GraphQL query. -- executeMutation: A utility for executing a GraphQL mutation. -- useQuery: A hook for executing a GraphQL query and accessing the result in a component. -- useMutation: A hook for executing a GraphQL mutation and accessing the result in a component. +* executeQuery: A utility for executing a GraphQL query. +* executeMutation: A utility for executing a GraphQL mutation. +* useQuery: A hook for executing a GraphQL query and accessing the result in a component. +* useMutation: A hook for executing a GraphQL mutation and accessing the result in a component. urql is often used as an alternative to other GraphQL libraries, such as Apollo Client, because of its simplicity and lightweight size. It is particularly well-suited for small to medium-sized React applications where the complexity of other GraphQL libraries may not be required. Visit the following resources to learn more: -- [@article@urql - Formidable Labs](https://formidable.com/open-source/urql/) +- [@article@urql - Formidable Labs](https://formidable.com/open-source/urql/) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/usecallback@dgoDNDtW2_q9R9yhkXrcz.md b/src/data/roadmaps/react/content/usecallback@dgoDNDtW2_q9R9yhkXrcz.md index 1a90367a8..26a89beef 100644 --- a/src/data/roadmaps/react/content/usecallback@dgoDNDtW2_q9R9yhkXrcz.md +++ b/src/data/roadmaps/react/content/usecallback@dgoDNDtW2_q9R9yhkXrcz.md @@ -6,4 +6,4 @@ Visit the following resources to learn more: - [@official@React Documentation on useCallback](https://react.dev/reference/react/useCallback) - [@article@useCallback Explained in Depth](https://kentcdodds.com/blog/usememo-and-usecallback) -- [@article@useCallback Hook: An Introductory Guide](https://dmitripavlutin.com/dont-overuse-react-usecallback/) +- [@article@useCallback Hook: An Introductory Guide](https://dmitripavlutin.com/dont-overuse-react-usecallback/) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/usecontext@D5_O-uElftYGQr_bTU_se.md b/src/data/roadmaps/react/content/usecontext@D5_O-uElftYGQr_bTU_se.md index b32ee2108..013090ad5 100644 --- a/src/data/roadmaps/react/content/usecontext@D5_O-uElftYGQr_bTU_se.md +++ b/src/data/roadmaps/react/content/usecontext@D5_O-uElftYGQr_bTU_se.md @@ -1,10 +1,9 @@ # useContext -The `useContext` Hook lets us share data between components without having to pass props down through every level of the component tree. -This is particularly useful when many components need to access the same data or when components are deeply nested. +The `useContext` Hook lets us share data between components without having to pass props down through every level of the component tree. This is particularly useful when many components need to access the same data or when components are deeply nested. Visit the following resources to learn more: - [@official@Using useContext](https://react.dev/reference/react/useContext) - [@official@Explore the concept of context](https://react.dev/learn/passing-data-deeply-with-context) -- [@video@Learn useContext In 13 Minutes](https://www.youtube.com/watch?v=5LrDIWkK_Bc) +- [@video@Learn useContext In 13 Minutes](https://www.youtube.com/watch?v=5LrDIWkK_Bc) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/useeffect@8OnzX03hkZ9K9i__tjmFX.md b/src/data/roadmaps/react/content/useeffect@8OnzX03hkZ9K9i__tjmFX.md index 197ae36dd..0a15d5ced 100644 --- a/src/data/roadmaps/react/content/useeffect@8OnzX03hkZ9K9i__tjmFX.md +++ b/src/data/roadmaps/react/content/useeffect@8OnzX03hkZ9K9i__tjmFX.md @@ -5,4 +5,4 @@ Visit the following resources to learn more: - [@official@Using the Effect Hook](https://react.dev/reference/react/useEffect) -- [@article@React useEffect Hook by Example](https://www.robinwieruch.de/react-useeffect-hook/) +- [@article@React useEffect Hook by Example](https://www.robinwieruch.de/react-useeffect-hook/) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/usememo@w3bNp7OkehI1gjx8NzlC8.md b/src/data/roadmaps/react/content/usememo@w3bNp7OkehI1gjx8NzlC8.md index bd9a85e99..998846841 100644 --- a/src/data/roadmaps/react/content/usememo@w3bNp7OkehI1gjx8NzlC8.md +++ b/src/data/roadmaps/react/content/usememo@w3bNp7OkehI1gjx8NzlC8.md @@ -2,7 +2,7 @@ `useMemo` is a React hook that memoizes the result of a function. It is used to optimize performance by caching the result of a function and returning the cached result when the inputs to the function have not changed. -Learn more from the following resources: +Visit the following resources to learn more: - [@official@useMemo Docs](https://react.dev/reference/react/useMemo) -- [@article@useMemo and useCallback - Josh W. Comeau](https://www.joshwcomeau.com/react/usememo-and-usecallback/) +- [@article@useMemo and useCallback - Josh W. Comeau](https://www.joshwcomeau.com/react/usememo-and-usecallback/) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/usereducer@v48Mv0wQqjXbvy8x6gDjQ.md b/src/data/roadmaps/react/content/usereducer@v48Mv0wQqjXbvy8x6gDjQ.md index 4ae0fc13c..2fdd1e61e 100644 --- a/src/data/roadmaps/react/content/usereducer@v48Mv0wQqjXbvy8x6gDjQ.md +++ b/src/data/roadmaps/react/content/usereducer@v48Mv0wQqjXbvy8x6gDjQ.md @@ -2,9 +2,9 @@ `useReducer`: An alternative to useState. Accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method. (If you’re familiar with Redux, you already know how this works.) -Learn more from the following resources: +Visit the following resources to learn more: - [@official@useReducer Docs](https://react.dev/reference/react/useReducer) - [@article@The React useReducer Hook](https://www.telerik.com/blogs/react-usereducer-hook) - [@article@A guide to the React useReducer Hook](https://blog.logrocket.com/react-usereducer-hook-ultimate-guide/) -- [@video@Learn React Hooks: useReducer - Simply Explained!](https://www.youtube.com/watch?v=rgp_iCVS8ys&t) +- [@video@Learn React Hooks: useReducer - Simply Explained!](https://www.youtube.com/watch?v=rgp_iCVS8ys&t) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/useref@t_laNdMmdLApYszqXRdWg.md b/src/data/roadmaps/react/content/useref@t_laNdMmdLApYszqXRdWg.md index 32e3f78c5..d222ddb57 100644 --- a/src/data/roadmaps/react/content/useref@t_laNdMmdLApYszqXRdWg.md +++ b/src/data/roadmaps/react/content/useref@t_laNdMmdLApYszqXRdWg.md @@ -5,4 +5,4 @@ Visit the following resources to learn more: - [@official@useRef](https://react.dev/reference/react/useRef) -- [@video@WebDevSimplified](https://www.youtube.com/watch?v=t2ypzz6gJm0) +- [@video@WebDevSimplified](https://www.youtube.com/watch?v=t2ypzz6gJm0) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/usestate@FK59Zsm5ENA9g11XWCan_.md b/src/data/roadmaps/react/content/usestate@FK59Zsm5ENA9g11XWCan_.md index 621a8a6bc..46df66004 100644 --- a/src/data/roadmaps/react/content/usestate@FK59Zsm5ENA9g11XWCan_.md +++ b/src/data/roadmaps/react/content/usestate@FK59Zsm5ENA9g11XWCan_.md @@ -5,4 +5,4 @@ Visit the following resources to learn more: - [@official@Using the State Hook](https://react.dev/reference/react/useState) -- [@article@React useState Hook by Example](https://www.robinwieruch.de/react-usestate-hook/) +- [@article@React useState Hook by Example](https://www.robinwieruch.de/react-usestate-hook/) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/vite@y9ToYDix-koRbR6FLydFw.md b/src/data/roadmaps/react/content/vite@y9ToYDix-koRbR6FLydFw.md index 03b541aeb..0a8013eed 100644 --- a/src/data/roadmaps/react/content/vite@y9ToYDix-koRbR6FLydFw.md +++ b/src/data/roadmaps/react/content/vite@y9ToYDix-koRbR6FLydFw.md @@ -8,4 +8,4 @@ Visit the following resources to learn more: - [@official@Vite Documentation](https://vitejs.dev/guide) - [@video@Vite Crash Course](https://youtu.be/LQQ3CR2JTX8) - [@video@Vite Crash Course | Faster Alternative To CRA | 2023](https://www.youtube.com/watch?v=89NJdbYTgJ8) -- [@feed@Explore top posts about Vite](https://app.daily.dev/tags/vite?ref=roadmapsh) +- [@feed@Explore top posts about Vite](https://app.daily.dev/tags/vite?ref=roadmapsh) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/vitest@LULjhsPNONyI5912DKzPw.md b/src/data/roadmaps/react/content/vitest@LULjhsPNONyI5912DKzPw.md index 87eecd323..208ba15c8 100644 --- a/src/data/roadmaps/react/content/vitest@LULjhsPNONyI5912DKzPw.md +++ b/src/data/roadmaps/react/content/vitest@LULjhsPNONyI5912DKzPw.md @@ -1,9 +1,8 @@ # Vitest -Vitest is a fast Vite-native unit test framework with out-of-box ESM, TypeScript and JSX support. -Works on React, Vue, Svelte and more projects created with Vite +Vitest is a fast Vite-native unit test framework with out-of-box ESM, TypeScript and JSX support. Works on React, Vue, Svelte and more projects created with Vite Visit the following resources to learn more: - [@official@Vitest Website](https://vitest.dev/) -- [@video@Testing with Vitest](https://www.youtube.com/watch?v=cM_AeQHzlGg) +- [@video@Testing with Vitest](https://www.youtube.com/watch?v=cM_AeQHzlGg) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/writing-css@DfrCkbD-HEHwLymv10zb5.md b/src/data/roadmaps/react/content/writing-css@DfrCkbD-HEHwLymv10zb5.md index bedf13f23..28d90f6fa 100644 --- a/src/data/roadmaps/react/content/writing-css@DfrCkbD-HEHwLymv10zb5.md +++ b/src/data/roadmaps/react/content/writing-css@DfrCkbD-HEHwLymv10zb5.md @@ -4,4 +4,4 @@ While "CSS in JS" is the most predominant way of styling modern frontend applica Visit the following resources to learn more: -- [@article@Ways to CSS style a React application](https://www.robinwieruch.de/react-css-styling/) +- [@article@Ways to CSS style a React application](https://www.robinwieruch.de/react-css-styling/) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/zod@K3RZ8ESxWCpLKHePF87Hy.md b/src/data/roadmaps/react/content/zod@K3RZ8ESxWCpLKHePF87Hy.md index ae020a6f0..e9b9b9ab7 100644 --- a/src/data/roadmaps/react/content/zod@K3RZ8ESxWCpLKHePF87Hy.md +++ b/src/data/roadmaps/react/content/zod@K3RZ8ESxWCpLKHePF87Hy.md @@ -7,4 +7,4 @@ Zod is designed to be as developer-friendly as possible. The goal is to eliminat Visit the following resources to learn more: - [@official@Zod Website](https://zod.dev/) -- [@video@Learn Zod In 30 Minutes](https://www.youtube.com/watch?v=L6BE-U3oy80) +- [@video@Learn Zod In 30 Minutes](https://www.youtube.com/watch?v=L6BE-U3oy80) \ No newline at end of file diff --git a/src/data/roadmaps/react/content/zustand@nl5imPsdY2oEWlg-9TTuk.md b/src/data/roadmaps/react/content/zustand@nl5imPsdY2oEWlg-9TTuk.md index 8617e4338..58f2d9a30 100644 --- a/src/data/roadmaps/react/content/zustand@nl5imPsdY2oEWlg-9TTuk.md +++ b/src/data/roadmaps/react/content/zustand@nl5imPsdY2oEWlg-9TTuk.md @@ -7,7 +7,7 @@ Zustand is often used as an alternative to other state management libraries, suc Visit the following resources to learn more: - [@opensource@Zustand - Official Website](https://github.com/pmndrs/zustand) +- [@opensource@Zustand Repository](https://github.com/pmndrs/zustand) - [@article@Working with Zustand](https://tkdodo.eu/blog/working-with-zustand) - [@article@Zustand - Official Documentation](https://docs.pmnd.rs/zustand/getting-started/introduction) -- [@opensource@Zustand Repository](https://github.com/pmndrs/zustand) -- [@video@Zustand Tutorial for Beginners](https://www.youtube.com/watch?v=AYO4qHAnLQI&t) +- [@video@Zustand Tutorial for Beginners](https://www.youtube.com/watch?v=AYO4qHAnLQI&t) \ No newline at end of file