chore: sync content to repo (#10282)

Co-authored-by: nilbuild <4921183+nilbuild@users.noreply.github.com>
2026-09-19 09:32:03 +08:00 · 2026-09-07 15:46:58 +02:00
parent ed762a6704
commit 4786ec30c2
59 changed files with 99 additions and 166 deletions
@@ -1,6 +1,6 @@
 # Animation

-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.
+React Animation allows you to change the visual state of elements over time, such as fading, sliding, or scaling them in response to user interaction or state changes. React does not include animation tools by default, so most projects rely on dedicated libraries to handle timing, easing, and transitions smoothly.

 Visit the following resources to learn more:

@@ -1,11 +1,10 @@
 # Apollo

-Apollo is a platform for building a unified graph, a communication layer that helps you manage the flow of data between your application clients (such as web and native apps) and your back-end services.
+Apollo Client is a library for working with GraphQL APIs in React. It handles sending queries and mutations, caching the results, and keeping the UI in sync as data changes. It is one of the most established tools for GraphQL in the React ecosystem, with hooks like useQuery and useMutation built in.

 Visit the following resources to learn more:

 - [@article@Apollo Website](https://www.apollographql.com)
 - [@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)
+- [@video@GraphQL With React Tutorial - Apollo Client](https://www.youtube.com/watch?v=YyUWW04HwKY)
@@ -1,6 +1,6 @@
 # Ark UI

-It is a modern and versatile user interface framework designed to streamline the development of responsive and accessible web applications. It provides a `comprehensive set` of components and tools that simplify the process of building user interfaces, allowing developers to focus on functionality and design. With a strong emphasis on flexibility and ease of use, Ark UI enables rapid prototyping and `scalable solutions`, ensuring a consistent and polished user experience across various devices and platforms. Its modular architecture and extensive documentation make it an excellent choice for developers looking to enhance productivity and maintain high standards in their UI design.
+Ark UI is a headless component library that provides the state and accessibility logic for common UI patterns, and works across multiple frameworks, not just React. It gives full control over markup and styling while handling the more complex interaction logic behind the scenes. It shares some underlying tooling with Panda CSS.

 Visit the following resources to learn more:

@@ -1,11 +1,8 @@
 # Axios

-The most common way for frontend programs to communicate with servers is through the HTTP protocol. You are probably familiar with the Fetch API and the XMLHttpRequest interface, which allows you to fetch resources and make HTTP requests.
-
-Axios is a client HTTP API based on the XMLHttpRequest interface provided by browsers.
+Axios is a promise-based HTTP client used to make requests from a React app to a server. It works similarly to the built-in fetch function but adds features like automatic JSON parsing, request and response interceptors, and easier error handling. It remains popular even though modern fetch has closed some of the gap between the two.

 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)
+- [@article@How to make HTTP requests with Axios](https://blog.logrocket.com/how-to-make-http-requests-like-a-pro-with-axios/#why)
@@ -1,6 +1,6 @@
 # Chakra UI

-Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
+Chakra UI is a component library that provides accessible, ready-to-use React components along with a styling system based on style props. It focuses on accessibility and developer experience out of the box, with sensible defaults for spacing, color, and responsive design. Components can be customized through a theme configuration.

 Visit the following resources to learn more:

@@ -1,6 +1,7 @@
 # CLI Tools

+CLI tools are command line programs that help developers set up, run, and manage a React project without doing everything by hand. They handle tasks like creating a new project structure, starting a development server, or bundling code for production. Most modern React setups rely on a CLI tool instead of manual configuration, since it saves time and avoids mistakes.
+
 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)
+- [@article@vite](https://vitejs.dev)
@@ -1,14 +1,10 @@
 # Component Life Cycle

-React components have a lifecycle consisting of three phases: Mounting, Updating, and Unmounting along with several “lifecycle methods” that you can override to run code at particular times in the process.
-
-It is not recommended to use lifecycle methods manually. Instead, use the useEffect hook with functional components.
+The component lifecycle describes the different stages a component goes through, from being created and added to the page, to updating, and finally being removed. In function components, lifecycle behavior is handled through hooks like useEffect instead of separate lifecycle methods. Knowing this lifecycle helps developers run code at the right moment, such as fetching data when a component first appears.

 Visit the following resources to learn more:

 - [@official@Lifecycle of Reactive Effects](https://react.dev/learn/lifecycle-of-reactive-effects)
 - [@official@Class Component](https://react.dev/reference/react/Component)
 - [@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@The React lifecycle: methods and hooks explained](https://retool.com/blog/the-react-lifecycle-methods-and-hooks-explained#react-hooks-and-the-component-lifecycle)
@@ -1,6 +1,6 @@
 # Components

-Components are the building blocks of React applications. They let us split the UI into independent, reusable pieces, and think about each piece in isolation.
+Components are the building blocks of a React application. Each one is a piece of code, usually a function, that returns some UI and can be reused across the app. Breaking an interface into components makes the code easier to read, test, and maintain.

 Visit the following resources to learn more:

@@ -1,6 +1,6 @@
 # Composition vs Inheritance

-React has a powerful composition model, and it is recommended to use composition instead of inheritance to reuse code between components.
+Composition means building complex components by combining smaller, simpler ones. Instead of relying on inheritance, React encourages passing components as props or nesting them as children to reuse logic and layout. This keeps components flexible and easier to reason about compared to sharing code through class hierarchies.

 Visit the following resources to learn more:

@@ -1,8 +1,6 @@
 # Conditional Rendering

-In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.
-
-Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like [if](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) or the [conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to create elements representing the current state, and let React update the UI to match them.
+Conditional rendering means showing different UI depending on a condition, such as whether a user is logged in or a list is empty. In React, this is often done with plain JavaScript, using if statements, ternary operators, or logical AND. There is no special syntax for it since JSX already works with normal JavaScript expressions.

 Visit the following resources to learn more:

@@ -1,8 +1,6 @@
 # Context

-Context provides a way to pass data through the component tree without having to pass props down manually at every level.
-
-In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.
+Context is a built-in React feature that lets you share data across the component tree without passing it through props at every level. You create a context, provide a value at some point in the tree, and any component below can read that value with useContext. It works well for data that does not change often, like theme or authentication status, but is not designed to replace a full state management library for frequently changing data.

 Visit the following resources to learn more:

@@ -1,10 +1,9 @@
 # Writing Custom Hooks

-Building your own Hooks lets you extract component logic into reusable functions.
+A custom hook is a function you write yourself that starts with "use" and calls other hooks inside it. It lets you extract reusable logic, such as fetching data or tracking window size, out of a component and share it across multiple components. Custom hooks follow the same rules as built-in hooks, since they are really just regular functions built on top of them.

 Visit the following resources to learn more:

 - [@official@Reusing Logic with Custom Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks)
 - [@article@How to create a custom Hook (2) followed by Examples](https://www.robinwieruch.de/react-custom-hook/)
- [@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)
+- [@video@Custom Hooks in React](https://www.youtube.com/watch?v=I2Bgi0Qcdvc)
@@ -1,10 +1,9 @@
 # CSS Modules

-CSS files in which all class names and animation names are scoped locally by default.
+CSS Modules let you write regular CSS files where class names are automatically scoped to the component that imports them. This avoids the common problem of class name collisions across a large codebase. You import the styles as an object in your component file and apply them like normal JavaScript variables.

 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)
+- [@video@CSS Modules: Why are they great?](https://www.youtube.com/watch?v=pKMWU9OrA2s)
@@ -6,5 +6,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)
+- [@video@Cypress End-to-End Testing](https://www.youtube.com/watch?v=7N63cMKosIE)
@@ -1,8 +1,6 @@
 # Error Boundaries

-In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to emit cryptic errors on next renders. These errors were always caused by an earlier error in the application code, but React did not provide a way to handle them gracefully in components, and could not recover from them.
-
-Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.
+An error boundary is a component that catches JavaScript errors thrown by its child components during rendering, preventing the whole app from crashing. Instead of showing a broken UI, it can display a fallback message. Error boundaries only catch errors in the component tree below them, not in event handlers or asynchronous code.

 Visit the following resources to learn more:

@@ -1,9 +1,6 @@
 # Events

-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 wraps native browser events in its own system called synthetic events, so they behave consistently across different browsers. You attach event handlers directly in JSX, such as onClick or onChange, and they receive an event object similar to the native one. This lets components respond to user interaction like clicks, typing, or form submissions.

 Visit the following resources to learn more:

@@ -1,6 +1,6 @@
 # Formik

-Formik is another famous opensource form library that helps with getting values in and out of form state, validation and error messages, and handling form submissions.
+Formik is a library for building forms in React, handling values, validation, and submission through a consistent API. It uses controlled inputs, meaning form state is tracked in React state as the user types. It was one of the most popular form libraries before performance-focused alternatives like React Hook Form gained traction.

 Visit the following resources to learn more:

@@ -0,0 +1,8 @@
+# Formish
+
+Formish is a lightweight library designed to simplify the process of handling forms in web applications by managing state, validation, and submission logic with minimal boilerplate. It provides a set of hooks and components that allow you to track user input, display error messages, and handle form resets efficiently.
+
+Visit the following resources to learn more:
+
+- [@official@Formish](https://formisch.dev/)
+- [@opensource@formisch](https://github.com/open-circle/formisch)
@@ -1,6 +1,6 @@
 # Forms

-Although you can build forms using vanilla React, it normally requires a lot of boilerplate code. This is because the form is built using a combination of state and props. To make it easier to manage forms, we use some sort of library.
+Forms in React need extra handling compared to plain HTML, since input values are usually tied to component state to keep the UI in sync with user input. This includes tracking values, validating input, and showing error messages. Libraries exist to simplify this instead of writing all the state and validation logic by hand.

 Visit the following resources to learn more:

@@ -1,8 +1,6 @@
 # Framer Motion

-Framer Motion is a popular open-source motion library for React that allows developers to create sophisticated animations and interactions with ease. It is designed to be simple to use yet powerful, providing a rich set of tools to animate elements in a declarative way.
-
-It powers the amazing animations and interactions in Framer, the web builder for creative pros. Zero code, maximum speed.
+Framer Motion is an animation library for React that lets you animate components with simple props, such as defining an initial state, an animate state, and a transition. It supports gestures, layout animations, and page transitions, and integrates naturally with React's component model.

 Visit the following resources to learn more:

@@ -1,8 +1,6 @@
 # SSR Frameworks

-Server-side rendering (SSR) is a technique for rendering a JavaScript application on the server, rather than in the browser. This can improve the performance and user experience of a web application, as the initial render of the application is done on the server and the content is sent to the browser as a fully-rendered HTML page.
-
-There are several frameworks and libraries available for server-side rendering React applications, most common being Next.js and Remix:
+A framework built on top of React adds extra structure and features, such as routing, server-side rendering, or file-based page organization, that React itself does not provide. Choosing a framework can save time on setup and give a project a more opinionated, consistent structure from the start.

 Visit the following resources to learn more:

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

-Headless component libraries have some powerful state, logic and data management tools that do not enforce any UI structure. Consequently, developers are able to build custom UI components with unique styles but that still benefit from strong reusable logics. This kind of library simplifies complex behaviors and accessibility issues in outdoor environments allowing you to create innovative interfaces. With headless components, developers keep code clean and maintainable as a result of the reusability aspect inherent in these, this also guarantees efficient and accessible components enhancing application quality.
+Headless component libraries provide the logic and accessibility behavior of UI components, like managing open and closed states or keyboard navigation, without any built-in styling. Developers apply their own CSS or design system on top. This gives more design flexibility compared to libraries that ship with fixed visual styles.

 Visit the following resources to learn more:

@@ -1,16 +1,10 @@
 # High Order Components

-A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.
-
-Concretely, a higher-order component is a function that takes a component and returns a new component.
-
-Higher-order components are not commonly used in modern React code. In order to reuse logic, React hooks are mainly used now.
+A higher order component, often shortened to HOC, is a function that takes a component and returns a new component with extra behavior or props added. It is a pattern for reusing logic across multiple components, such as handling authentication checks or loading states. Hooks have replaced many use cases for HOCs, but the pattern still shows up in some libraries.

 Visit the following resources to learn more:

 - [@article@High-Order Components](https://reactjs.org/docs/higher-order-components.html)
 - [@article@How to create a Higher-Order Component](https://www.robinwieruch.de/react-higher-order-components/)
 - [@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 1)](https://www.youtube.com/watch?v=B6aNv8nkUSw)
@@ -7,5 +7,4 @@ 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/)
@@ -1,8 +1,7 @@
 # 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.
+Hooks are functions that let you use React features like state and lifecycle behavior inside function components. They were introduced to avoid the need for class components when handling things like data fetching or subscriptions. Every hook name starts with "use", such as useState or useEffect, and they must be called in the same order on every render.

 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)
+- [@official@Hooks Reference](https://react.dev/reference/react)
@@ -1,9 +1,8 @@
 # Jest

-Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!
+Jest is a JavaScript testing framework commonly used for unit and integration tests in React projects. It includes a test runner, assertion library, and mocking tools all in one package, so there is little extra setup needed. It has been a default choice for React testing for many years.

 Visit the following resources to learn more:

 - [@official@Jest Website](https://jestjs.io/)
- [@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)
+- [@article@Testing JavaScript with Jest on Vultr](https://developer.mozilla.org/en-US/blog/test-javascript-with-jest-on-vultr/)
@@ -1,8 +1,6 @@
 # Jotai

-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.
+Jotai is a state management library built around small, independent units of state called atoms. Instead of one large central store, you create atoms as needed and combine them however you like. It fits well with React's component model, since components only subscribe to the atoms they actually use.

 Visit the following resources to learn more:

@@ -1,10 +1,9 @@
 # JSX

-JSX stands for JavaScript XML. It allows writing HTML in JavaScript and converts the HTML tags into React elements.
+JSX is a syntax extension for JavaScript that lets you write HTML-like code inside your JavaScript files. React uses it to describe what the UI should look like, and it gets compiled into regular JavaScript function calls behind the scenes. Writing markup and logic in the same file makes components easier to understand at a glance.

 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)
+- [@article@Working with JSX - React - CodeGuage](https://www.codeguage.com/courses/react/jsx)
@@ -1,6 +1,6 @@
 # Lists and Keys

-When you render lists in React, you can use the `key` prop to specify a unique key for each item. This key is used to identify which item to update when you want to update a specific item.
+Rendering a list in React usually means mapping over an array of data and returning a component for each item. React needs a unique key for each item in the list so it can track which elements changed, were added, or were removed. Without proper keys, React may re-render list items incorrectly or lose track of their state.

 Visit the following resources to learn more:

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

-Material UI is an open-source React component library that implements Google's Material Design.
+Material UI, often called MUI, is a component library that implements Google's Material Design guidelines in React. It provides a wide range of components, from buttons to complex data tables, with built-in theming support. It is one of the older and more widely adopted component libraries in the React ecosystem.

 Visit the following resources to learn more:

@@ -1,4 +1,6 @@
-# Mobile
+# Mobile Applications
+
+React can be extended beyond the web to build mobile applications, reusing similar concepts like components, props, and state. This lets developers apply React knowledge to build apps that run on iOS and Android, instead of learning a completely separate native development stack.

 Visit the following resources to learn more:

@@ -1,5 +1,7 @@
 # MobX

+MobX is a state management library based on observable data, where changes to state automatically trigger updates in any component using that data. It relies on decorators or plain functions to mark state as observable, and React components re-render only when the specific data they use changes. It takes a more reactive, less explicit approach compared to libraries like Redux.
+
 Visit the following resources to learn more:

 - [@official@Official Website: MobX](https://mobx.js.org/)
@@ -1,12 +1,10 @@
 # Next.js

-Next.js is an open-source development framework built on top of Node.js enabling React based web applications functionalities such as server-side rendering and generating static websites.
+Next.js is a React framework that adds features like server-side rendering, static site generation, and file-based routing on top of React. It handles a lot of the setup that would otherwise need to be configured manually, and it is widely used for production applications that need good performance and SEO.

 Visit the following resources to learn more:

- [@official@Official Website](https://nextjs.org/)
+- [@roadmap@Visit the Dedicated Next.js Roadmap](https://roadmap.sh/nextjs)
 - [@official@Official Docs for Getting Started](https://nextjs.org/docs/getting-started)
 - [@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)
+- [@video@Next.js Full course](https://www.youtube.com/watch?v=9P8mASSREYM&list=PLC3y8-rFHvwgC9mj0qv972IO5DmD-H0ZH)
@@ -1,6 +1,6 @@
 # Panda CSS

-Panda CSS is CSS-in-JS with build time generated styles, RSC compatible, multi-variant support, and best-in-class developer experience.
+Panda CSS is a CSS-in-JS tool that generates static CSS at build time instead of at runtime. You write styles using a type-safe API in your components, and Panda extracts and compiles them into optimized CSS files. This gives some of the developer experience of CSS-in-JS without the runtime performance cost.

 Visit the following resources to learn more:

@@ -1,6 +1,6 @@
 # Playwright

-Playwright Test was created specifically to accommodate the needs of end-to-end testing. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox. Test on Windows, Linux, and macOS, locally or on CI, headless or headed with native mobile emulation of Google Chrome for Android and Mobile Safari.Playwright leverages the DevTools protocol to write powerful, stable automated tests.Playwright can actually see into and control the browser rather than relying on a middle translation layer, it allows for the simulation of more insightful and relevant user scenarios.
+Playwright is an end-to-end testing tool built by Microsoft that can run tests across multiple browsers, including Chromium, Firefox, and WebKit. It supports features like automatic waiting for elements and parallel test execution, which helps keep test suites fast and reliable as they grow.

 Visit the following resources to learn more:

@@ -1,6 +1,6 @@
 # Portals

-Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
+A portal lets you render a component's children into a different part of the DOM, outside its parent's normal hierarchy. This is useful for things like modals or tooltips that need to visually sit above other content, even though logically they still belong to their original component in React's tree.

 Visit the following resources to learn more:

@@ -1,9 +1,8 @@
 # React hook form

-React hook form is an opensource form library for react. Performant, flexible and extensible forms with easy-to-use validation.
+React Hook Form is a library for managing form state and validation in React with minimal re-renders. It uses uncontrolled inputs by default, registering fields through refs instead of updating state on every keystroke, which improves performance for large forms. It integrates with validation libraries like Zod or Yup.

 Visit the following resources to learn more:

 - [@opensource@react-hook-form/react-hook-form](https://github.com/react-hook-form/react-hook-form)
- [@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)
+- [@article@React Hook Form: Official Website](https://react-hook-form.com/)
@@ -4,6 +4,6 @@ React Native is an open-source UI software framework created by Meta Platforms,

 Visit the following resources to learn more:

+- [@roadmap@Visit the Dedicated React Native Roadmap](https://roadmap.sh/react-native)
 - [@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)
+- [@official@Official Getting Started](https://reactnative.dev/docs/getting-started)
@@ -1,8 +1,8 @@
 # react-router

-There used to be Remix in this list but they announced to merge Remix into react-router after v7.
+As a framework, react-router extends beyond simple client-side navigation to include features like data loading, actions, and nested layouts, similar to what full frameworks like Next.js offer. It grew out of the original React Router library into a more complete solution for building routed applications.

 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@Official Website](https://reactrouter.com/)
+- [@opensource@remix-run react-router](https://github.com/remix-run/react-router)
@@ -5,5 +5,4 @@ The React Testing Library is a very lightweight solution for testing React compo
 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)
+- [@article@How to use React Testing Library](https://www.robinwieruch.de/react-testing-library/)
@@ -1,14 +1,10 @@
 # Refs

-Refs provide a way to access DOM nodes or React elements created in the render method.
-
-In the typical React dataflow, props are the only way that parent components interact with their children. To modify a child, you re-render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. The child to be modified could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch.
+A render prop is a pattern where a component takes a function as a prop and calls it to decide what to render. This allows the component to share logic with whatever gets rendered, without dictating the exact UI. It was common before hooks existed, and hooks now cover many of the same use cases in a simpler way.

 Visit the following resources to learn more:

 - [@official@Referencing Values with Refs](https://react.dev/learn/referencing-values-with-refs)
 - [@official@Manipulating the DOM with Refs](https://react.dev/learn/manipulating-the-dom-with-refs)
 - [@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)
@@ -1,8 +1,6 @@
 # Render Props

-The term 'render props' refers to a technique for sharing code between React components using a prop whose value is a function.
-
-A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.
+A render prop is a pattern where a component takes a function as a prop and calls it to decide what to render. This allows the component to share logic with whatever gets rendered, without dictating the exact UI. It was common before hooks existed, and hooks now cover many of the same use cases in a simpler way.

 Visit the following resources to learn more:

@@ -1,15 +1,6 @@
 # Rendering

-React follows a declarative approach to rendering components, which means that developers specify what a component should look like, and React takes care of rendering the component to the screen. This is in contrast to an imperative approach, where developers would write code to manually manipulate the DOM (Document Object Model) to update the UI.
-
-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.
-
-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.
+Rendering is the process where React takes your component code and turns it into actual elements on the screen. React decides when to re-render a component based on changes to its state or props. Understanding how rendering works helps explain why an app updates the way it does, and where performance issues can come from.

 Visit the following resources to learn more:

@@ -1,6 +1,6 @@
 # Routing

-Routing is an essential concept in Single Page Applications (SPA). When your application is divided into separated logical sections, and all of them are under their own URL, your users can easily share links among each other.
+A router in React handles navigation between different views or pages without reloading the whole browser page. It matches the current URL to a specific component and renders it, giving the app the feel of multiple pages while staying a single-page application. Several libraries exist to add this functionality, since React itself does not include routing.

 Visit the following resources to learn more:

@@ -1,13 +1,6 @@
 # Suspense

-React Suspense is a feature in React that allows components to "suspend" rendering while they are waiting for something to happen, such as data to be fetched from an API or an image to be loaded. Suspense allows developers to create a more seamless user experience by rendering a placeholder or fallback component while the component is waiting for the required data to be available.
-
-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.
+Suspense is a React feature that lets a component "wait" for something, such as data or code, before rendering, showing a fallback UI in the meantime. It was originally built for code splitting with lazy loading, and has since been extended to support data fetching in some frameworks and libraries.

 Visit the following resources to learn more:

@@ -1,12 +1,7 @@
 # SWR

-SWR is a React Hooks library for data fetching.
-
-The name “SWR” is derived from stale-while-revalidate, a cache invalidation strategy popularized by HTTP RFC 5861. SWR first returns the data from cache (stale), then sends the request (revalidate), and finally comes with the up-to-date data again.
-
-With just one hook, you can significantly simplify the data fetching logic in your project.
+SWR is a data fetching library for React whose name comes from "stale-while-revalidate", a caching strategy where old data is shown immediately while fresh data loads in the background. It handles caching, revalidation, and re-fetching on focus or network reconnect with minimal setup. It was built by the team behind Next.js.

 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)
+- [@article@SWR: React Hooks for Data Fetching](https://swr.vercel.app/)
@@ -1,12 +1,10 @@
 # Tailwind CSS

-CSS Framework that provides atomic CSS classes to help you style components e.g. `flex`, `pt-4`, `text-center` and `rotate-90` that can be composed to build any design, directly in your markup.
+Tailwind CSS is a utility-first CSS framework where you style elements by combining small, single-purpose classes directly in your markup. Instead of writing custom CSS files, you apply classes like flex, p-4, or text-center straight in the JSX. It speeds up styling and keeps design consistent, though it can make markup more verbose.

 Visit the following resources to learn more:

- [@article@Tailwind Website](https://tailwindcss.com)
+- [@official@Tailwind Website](https://tailwindcss.com)
 - [@video@Tailwind CSS Full Course for Beginners](https://www.youtube.com/watch?v=lCxcTsOHrjo)
 - [@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)
+- [@video@Should You Use Tailwind CSS?](https://www.youtube.com/watch?v=hdGsFpZ0J2E)
@@ -7,5 +7,4 @@ Visit the following resources to learn more:
 - [@official@TanStack Query](https://tanstack.com/query/latest)
 - [@opensource@TanStack Query](https://github.com/TanStack/query)
 - [@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)
+- [@video@TanStack Query - How to become a React Query God](https://www.youtube.com/watch?v=mPaCnwpFvZY)
@@ -1,6 +1,6 @@
 # TanStack Router

-TanStack Router is a powerful router for building React applications, offering a range of advanced features to streamline development.
+Tanstack Router is a routing library built with type safety in mind, generating types based on your route definitions. It supports features like nested routes, loaders for fetching data before a page renders, and search parameter validation. It is part of the same family of tools as Tanstack Query.

 Visit the following resources to learn more:

@@ -5,5 +5,4 @@ A key to building software that meets requirements without defects is testing. S
 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)
+- [@article@Testing Pyramid](https://www.browserstack.com/guide/testing-pyramid-for-test-automation)
@@ -1,8 +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.
-
-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.
+Types and validation in a React app help catch mistakes early and make sure data matches the expected shape, whether it comes from user input, an API, or props. Static typing checks this at compile time, while validation libraries check it at runtime, and the two are often used together.

 Visit the following resources to learn more:

@@ -1,10 +1,10 @@
 # TypeScript

-TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
+TypeScript is a superset of JavaScript that adds static typing, letting you catch type-related errors before running the code. In React, it is used to type props, state, and function signatures, which helps catch mistakes like passing the wrong data to a component. Most modern React projects use TypeScript instead of plain JavaScript.

 Visit the following resources to learn more:

+- [@roadmap@Visit the Dedicated TypeScript Roadmap](https://roadmap.sh/typescript)
 - [@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)
+- [@video@TypeScript for Beginners](https://www.youtube.com/watch?v=BwuLxPH8IDs)
@@ -1,15 +1,6 @@
 # urql

-urql (Universal React Query Library) is a library for managing GraphQL data in React applications. It is developed and maintained by Formidable Labs and is available as open-source software.
-
-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.
-
-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.
+urql is a lightweight GraphQL client for React, built to be simpler and smaller than alternatives like Apollo or Relay. It supports caching, and its behavior can be extended through a system of exchanges, which are similar to middleware. It suits projects that want GraphQL support without a heavy setup.

 Visit the following resources to learn more:

@@ -0,0 +1,8 @@
+# Valibot
+
+Valibot is a modular and type-safe schema validation library designed to be extremely lightweight and fast. It allows you to define schemas for your data and automatically infer TypeScript types from them, ensuring that the inputs your application receives match the expected structure. It provides a simple way to validate form data, API responses, or configuration objects without the overhead of larger validation alternatives.
+
+Visit the following resources to learn more:
+
+- [@official@Valibot - Alternative to Zod](https://valibot.dev/)
+- [@opensource@valibot](https://github.com/open-circle/valibot)
@@ -1,11 +1,10 @@
 # Vite

-Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.
+Vite is a build tool that starts a development server almost instantly and updates the browser as soon as you save a file. It uses native ES modules during development instead of bundling everything upfront, which makes it much faster than older tools. Many React projects use Vite to scaffold a new app and handle the build process for production.

 Visit the following resources to learn more:

 - [@official@Vite Website](https://vitejs.dev)
 - [@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)
+- [@video@Vite Crash Course | Faster Alternative To CRA | 2023](https://www.youtube.com/watch?v=89NJdbYTgJ8)
@@ -1,6 +1,6 @@
 # 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 testing framework built to work closely with Vite, sharing its configuration and fast startup time. It is designed as a drop-in alternative to Jest, with a similar API but faster execution, especially in projects already using Vite for their build setup.

 Visit the following resources to learn more:

@@ -4,4 +4,5 @@ While "CSS in JS" is the most predominant way of styling modern frontend applica

 Visit the following resources to learn more:

+- [@roadmap@Visit the Dedicated CSS Roadmap](https://roadmap.sh/css)
 - [@article@Ways to CSS style a React application](https://www.robinwieruch.de/react-css-styling/)
@@ -1,11 +1,8 @@
 # Zod

-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 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.
+Zod is a schema validation library for TypeScript that lets you define the shape of your data and validate it at runtime, while also inferring TypeScript types from that same schema. It is commonly used to validate form input or API responses, so the same source of truth defines both validation and types.

 Visit the following resources to learn more:

 - [@official@Zod Website](https://zod.dev/)
- [@official@Valibot - Alternative to Zod](https://valibot.dev/)
 - [@video@Learn Zod In 30 Minutes](https://www.youtube.com/watch?v=L6BE-U3oy80)
@@ -1,13 +1,10 @@
 # Zustand

-Zustand is a small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy api based on hooks, isn't boilerplatey or opinionated.
-
-Zustand is often used as an alternative to other state management libraries, such as Redux and MobX, because of its simplicity and small size. It is particularly well-suited for small to medium-sized applications, where the complexity of larger state management libraries is not required.
+Zustand is a small state management library that uses a single store defined with a simple function, without requiring reducers or actions like Redux. Components can read and update the store directly through a hook, with minimal boilerplate. Its simplicity and small bundle size make it a common choice for apps that outgrow plain Context.

 Visit the following resources to learn more:

- [@opensource@Zustand - Official Website](https://github.com/pmndrs/zustand)
+- [@official@Zustand - Official Website](https://zustand-demo.pmnd.rs/)
 - [@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)
 - [@video@Zustand Tutorial for Beginners](https://www.youtube.com/watch?v=AYO4qHAnLQI&t)