diff --git a/src/data/roadmaps/react/content/gsock@y2dI1DVLWKAkv6VRpgaQa.md b/src/data/roadmaps/react/content/gsock@y2dI1DVLWKAkv6VRpgaQa.md index 1c94e29b2..993fe67d9 100644 --- a/src/data/roadmaps/react/content/gsock@y2dI1DVLWKAkv6VRpgaQa.md +++ b/src/data/roadmaps/react/content/gsock@y2dI1DVLWKAkv6VRpgaQa.md @@ -1 +1,2 @@ -# GSock \ No newline at end of file +# GSock + diff --git a/src/data/roadmaps/react/content/material-ui@gy7eBxPOlwG8BvxHVLDQ9.md b/src/data/roadmaps/react/content/material-ui@gy7eBxPOlwG8BvxHVLDQ9.md index 56edfa35d..634c862fc 100644 --- a/src/data/roadmaps/react/content/material-ui@gy7eBxPOlwG8BvxHVLDQ9.md +++ b/src/data/roadmaps/react/content/material-ui@gy7eBxPOlwG8BvxHVLDQ9.md @@ -1 +1,9 @@ -# Material UI \ No newline at end of file +# Material UI + +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. + +- [@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) diff --git a/src/data/roadmaps/react/content/panda-css@akVNUPOqaTXaSHoQFlkP_.md b/src/data/roadmaps/react/content/panda-css@akVNUPOqaTXaSHoQFlkP_.md index a33d2876b..096a3ab2d 100644 --- a/src/data/roadmaps/react/content/panda-css@akVNUPOqaTXaSHoQFlkP_.md +++ b/src/data/roadmaps/react/content/panda-css@akVNUPOqaTXaSHoQFlkP_.md @@ -1 +1,10 @@ -# Panda CSS \ No newline at end of file +# Panda CSS + +Panda CSS is CSS-in-JS with build time generated styles, RSC compatible, multi-variant support, and best-in-class developer experience. + +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/) diff --git a/src/data/roadmaps/react/content/portals@DcDggX4OmmwvJGHwuV86t.md b/src/data/roadmaps/react/content/portals@DcDggX4OmmwvJGHwuV86t.md index 47dc247b9..1c3ae2901 100644 --- a/src/data/roadmaps/react/content/portals@DcDggX4OmmwvJGHwuV86t.md +++ b/src/data/roadmaps/react/content/portals@DcDggX4OmmwvJGHwuV86t.md @@ -5,3 +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) 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 a3b29409c..e14a4b230 100644 --- a/src/data/roadmaps/react/content/react-aria@RvDfKoa_HIW3QDBfkPv3m.md +++ b/src/data/roadmaps/react/content/react-aria@RvDfKoa_HIW3QDBfkPv3m.md @@ -1 +1,8 @@ -# React Aria \ No newline at end of file +# React Aria + +React Aria is style-free out of the box, allowing you to build custom designs to fit your application or design system using any styling and animation solution. Each component is broken down into individual parts with built-in states, render props, and slots that make styling a breeze. + +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) diff --git a/src/data/roadmaps/react/content/react-spring@WzoB5B6SdOI4Mzv6U51nY.md b/src/data/roadmaps/react/content/react-spring@WzoB5B6SdOI4Mzv6U51nY.md index ac1e6fb31..db28c8971 100644 --- a/src/data/roadmaps/react/content/react-spring@WzoB5B6SdOI4Mzv6U51nY.md +++ b/src/data/roadmaps/react/content/react-spring@WzoB5B6SdOI4Mzv6U51nY.md @@ -1 +1,9 @@ -# react spring \ No newline at end of file +# react spring + +React Spring is a popular animation library for React that leverages the principles of spring physics to create smooth, natural-looking animations. Unlike traditional animation libraries that rely on keyframes and linear transitions, React Spring uses spring-based physics to produce fluid and realistic animations that can dynamically respond to user interactions and state changes. + +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/) diff --git a/src/data/roadmaps/react/content/usereducer@v48Mv0wQqjXbvy8x6gDjQ.md b/src/data/roadmaps/react/content/usereducer@v48Mv0wQqjXbvy8x6gDjQ.md index 9cb088e9a..a14fecb01 100644 --- a/src/data/roadmaps/react/content/usereducer@v48Mv0wQqjXbvy8x6gDjQ.md +++ b/src/data/roadmaps/react/content/usereducer@v48Mv0wQqjXbvy8x6gDjQ.md @@ -7,3 +7,4 @@ 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) \ No newline at end of file