Redraw react roadmap using our editor

src/data/roadmaps/react/content/100-react-roadmap-note.md

@@ -1,3 +0,0 @@
-# Note
-
-This roadmap specifically covers **React and the ecosystem** around it. You will notice that it is missing things like version control, package managers, build tools, linters, task runners and other things that are not directly related to React; this is intentional. Have a look at the [Frontend Roadmap](/frontend) for a more comprehensive overview of the frontend ecosystem.

src/data/roadmaps/react/content/101-cli-tools/101-create-react-app.md

@@ -1,12 +0,0 @@
-# Create React App
-
-Create React App is the CLI based tool and is the best way to start building a new single-page application in React.
-
-It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine.
-
-Visit the following resources to learn more:
-
-- [@official@Official Docs](https://react.dev/learn/start-a-new-react-project)
-- [@article@React W3Schools](https://www.w3schools.com/react/react_intro.asp)
-- [@article@Advanced: Custom Setup with Webpack](https://www.robinwieruch.de/minimal-react-webpack-babel-setup/)
-- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)

src/data/roadmaps/react/content/102-components/100-class-components.md

@@ -1,13 +0,0 @@
-# Class Components
-
-Components can either be created using the class based approach or a functional approach. These components are simple classes (made up of multiple functions that add functionality to the application). All class based components are child classes for the Component class of ReactJS.
-
-Although the class components are supported in React, it is encouraged to write functional components and make use of hooks in modern React applications.
-
-Visit the following resources to learn more:
-
-- [@official@Components and Props](https://react.dev/learn/thinking-in-react#props-vs-state)
-- [@article@Is There Any Reason to Still Use React Class Components?](https://medium.com/geekculture/is-there-any-reason-to-still-use-react-class-components-9b6a1e6aa9ef)
-- [@article@Functional Components vs Class Components in React](https://www.freecodecamp.org/news/functional-components-vs-class-components-in-react)
-- [@article@Migrate Class Components to Functional Components with Hooks in React](https://www.robinwieruch.de/react-hooks-migration/)
-- [@video@React Class Components Tutorial](https://www.youtube.com/watch?v=lnV34uLEzis)

src/data/roadmaps/react/content/104-hooks/index.md

@@ -1,8 +0,0 @@
-# Hooks
-
-Hooks were introduced in React 16.8 and they let us use React's features-like managing your component's state and or performing an after effect when certain changes occur in state(s) without writing a class.
-
-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)

src/data/roadmaps/react/content/105-routers/101-reach-router.md

@@ -1,8 +0,0 @@
-# Reach Router
-
-Reach Router is a small, simple router for React that borrows from React Router, Ember, and Preact Router. Reach Router has a small footprint, supports only simple route patterns by design, and has strong (but experimental) accessibility features.
-
-Visit the following resources to learn more:
-
-- [@official@Reach Router — Official Website](https://reach.tech/router/)
-- [@official@Getting Started Guide](https://reach.tech/router/tutorial/01-intro)

src/data/roadmaps/react/content/106-state-management/102-redux-and-redux-toolkit.md

@@ -1,17 +0,0 @@
-# Redux
-
-Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as [live code editing combined with a time traveling debugger](https://github.com/reduxjs/redux-devtools).
-
-Redux Toolkit (RTK) is a library for managing state in JavaScript applications. It is an opinionated set of tools and utilities for building Redux applications, and it is designed to make it easier and faster to build Redux applications.
-
-RTK is often used as an alternative to writing Redux applications from scratch, as it provides a set of conventions and utilities that can make it easier and faster to build Redux applications.
-
-Visit the following resources to learn more:
-
-- [@article@Redux Toolkit - ReduxJS](https://redux-toolkit.js.org/)
-- [@article@Official Website](https://redux.js.org/)
-- [@article@Official Getting Started to Redux](https://redux.js.org/introduction/getting-started)
-- [@article@Redux Toolkit Official Website](https://redux-toolkit.js.org)
-- [@article@Official Tutorial to Learn Redux](https://redux.js.org/tutorials/essentials/part-1-overview-concepts)
-- [@video@Redux Tutorial - Beginner to Advanced](https://youtube.com/watch?v=zrs7u6bdbUw)
-- [@feed@Explore top posts about Redux](https://app.daily.dev/tags/redux?ref=roadmapsh)

src/data/roadmaps/react/content/106-state-management/103-mobx.md

@@ -1,9 +0,0 @@
-# MobX
-
-MobX is an open source state management tool. MobX, a simple, scalable, and standalone state management library, follows functional reactive programming (FRP) implementation and prevents inconsistent state by ensuring that all derivations are performed automatically.
-
-Visit the following resources to learn more:
-
-- [@article@MobX Official Website](https://mobx.js.org/)
-- [@video@Intro to MobX Tutorial](https://www.youtube.com/watch?v=WQQq1QbYlAw)
-- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)

src/data/roadmaps/react/content/106-state-management/104-recoil.md

@@ -1,19 +0,0 @@
-# Recoil
-
-Recoil is a library for managing state in React applications.
-
-Recoil is designed to be easy to use and efficient, with a focus on improving the performance and scalability of large, complex React applications. It is based on the concept of atoms and selectors, which are used to manage the state of a component. Atoms represent the state of a component, and selectors are used to derive new state from atoms.
-
-Recoil provides a set of utilities and APIs for managing state, including:
-
-- atom: A utility for creating atoms, which represent the state of a component.
-- selector: A utility for creating selectors, which are used to derive new state from atoms.
-- useRecoilValue: A hook for accessing the value of an atom or selector in a component.
-- useSetRecoilState: A hook for updating the value of an atom in a component.
-
-Recoil is often used as an alternative to other state management libraries, such as Redux and MobX, because of its simplicity and performance. It is particularly well-suited for large, complex React applications where the overhead of other state management libraries may be too high.
-
-Visit the following resources to learn more:
-
-- [@article@Recoil - Official Website](https://recoiljs.org/)
-- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)

src/data/roadmaps/react/content/107-styling/100-styled-components.md

@@ -1,11 +0,0 @@
-# Styled components
-
-Styled-components is a CSS-in-JS library that enables you to write regular CSS and attach it to JavaScript components. With styled-components, you can use the CSS you’re already familiar with instead of having to learn a new styling structure.
-
-Visit the following resources to learn more:
-
-- [@article@Official Website](https://styled-components.com/)
-- [@article@Official Docs](https://styled-components.com/docs)
-- [@video@Styled Components Crash Course & Project](https://www.youtube.com/watch?v=02zO0hZmwnw)
-- [@article@Best Practices for Styled Components](https://www.robinwieruch.de/styled-components/)
-- [@feed@Explore top posts about Styled Components](https://app.daily.dev/tags/styled-components?ref=roadmapsh)

src/data/roadmaps/react/content/107-styling/101-emotion.md

@@ -1,8 +0,0 @@
-# Emotion
-
-Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.
-
-Visit the following resources to learn more:
-
-- [@official@Official Website and Docs](https://emotion.sh/docs/introduction)
-- [@video@Styled components using emotion in React](https://www.youtube.com/watch?v=yO3JU2bMLGA)

src/data/roadmaps/react/content/107-styling/102-mantine.md

@@ -1,9 +0,0 @@
-# Mantine
-
-Mantine is a React components library with more than 100 customizable components and 40 hooks to cover you in any situation.
-
-Visit the following resources to learn more:
-
-- [@official@Mantine Website](https://mantine.dev/)
-- [@official@Usage with Create React App](https://mantine.dev/guides/cra/)
-- [@article@5 Mantine Hooks for UI management](https://blog.logrocket.com/5-mantine-hooks-simplifying-ui-management-react/)

src/data/roadmaps/react/content/107-styling/104-material-ui.md

@@ -1,9 +0,0 @@
-# Material UI
-
-Material-UI is an open-source framework that features React components that implement Google’s Material Design.
-
-Visit the following resources to learn more:
-
-- [@article@Official Website](https://mui.com/material-ui/)
-- [@article@Official Documentation](https://mui.com/material-ui/getting-started/)
-- [@video@Material UI React Tutorial](https://www.youtube.com/watch?v=o1chMISeTC0)

src/data/roadmaps/react/content/108-api-calls/106-superagent.md

@@ -1,8 +0,0 @@
-# Superagent
-
-Small progressive client-side HTTP request library, and Node.js module with the same API, supporting many high-level HTTP client features
-
-Visit the following resources to learn more:
-
-- [@article@Official Website](https://ladjs.github.io/superagent)
-- [@opensource@GitHub Repository](https://github.com/visionmedia/superagent)

src/data/roadmaps/react/content/110-frameworks/100-remix.md

@@ -1,8 +0,0 @@
-# Remix
-
-Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff.
-
-Visit the following resources to learn more:
-
-- [@official@Official Website](https://remix.run/)
-- [@official@Official Docs for Getting Started](https://remix.run/docs/en/v1#getting-started)

src/data/roadmaps/react/content/111-forms/102-final-form.md

@@ -1,8 +0,0 @@
-# Final form
-
-High performance subscription-based form state management for React.
-
-Visit the following resources to learn more:
-
-- [@article@Final Form — Official Website](https://final-form.org/react)
-- [@opensource@final-form / react-final-form](https://github.com/final-form/react-final-form)

src/data/roadmaps/react/content/115-fiber-architecture.md

@@ -1,9 +0,0 @@
-# Fiber Architecture
-
-React 16.0 was released with an update to the React core algorithm. This new core architecture is named “Fiber.” Facebook has completely rewritten the internals of React from the ground-up while keeping the public API essentially unchanged; in simple terms, it means only changing the engine of a running car.
-
-Visit the following resources to learn more:
-
-- [@opensource@React Fiber Architecture](https://github.com/acdlite/react-fiber-architecture)
-- [@article@Understanding React Fiber Architecture](https://dzone.com/articles/understanding-of-react-fiber-architecture)
-- [@feed@Explore top posts about Architecture](https://app.daily.dev/tags/architecture?ref=roadmapsh)

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

@@ -0,0 +1 @@
+# Animation

src/data/roadmaps/react/content/ark-ui@kiCTo0U6VgNON8rv_Ktlj.md

@@ -0,0 +1 @@
+# Ark UI

src/data/roadmaps/react/content/astro@_HoZkE7FH-v3wI_722ZTF.md

@@ -0,0 +1 @@
+# Astro

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

@@ -0,0 +1 @@
+# Component / Libraries

src/data/roadmaps/react/content/framer-motion@H6-XGDjs4f-qbv13v5av0.md

@@ -0,0 +1 @@
+# Framer Motion

src/data/roadmaps/react/content/gsock@y2dI1DVLWKAkv6VRpgaQa.md

@@ -0,0 +1 @@
+# GSock

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

@@ -0,0 +1 @@
+# Headless Component Libraries

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

@@ -0,0 +1 @@
+# Hooks Best Practices

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

@@ -0,0 +1 @@
+# Jotai

src/data/roadmaps/react/content/material-ui@gy7eBxPOlwG8BvxHVLDQ9.md

@@ -0,0 +1 @@
+# Material UI

src/data/roadmaps/react/content/mobx@1kbrCI5JS0c9wbzxXpgFU.md

@@ -0,0 +1 @@
+# MobX

src/data/roadmaps/react/content/panda-css@akVNUPOqaTXaSHoQFlkP_.md

@@ -0,0 +1 @@
+# Panda CSS

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

@@ -0,0 +1 @@
+# Radix UI

src/data/roadmaps/react/content/react-aria@RvDfKoa_HIW3QDBfkPv3m.md

@@ -0,0 +1 @@
+# React Aria

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

@@ -0,0 +1,8 @@
+# react-router
+
+There used to be Remix in this list but they announced to merge Remix into react-router after v7.
+
+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)

src/data/roadmaps/react/content/react-spring@WzoB5B6SdOI4Mzv6U51nY.md

@@ -0,0 +1 @@
+# react spring

src/data/roadmaps/react/content/server-apis@SUeXDkmOLipdRP4fSrZOH.md

@@ -0,0 +1 @@
+# Server APIs

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

@@ -0,0 +1 @@
+# Shadcn UI

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

@@ -0,0 +1 @@
+# Tanstack Router

src/data/roadmaps/react/content/topic-node@L7ySAxVypdIk3Mij_u3ch.md

@@ -0,0 +1 @@
+# topic node

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

@@ -0,0 +1 @@
+# Types & Validation

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

@@ -0,0 +1 @@
+# TypeScript

src/data/roadmaps/react/content/usecallback@2zrN65JZhCyNimi33g78f.md

@@ -0,0 +1 @@
+# useCallback

src/data/roadmaps/react/content/usecontext@D5_O-uElftYGQr_bTU_se.md

@@ -0,0 +1 @@
+# useContext

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

@@ -0,0 +1 @@
+# useMemo

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

@@ -0,0 +1 @@
+# useRef

src/data/roadmaps/react/content/usestate@YEpkbNzEMzS6wAKg85J_N.md

@@ -0,0 +1 @@
+# useState

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

@@ -0,0 +1 @@
+# usReducer

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

@@ -0,0 +1 @@
+# Zod

src/data/roadmaps/react/migration-mapping.json

@@ -0,0 +1,56 @@
+{
+  "cli-tools": "tU4Umtnfu01t9gLlnlK6b",
+  "cli-tools:vite": "y9ToYDix-koRbR6FLydFw",
+  "components": "79K4xgljcoSHkCYI1D55O",
+  "components:functional-components": "8mw4TxlLN4ZKAlLl-_NVV",
+  "components:jsx": "WREBxWSNQDD_6fzpHL6CE",
+  "components:props-vs-state": "RFuy3Eho3mnW1GpP08BVw",
+  "components:conditional-rendering": "aE6XBgH23135_9QmD4ff2",
+  "components:composition-vs-inheritance": "4T59gdcwdXqj9kCuK7cfp",
+  "rendering": "0uiGsC5SWavNdlFqizkKe",
+  "rendering:component-life-cycle": "8OBlgDRUg-CTgDXY-QHyO",
+  "rendering:lists-and-keys": "HeWVCPHqVnnbOn6zIim4K",
+  "rendering:render-props": "vdumdIglnouf1KyGIGZnc",
+  "rendering:refs": "_zNAOhFWMcWqP4oxNPCXF",
+  "rendering:events": "Nex2HcTOYIbfqUzXyxSMY",
+  "rendering:high-order-components": "zOENl96GUZRw2PP2KxIck",
+  "hooks": "LbLQhonBqzxHU6B-L--Vq",
+  "hooks:basic-hooks:use-state": "FK59Zsm5ENA9g11XWCan_",
+  "hooks:basic-hooks:use-effect": "8OnzX03hkZ9K9i__tjmFX",
+  "hooks:writing-your-own-hooks": "HX75SExuzR5AP7TQ94qid",
+  "hooks:common-hooks": "dgoDNDtW2_q9R9yhkXrcz",
+  "routers": "NStw6bi_pPB49K41BFSgo",
+  "routers:react-router": "jvp43wFkKlGQX2y7IxkbM",
+  "state-management": "I7_mX4h-Yywp1YyTJRKXI",
+  "state-management:context": "10uL0r388lKh8pWYWqRZD",
+  "state-management:zustand": "nl5imPsdY2oEWlg-9TTuk",
+  "styling": "DfrCkbD-HEHwLymv10zb5",
+  "styling:tailwind": "KO3viVIJJREtxXxsocN7j",
+  "styling:chakra-ui": "uqphqAnlcJOLnwHZs5jWu",
+  "styling:css-modules": "awoEhwPKjUcR84XGL6Som",
+  "api-calls": "b4AP2OggxFAwsQtUwiUJJ",
+  "api-calls:apollo": "8nMbfGxe3STMbrAVcqHHh",
+  "api-calls:relay": "cLfM342sZfsCwmPPxQpEI",
+  "api-calls:urql": "9M5jRu0pj8KMvg9f-2oqZ",
+  "api-calls:swr": "-ea1KsXEyz-4voHXklG_J",
+  "api-calls:react-query": "5EPmbiNdP_vhIXclv_GjV",
+  "api-calls:axios": "ElqWQClryfSYdL7P_mgYK",
+  "api-calls:rtk-query": "h49-tjEkKcq7d7ikRHIOx",
+  "testing": "e_lwZ-a72-tAan2KDX6k3",
+  "testing:jest": "opa61u9gYgSpoPtxp58wu",
+  "testing:vitest": "LULjhsPNONyI5912DKzPw",
+  "testing:react-testing-library": "cQllxv7qGbRtM9O5llgN6",
+  "testing:cypress": "zN7Ps1puD-YpHbKi1pHH8",
+  "testing:playwright": "g39P0c6M2sHNoUPs0m8tr",
+  "frameworks": "W-atg_Msa9uPLr6RXAKSb",
+  "frameworks:remix": "-WjJBYCmRRj08n_9HxohY",
+  "frameworks:next-js": "HdWq9ue0JdwmwqSIN2OD_",
+  "forms": "KHcC5pFN3qLnsbPPKpYd2",
+  "forms:react-hook-form": "_5ht0PAdVOJWPzTRS1mVg",
+  "forms:formik": "gr1CaLvL7tFOkIRywSsID",
+  "suspense": "_F3WMxhzaK9F8_-zHDDMF",
+  "portals": "DcDggX4OmmwvJGHwuV86t",
+  "error-boundaries": "gMHMjsh0i8paLZUH5mDX3",
+  "mobile": "txARr3lgTvy-vJCj5zAb1",
+  "mobile:react-native": "NvXAq1vN2wpncdW-yTL4c"
+}