Add content to react roadmap (#6360)

* Added React Material UI

* Added PandaCSS

* Added React Aria

* Added React Spring some Article and Videos

* Added React Portal video tutorial

* Added React useReducer

---------

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>
pull/6354/head^2
Farzad Mohtasham 4 months ago committed by GitHub
parent 1bdb0fc5b7
commit dda52d5379
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 3
      src/data/roadmaps/react/content/gsock@y2dI1DVLWKAkv6VRpgaQa.md
  2. 10
      src/data/roadmaps/react/content/material-ui@gy7eBxPOlwG8BvxHVLDQ9.md
  3. 11
      src/data/roadmaps/react/content/panda-css@akVNUPOqaTXaSHoQFlkP_.md
  4. 1
      src/data/roadmaps/react/content/portals@DcDggX4OmmwvJGHwuV86t.md
  5. 9
      src/data/roadmaps/react/content/react-aria@RvDfKoa_HIW3QDBfkPv3m.md
  6. 10
      src/data/roadmaps/react/content/react-spring@WzoB5B6SdOI4Mzv6U51nY.md
  7. 1
      src/data/roadmaps/react/content/usereducer@v48Mv0wQqjXbvy8x6gDjQ.md

@ -1 +1,9 @@
# Material UI # 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)

@ -1 +1,10 @@
# Panda CSS # 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/)

@ -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: Visit the following resources to learn more:
- [@official@Portals in React](https://react.dev/reference/react-dom/createPortal) - [@official@Portals in React](https://react.dev/reference/react-dom/createPortal)
- [@video@React Portals](https://www.youtube.com/watch?v=HpHLa-5Wdys)

@ -1 +1,8 @@
# React Aria # 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)

@ -1 +1,9 @@
# react spring # 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/)

@ -7,3 +7,4 @@ Learn more from the following resources:
- [@official@useReducer Docs](https://react.dev/reference/react/useReducer) - [@official@useReducer Docs](https://react.dev/reference/react/useReducer)
- [@article@The React useReducer Hook](https://www.telerik.com/blogs/react-usereducer-hook) - [@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/) - [@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)
Loading…
Cancel
Save