Content improvements in React roadmap (#6720)

src/data/roadmaps/react/content/animation@bRpeoo9zXrnZ2IHSI7JX4.md

@@ -2,7 +2,6 @@
 
 Animation in React can be achieved using various methods, such as CSS transitions, keyframes, or libraries like `react-spring`, `framer-motion`, and `GSAP` (GreenSock Animation Platform). CSS transitions are ideal for simple animations, where you can toggle classes or manipulate inline styles to create smooth transitions. For more complex and interactive animations, libraries like `react-spring` provide a declarative approach, allowing you to create animations by defining spring physics or interpolating values. `framer-motion` offers a rich API to handle complex animations, gestures, and even layout transitions with ease. `GSAP` is another powerful library that excels at creating high-performance animations, offering fine-grained control over every aspect of the animation process. These tools integrate seamlessly with React's component-driven architecture, enabling you to create responsive and dynamic user interfaces.
 
-
 Visit the following resources to learn more:
 
 - [@article@Framer Motion Docs](https://www.framer.com/motion/)

src/data/roadmaps/react/content/component--libraries@thfnymb_UIiKxakKfiua5.md

@@ -1,3 +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.
+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/)

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)

src/data/roadmaps/react/content/composition@4T59gdcwdXqj9kCuK7cfp.md

@@ -7,4 +7,4 @@ Visit the following resources to learn more:
 - [@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)
+- [@official@Passing JSX as children](https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children)

src/data/roadmaps/react/content/creating-custom-hooks@HX75SExuzR5AP7TQ94qid.md

@@ -7,4 +7,4 @@ 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)
+- [@feed@Explore top posts about React Hooks](https://app.daily.dev/tags/react-hooks?ref=roadmapsh)

src/data/roadmaps/react/content/hooks-best-practices@mkyU0ug8MXxV4biHuOity.md

@@ -8,4 +8,4 @@ Learn more from the following resources:
 - [@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/)

src/data/roadmaps/react/content/jest@opa61u9gYgSpoPtxp58wu.md

@@ -4,5 +4,5 @@ Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It
 
 Visit the following resources to learn more:
 
-- [@article@Jest Website](https://jestjs.io/)
+- [@official@Jest Website](https://jestjs.io/)
 - [@feed@Explore top posts about Jest](https://app.daily.dev/tags/jest?ref=roadmapsh)

src/data/roadmaps/react/content/jotai@yI6XiNW04EL78UL4lkVgd.md

@@ -9,4 +9,3 @@ It scales from a simple useState replacement to an enterprise TypeScript applica
 - [@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)
-- 

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/)

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/)

src/data/roadmaps/react/content/radix-ui@XL9XOV2h0BAuA5cFcM5L_.md

@@ -8,4 +8,3 @@ Visit the following resources to learn more:
 - [@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)
-

src/data/roadmaps/react/content/react-router@jvp43wFkKlGQX2y7IxkbM.md

@@ -11,4 +11,4 @@ Visit the following resources to learn more:
 - [@article@React Router Cheat Sheet](https://devhints.io/react-router/)
 - [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)
 - [@official@Tanstack/Router — Official Website](https://tanstack.com/router/latest/docs/framework/react/overview)
-- [@video@TanStack/Router - Complete Course](https://www.youtube.com/watch?v=4sslBg8LprE&list=PLOQjd5dsGSxJilh0lBofeY8Qib98kzmF5)
+- [@video@TanStack/Router - Complete Course](https://www.youtube.com/watch?v=4sslBg8LprE&list=PLOQjd5dsGSxJilh0lBofeY8Qib98kzmF5)

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/)

src/data/roadmaps/react/content/rendering@0uiGsC5SWavNdlFqizkKe.md

@@ -13,3 +13,5 @@ This process is known as reconciliation, and it is an important aspect of how Re
 
 Visit the following resources to learn more:
 
+- [@official@Rendering - Official Docs](https://legacy.reactjs.org/docs/rendering-elements.html)
+- [@article@Rendering in React - ui.dev](https://ui.dev/why-react-renders)

src/data/roadmaps/react/content/routers@NStw6bi_pPB49K41BFSgo.md

@@ -4,5 +4,5 @@ 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/)
+- [@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)

src/data/roadmaps/react/content/shadcn-ui@njKsYNkwTXPQ1NjlGKXab.md

@@ -1,7 +1,9 @@
 # Shadcn UI
-Shadcn is an open-source framework providing pre-built, accessible, and customizable UI components for rapid web application development. It offers a streamlined approach to construct modern user interfaces. 
+
+Shadcn is an open-source framework providing pre-built, accessible, and customizable UI components for rapid web application development. It offers a streamlined approach to construct modern user interfaces.
 
 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)

src/data/roadmaps/react/content/tanstack-router@zWL8VLx_g0SWubavJDs6i.md

@@ -6,4 +6,4 @@ Learn more from the following resources:
 
 - [@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)

src/data/roadmaps/react/content/types--validation@UNlvRp6k3_RDoTAAIEfJ1.md

@@ -1,6 +1,6 @@
 # Types & Validation
 
-**Typescript** provides a static type system that helps you in avoiding mistakes during the development and provides other features (e.g. IDE support) that help you improve your productivity. 
+**Typescript** provides a static type system that helps you in avoiding mistakes during the development and provides other features (e.g. IDE support) that help you improve your productivity.
 
 One thing you should note is that TypeScript can only help you avoid mistakes during the development. We can't rely on it to validate a client's input. **Zod** is a powerful validation library that allows us to validate: form input, local storage, API contracts and much more using their typesafe implementation.
 

src/data/roadmaps/react/content/typescript@ElgRwv5LSVg5FXGx-2K2s.md

@@ -1 +1,11 @@
-# TypeScript
+# TypeScript
+
+TypeScript is a free and open-source high-level programming language developed by Microsoft that adds static typing with optional type annotations to JavaScript. It is designed for the development of large applications and transpiles to JavaScript. Because TypeScript is a superset of JavaScript, all JavaScript programs are syntactically valid TypeScript, but they can fail to type-check for safety reasons.
+
+TypeScript supports definition files that can contain type information of existing JavaScript libraries, much like C++ header files can describe the structure of existing object files. This enables other programs to use the values defined in the files as if they were statically typed TypeScript entities. There are third-party header files for popular libraries such as jQuery, MongoDB, and D3.js. TypeScript headers for the Node.js library modules are also available, allowing development of Node.js programs within TypeScript.
+
+Visit the following resources to learn more:
+
+- [@official@TypeScript Website](https://typescriptlang.org/)
+- [@official@TypeScript Docs](https://typescriptlang.org/docs)
+- [@video@Learn Typescript Basics in 12 Minutes](https://www.youtube.com/watch?v=ahCwqrYpIuM&pp=ygULdHlwZXNjcnJpcHQ%3D)

src/data/roadmaps/react/content/usememo@w3bNp7OkehI1gjx8NzlC8.md

@@ -1,6 +1,6 @@
 # useMemo
 
-useMemo is a React hook that memorizes 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.
+`useMemo` is a React hook that memorizes 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:
 

src/data/roadmaps/react/content/usereducer@v48Mv0wQqjXbvy8x6gDjQ.md

@@ -1,10 +1,10 @@
 # useReducer
 
-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.)
+`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:
 
 - [@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)

src/data/roadmaps/react/content/useref@t_laNdMmdLApYszqXRdWg.md

@@ -1,8 +1,9 @@
 # useRef
 
-useRef is a React hook that provides a way to create a mutable reference that persists across component re-renders. It stores a value that doesn't cause re-renders when it changes.
+`useRef` is a React hook that provides a way to create a mutable reference that persists across component re-renders. It stores a value that doesn't cause re-renders when it changes.
 
 Visit the following resources to learn more:
+
 - [@official@useRef](https://react.dev/reference/react/useRef)
 - [@article@W3Schools](https://www.w3schools.com/react/react_useref.asp)
 - [@video@WebDevSimplified](https://www.youtube.com/watch?v=t2ypzz6gJm0)

src/data/roadmaps/react/content/zod@K3RZ8ESxWCpLKHePF87Hy.md

@@ -2,7 +2,7 @@
 
 Zod is a TypeScript-first schema declaration and validation library. I'm using the term "schema" to broadly refer to any data type, from a simple string to a complex nested object.
 
-Zod is designed to be as developer-friendly as possible. The goal is to eliminate duplicative type declarations. With Zod, you declare a validator once and Zod will automatically infer the static TypeScript type. It's easy to compose simpler types into complex data structures.
+Zod is designed to be as developer-friendly as possible. The goal is to eliminate duplicate type declarations. With Zod, you declare a validator once and Zod will automatically infer the static TypeScript type. It's easy to compose simpler types into complex data structures.
 
 Visit the following resources to learn more:
 

src/data/roadmaps/react/content/zustand@nl5imPsdY2oEWlg-9TTuk.md

@@ -10,4 +10,4 @@ Visit the following resources to learn more:
 - [@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)