mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2026-03-12 17:51:53 +08:00
chore: sync content to repo (#9397)
Co-authored-by: kamranahmedse <4921183+kamranahmedse@users.noreply.github.com>
This commit is contained in:
github-actions[bot]
committed by
GitHub
GitHub
parent
8dbc161e01
commit
c8d6f69d59
@@ -6,4 +6,4 @@ Visit the following resources to learn more:
|
||||
|
||||
- [@article@Framer Motion Docs](https://www.framer.com/motion/)
|
||||
- [@article@GSAP Docs](https://gsap.com/docs/v3/)
|
||||
- [@article@React Spring Docs](https://www.react-spring.dev/docs/getting-started)
|
||||
- [@article@React Spring Docs](https://www.react-spring.dev/docs/getting-started)
|
||||
@@ -1,9 +1,8 @@
|
||||
# API Calls
|
||||
|
||||
APIs, short for Application Programming Interfaces, are software-to-software interfaces. Meaning, they allow different applications to talk to each other and exchange information or functionality. This allows businesses to access another business’s data, piece of code, software, or services in order to extend the functionality of their own products — all while saving time and money.
|
||||
There are several options available to make API calls from your React.js applications.
|
||||
APIs, short for Application Programming Interfaces, are software-to-software interfaces. Meaning, they allow different applications to talk to each other and exchange information or functionality. This allows businesses to access another business’s data, piece of code, software, or services in order to extend the functionality of their own products — all while saving time and money. There are several options available to make API calls from your React.js applications.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@AJAX and APIs](https://reactjs.org/docs/faq-ajax.html)
|
||||
- [@article@How to fetch data in React](https://www.robinwieruch.de/react-hooks-fetch-data/)
|
||||
- [@article@How to fetch data in React](https://www.robinwieruch.de/react-hooks-fetch-data/)
|
||||
@@ -8,4 +8,4 @@ Visit the following resources to learn more:
|
||||
- [@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)
|
||||
- [@feed@Explore top posts about Apollo](https://app.daily.dev/tags/apollo?ref=roadmapsh)
|
||||
@@ -6,5 +6,5 @@ Visit the following resources to learn more:
|
||||
|
||||
- [@official@Official Website](https://ark-ui.com/)
|
||||
- [@official@Official Website](https://ark-ui.com/react/docs/overview/introduction)
|
||||
- [@video@Hands On ARK UI](https://www.youtube.com/watch?v=zjo-77I0unk)
|
||||
- [@article@What is ARK UI?](https://shaxadd.medium.com/enhance-your-user-interfaces-with-ark-ui-a-comprehensive-guide-7e87dd0a79cf)
|
||||
- [@video@Hands On ARK UI](https://www.youtube.com/watch?v=zjo-77I0unk)
|
||||
@@ -6,4 +6,4 @@ Visit the following resources to learn more:
|
||||
|
||||
- [@official@Astro Website](https://astro.build/)
|
||||
- [@video@Astro Crash Course in 60 Minutes](https://www.youtube.com/watch?v=NniT0vKyn-E)
|
||||
- [@video@How To: Add/Integrate React.js and TailwindCss into Astro framework](https://www.youtube.com/watch?v=d6CsWTVa42o)
|
||||
- [@video@How To: Add/Integrate React.js and TailwindCss into Astro framework](https://www.youtube.com/watch?v=d6CsWTVa42o)
|
||||
@@ -8,4 +8,4 @@ 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)
|
||||
- [@feed@Explore top posts about Axios](https://app.daily.dev/tags/axios?ref=roadmapsh)
|
||||
@@ -7,4 +7,4 @@ Visit the following resources to learn more:
|
||||
- [@article@Chakra UI Website](https://chakra-ui.com/)
|
||||
- [@article@Chakra UI Official Getting Started](https://chakra-ui.com/docs/getting-started)
|
||||
- [@video@Official Getting Started Video](https://youtu.be/wI2vqXsjsIo)
|
||||
- [@video@Chakra UI Crash Course](https://youtu.be/s-bIsz-NR3c)
|
||||
- [@video@Chakra UI Crash Course](https://youtu.be/s-bIsz-NR3c)
|
||||
@@ -1,6 +1,6 @@
|
||||
# CLI Tools
|
||||
|
||||
Here is the list of most common CLI tools for React development:
|
||||
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)
|
||||
- [@feed@Explore top posts about CLI](https://app.daily.dev/tags/cli?ref=roadmapsh)
|
||||
@@ -1,8 +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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@MUI: React Component Library](https://mui.com/)
|
||||
- [@article@NextUI.org](https://nextui.org/)
|
||||
# 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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@MUI: React Component Library](https://mui.com/)
|
||||
- [@article@NextUI.org](https://nextui.org/)
|
||||
@@ -11,4 +11,4 @@ Visit the following resources to learn more:
|
||||
- [@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@lifecycle diagram](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)
|
||||
@@ -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)
|
||||
@@ -4,7 +4,7 @@ React has a powerful composition model, and it is recommended to use composition
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Passing JSX as children](https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children)
|
||||
- [@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)
|
||||
- [@article@Achieving Reusability With React Composition](https://formidable.com/blog/2021/react-composition/)
|
||||
@@ -8,4 +8,4 @@ Visit the following resources to learn more:
|
||||
|
||||
- [@official@Conditional Rendering](https://react.dev/learn/conditional-rendering)
|
||||
- [@article@Different techniques for conditional rendering in React](https://www.robinwieruch.de/conditional-rendering-react/)
|
||||
- [@video@Conditional rendering in React](https://www.youtube.com/watch?v=4oCVDkb_EIs)
|
||||
- [@video@Conditional rendering in React](https://www.youtube.com/watch?v=4oCVDkb_EIs)
|
||||
@@ -7,5 +7,5 @@ In a typical React application, data is passed top-down (parent to child) via pr
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Passing Data Deeply with Context](https://react.dev/learn/passing-data-deeply-with-context)
|
||||
- [@video@React Context API Crash Course](https://www.youtube.com/watch?v=t9WmZFnE6Hg)
|
||||
- [@article@State with useContext and useState/useReducer](https://www.robinwieruch.de/react-state-usereducer-usestate-usecontext/)
|
||||
- [@video@React Context API Crash Course](https://www.youtube.com/watch?v=t9WmZFnE6Hg)
|
||||
@@ -5,6 +5,6 @@ Building your own Hooks lets you extract component logic into reusable functions
|
||||
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)
|
||||
- [@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)
|
||||
@@ -7,4 +7,4 @@ 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)
|
||||
- [@feed@Explore top posts about CSS](https://app.daily.dev/tags/css?ref=roadmapsh)
|
||||
@@ -7,4 +7,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)
|
||||
- [@feed@Explore top posts about Cypress](https://app.daily.dev/tags/cypress?ref=roadmapsh)
|
||||
@@ -6,4 +6,4 @@ Error boundaries are React components that catch JavaScript errors anywhere in t
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Error Boundaries in React](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)
|
||||
- [@official@Error Boundaries in React](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)
|
||||
@@ -2,11 +2,11 @@
|
||||
|
||||
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 events are named using camelCase, rather than lowercase.
|
||||
* With JSX you pass a function as the event handler, rather than a string.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Responding to Events](https://react.dev/learn/responding-to-events)
|
||||
- [@official@React Event Object (Synthetic Event)](https://react.dev/reference/react-dom/components/common#react-event-object)
|
||||
- [@article@React Event Handler](https://www.robinwieruch.de/react-event-handler/)
|
||||
- [@article@React Event Handler](https://www.robinwieruch.de/react-event-handler/)
|
||||
@@ -5,6 +5,6 @@ Formik is another famous opensource form library that helps with getting values
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Official Website — Formik](https://formik.org/)
|
||||
- [@video@Formik - Building React Forms easier](https://www.youtube.com/watch?v=khGypss-RJs)
|
||||
- [@video@React Formik Tutorial with Yup (React Form Validation)](https://www.youtube.com/watch?v=7Ophfq0lEAY)
|
||||
- [@opensource@formik/formik](https://github.com/formik/formik)
|
||||
- [@video@Formik - Building React Forms easier](https://www.youtube.com/watch?v=khGypss-RJs)
|
||||
- [@video@React Formik Tutorial with Yup (React Form Validation)](https://www.youtube.com/watch?v=7Ophfq0lEAY)
|
||||
@@ -5,4 +5,4 @@ Although you can build forms using vanilla React, it normally requires a lot of
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@How to use Forms in React](https://www.robinwieruch.de/react-form/)
|
||||
- [@video@React Forms: the SIMPLEST way](https://www.youtube.com/watch?v=CT-72lTXdPg)
|
||||
- [@video@React Forms: the SIMPLEST way](https://www.youtube.com/watch?v=CT-72lTXdPg)
|
||||
@@ -7,4 +7,4 @@ It powers the amazing animations and interactions in Framer, the web builder for
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Framer Motion Website](https://www.framer.com/motion/introduction/)
|
||||
- [@video@Framer Motion Crash Course with React & TS](https://www.youtube.com/watch?v=hjbxaYTMhy0&list=PLA4qBVt61k3Phpwt7uqaptIg9NYZ5aNu_)
|
||||
- [@video@Framer Motion Crash Course with React & TS](https://www.youtube.com/watch?v=hjbxaYTMhy0&list=PLA4qBVt61k3Phpwt7uqaptIg9NYZ5aNu_)
|
||||
@@ -7,6 +7,6 @@ There are several frameworks and libraries available for server-side rendering R
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Next.js](https://nextjs.org/)
|
||||
- [@video@Next.js 14 Full Course 2024](https://www.youtube.com/watch?v=wm5gMKuwSYk)
|
||||
- [@article@Remix](https://remix.run/)
|
||||
- [@video@Remix Crash Course](https://www.youtube.com/watch?v=RBYJTop1e-g)
|
||||
- [@video@Next.js 14 Full Course 2024](https://www.youtube.com/watch?v=wm5gMKuwSYk)
|
||||
- [@video@Remix Crash Course](https://www.youtube.com/watch?v=RBYJTop1e-g)
|
||||
@@ -9,4 +9,4 @@ Visit the following resources to learn more:
|
||||
- [@official@Passing props to a component](https://react.dev/learn/passing-props-to-a-component)
|
||||
- [@article@Functional Components in React](https://www.robinwieruch.de/react-function-component/)
|
||||
- [@video@React JS Functional Components](https://www.youtube.com/watch?v=NJ_qbsLf52w)
|
||||
- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)
|
||||
- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)
|
||||
@@ -5,5 +5,5 @@ Headless component libraries have some powerful state, logic and data management
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@What are headless components?](https://dev.to/verthon/headless-ui-libraries-the-key-to-flexible-and-accessible-user-interfaces-546p)
|
||||
- [@video@Rise of Headless Components](https://www.youtube.com/watch?v=_WtVG_pKsxM)
|
||||
- [@article@Headless Components: A Comprehensive Guide](https://blog.logrocket.com/the-complete-guide-to-building-headless-interface-components-in-react/)
|
||||
- [@video@Rise of Headless Components](https://www.youtube.com/watch?v=_WtVG_pKsxM)
|
||||
@@ -13,4 +13,4 @@ Visit the following resources to learn more:
|
||||
- [@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 3)](https://www.youtube.com/watch?v=l8V59zIdBXU)
|
||||
@@ -2,10 +2,10 @@
|
||||
|
||||
To fully leverage the capabilities of React Hooks, it is crucial to adopt best practices that not only enhance code readability but also optimize performance. By adhering to these practices, developers can create cleaner, more maintainable components that make the most of React's powerful features, leading to a more efficient and enjoyable development experience.
|
||||
|
||||
Learn more from the following resources:
|
||||
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/)
|
||||
- [@article@React Custom Hooks: Best Practices and Examples](https://utopia-insights.dev/react-custom-hooks-best-practices-and-examples/)
|
||||
@@ -5,4 +5,4 @@ Hooks were introduced in React 16.8 and they let us use React's features-like ma
|
||||
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)
|
||||
- [@feed@Explore top posts about React Hooks](https://app.daily.dev/tags/react-hooks?ref=roadmapsh)
|
||||
@@ -5,5 +5,5 @@ Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Jest Website](https://jestjs.io/)
|
||||
- [@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/)
|
||||
- [@feed@Explore top posts about Jest](https://app.daily.dev/tags/jest?ref=roadmapsh)
|
||||
@@ -4,8 +4,8 @@ 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.
|
||||
|
||||
It scales from a simple useState replacement to an enterprise TypeScript application with complex requirements. Plus there are plenty of utilities and extensions to help you along the way!
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@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)
|
||||
- [@video@Jotai React - Better Global State Management](https://www.youtube.com/watch?v=ZcKzPZN7Ids)
|
||||
@@ -7,4 +7,4 @@ 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)
|
||||
- [@feed@Explore top posts about JSX](https://app.daily.dev/tags/jsx?ref=roadmapsh)
|
||||
@@ -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/)
|
||||
@@ -2,8 +2,8 @@
|
||||
|
||||
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.
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@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)
|
||||
- [@video@Material UI with React](https://www.youtube.com/watch?v=5cvg2qZwYrI)
|
||||
@@ -1,6 +1,6 @@
|
||||
# Mobile
|
||||
|
||||
React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use the React framework along with native platform capabilities.
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@React Native Official website](https://reactnative.dev/)
|
||||
- [@video@React Native Course for Beginners](https://www.youtube.com/watch?v=ZBCUegTZF7M)
|
||||
- [@video@React Native Course for Beginners](https://www.youtube.com/watch?v=ZBCUegTZF7M)
|
||||
@@ -1,8 +1,8 @@
|
||||
# MobX
|
||||
|
||||
MobX is a powerful and intuitive state management library that enhances application scalability and simplicity through its use of functional reactive programming. The core philosophy of MobX is rooted in straightforwardness and efficiency. Developers can write minimalistic, boilerplate-free code that clearly expresses their intentions. For instance, updating a record field is as simple as performing a standard JavaScript assignment, with MobX automatically detecting changes and propagating them throughout the application. This eliminates the need for specialized tools in asynchronous data processes.
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Official Website: MobX](https://mobx.js.org/)
|
||||
- [@video@Mobx React - State Management](https://www.youtube.com/watch?v=AgcaGGkYy_8)
|
||||
- [@video@MobX Tutorial with React and Typescript](https://www.youtube.com/watch?v=ElgfQdq-Htk)
|
||||
- [@article@How to Improve State Management in React with MobX](https://medium.com/whitespectre/how-to-improve-state-management-in-react-with-mobx-568808ff86a4)
|
||||
- [@video@Mobx React - State Management](https://www.youtube.com/watch?v=AgcaGGkYy_8)
|
||||
- [@video@MobX Tutorial with React and Typescript](https://www.youtube.com/watch?v=ElgfQdq-Htk)
|
||||
@@ -6,7 +6,7 @@ Visit the following resources to learn more:
|
||||
|
||||
- [@official@Official Website](https://nextjs.org/)
|
||||
- [@official@Official Docs for Getting Started](https://nextjs.org/docs/getting-started)
|
||||
- [@video@Next.js Full course](https://www.youtube.com/watch?v=9P8mASSREYM\&list=PLC3y8-rFHvwgC9mj0qv972IO5DmD-H0ZH)
|
||||
- [@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)
|
||||
- [@feed@Explore top posts about JavaScript](https://app.daily.dev/tags/javascript?ref=roadmapsh)
|
||||
@@ -6,5 +6,5 @@ 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/)
|
||||
- [@video@Panda CSS First Impressions | Theo Reacts](https://www.youtube.com/watch?v=UlY-Ixddjm0)
|
||||
@@ -5,5 +5,5 @@ Playwright Test was created specifically to accommodate the needs of end-to-end
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Official Website: Playwright](https://playwright.dev/)
|
||||
- [@video@Get started with end-to-end testing: Playwright](https://www.youtube.com/playlist?list=PLQ6Buerc008ed-F9OksF7ek37wR3y916p)
|
||||
- [@article@Playwright Tutorial: Learn Basics and Setup](https://www.browserstack.com/guide/playwright-tutorial)
|
||||
- [@video@Get started with end-to-end testing: Playwright](https://www.youtube.com/playlist?list=PLQ6Buerc008ed-F9OksF7ek37wR3y916p)
|
||||
@@ -5,4 +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)
|
||||
- [@video@React Portals](https://www.youtube.com/watch?v=HpHLa-5Wdys)
|
||||
@@ -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/)
|
||||
@@ -6,5 +6,5 @@ Visit the following resources to learn more:
|
||||
|
||||
- [@official@Getting Started with Radix UI](https://www.radix-ui.com/themes/docs/overview/getting-started)
|
||||
- [@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)
|
||||
- [@video@Radix UI Course](https://www.youtube.com/playlist?list=PLlNdnoKwDZdwANQoaakE8-kYMyKFOETlo)
|
||||
@@ -5,4 +5,4 @@ React Aria is style-free out of the box, allowing you to build custom designs to
|
||||
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)
|
||||
- [@video@Why You Should Use React Aria Components](https://www.youtube.com/watch?v=lTPh6NGLAmk)
|
||||
@@ -4,6 +4,6 @@ React hook form is an opensource form library for react. Performant, flexible an
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@React Hook Form: Official Website](https://react-hook-form.com/)
|
||||
- [@opensource@react-hook-form/react-hook-form](https://github.com/react-hook-form/react-hook-form)
|
||||
- [@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/)
|
||||
- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)
|
||||
@@ -6,4 +6,4 @@ Visit the following resources to learn more:
|
||||
|
||||
- [@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)
|
||||
- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)
|
||||
@@ -1,10 +1,11 @@
|
||||
# React Query
|
||||
# TanStack Query
|
||||
|
||||
Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue.
|
||||
TanStack Query, previously known as React Query, is a powerful library for fetching, caching, synchronizing, and updating server state in your React applications. It simplifies the process of handling asynchronous data, reducing boilerplate code and improving the user experience by providing features like automatic retries, background updates, and optimistic updates. It essentially helps you manage data fetching and caching in a declarative and efficient way.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@opensource@TanStack Query](https://github.com/TanStack/query)
|
||||
- [@video@React Query in 100 Seconds](https://www.youtube.com/watch?v=novnyCaa7To)
|
||||
- [@video@React Query Tutorial for Beginners - Complete Playlist](https://www.youtube.com/playlist?list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2)
|
||||
- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)
|
||||
- [@official@TanStack Query](https://tanstack.com/query/latest)
|
||||
- [@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)
|
||||
@@ -5,4 +5,4 @@ There used to be Remix in this list but they announced to merge Remix into react
|
||||
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@Announcement to merge Remix into react-router](https://remix.run/blog/merging-remix-and-react-router)
|
||||
@@ -1,7 +1,9 @@
|
||||
# React Router
|
||||
|
||||
React router is the most famous library when it comes to implementing routing in React applications.
|
||||
React Router is a standard library for routing in React applications. It enables navigation between different views or components within a single-page application (SPA) without requiring the browser to reload the page. It provides a declarative way to define routes and map them to specific components, allowing users to seamlessly navigate through different parts of the application.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@React Router — Official Website](https://reactrouter.com/)
|
||||
- [@article@What is React Router?](https://www.w3schools.com/react/react_router.asp)
|
||||
- [@article@React Router V7: A Crash Course](https://dev.to/pedrotech/react-router-v7-a-crash-course-2m86)
|
||||
@@ -5,5 +5,5 @@ React Spring is a popular animation library for React that leverages the princip
|
||||
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/)
|
||||
- [@video@React Spring Crash Course](https://www.youtube.com/watch?v=f2vdduklY20&list=PLLnpHn493BHGrM7tAQL8qVtqwqzbuuE5_)
|
||||
@@ -6,4 +6,4 @@ 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)
|
||||
- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)
|
||||
@@ -11,4 +11,4 @@ Visit the following resources to learn more:
|
||||
- [@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)
|
||||
- [@video@Learn useRef in 11 Minutes - Web Dev Simplified](https://www.youtube.com/watch?v=t2ypzz6gJm0)
|
||||
@@ -5,4 +5,4 @@ Relay is a JavaScript client used in the browser to fetch GraphQL data. It's a J
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Official Website](https://relay.dev/)
|
||||
- [@official@Introduction to Relay modern](https://relay.dev/docs/)
|
||||
- [@official@Introduction to Relay modern](https://relay.dev/docs/)
|
||||
@@ -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/)
|
||||
@@ -4,10 +4,10 @@ React follows a declarative approach to rendering components, which means that d
|
||||
|
||||
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.
|
||||
* 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.
|
||||
|
||||
@@ -15,4 +15,4 @@ Visit the following resources to learn more:
|
||||
|
||||
- [@official@Render and Commit - Official Docs](https://react.dev/learn/render-and-commit)
|
||||
- [@article@Rendering in React - ui.dev](https://ui.dev/why-react-renders)
|
||||
- [@article@Fix the slow render before you fix the re-render](https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render)
|
||||
- [@article@Fix the slow render before you fix the re-render](https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render)
|
||||
@@ -5,4 +5,4 @@ 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/)
|
||||
- [@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)
|
||||
@@ -4,4 +4,4 @@
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@RTK Query - Official Website](https://redux-toolkit.js.org/rtk-query/overview)
|
||||
- [@article@RTK Query - Official Website](https://redux-toolkit.js.org/rtk-query/overview)
|
||||
@@ -2,6 +2,6 @@
|
||||
|
||||
The react-dom/server APIs let you render React components to HTML on the server. These APIs are only used on the server at the top level of your app to generate the initial HTML. A [framework](https://react.dev/learn/start-a-new-react-project#production-grade-react-frameworks) may call them for you. Most of your components don’t need to import or use them.
|
||||
|
||||
Learn more from the following resources:
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Documentation For API](https://react.dev/reference/react-dom/server)
|
||||
- [@official@Documentation For API](https://react.dev/reference/react-dom/server)
|
||||
@@ -6,5 +6,5 @@ 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)
|
||||
- [@article@Shadcn Guide](https://blog.logrocket.com/shadcn-ui-adoption-guide/)
|
||||
- [@video@Shadcn Setup and Tutorial](https://www.youtube.com/watch?v=v0_AT8zaLo8)
|
||||
@@ -5,4 +5,4 @@ Application state management is the process of maintaining knowledge of an appli
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@What is State Management?](https://www.techtarget.com/searchapparchitecture/definition/state-management)
|
||||
- [@article@Overview of State in React](https://www.robinwieruch.de/react-state/)
|
||||
- [@article@Overview of State in React](https://www.robinwieruch.de/react-state/)
|
||||
@@ -4,12 +4,12 @@ React Suspense is a feature in React that allows components to "suspend" renderi
|
||||
|
||||
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.
|
||||
* 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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@React Suspense](https://react.dev/reference/react/Suspense)
|
||||
- [@article@React Suspense - A complete guide](https://hygraph.com/blog/react-suspense)
|
||||
- [@article@React Suspense - A complete guide](https://hygraph.com/blog/react-suspense)
|
||||
@@ -9,4 +9,4 @@ With just one hook, you can significantly simplify the data fetching logic in yo
|
||||
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)
|
||||
- [@feed@Explore top posts about Next.js](https://app.daily.dev/tags/nextjs?ref=roadmapsh)
|
||||
@@ -9,4 +9,4 @@ Visit the following resources to learn more:
|
||||
- [@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)
|
||||
- [@feed@Explore top posts about Tailwind CSS](https://app.daily.dev/tags/tailwind-css?ref=roadmapsh)
|
||||
@@ -2,8 +2,8 @@
|
||||
|
||||
TanStack Router is a powerful router for building React applications, offering a range of advanced features to streamline development.
|
||||
|
||||
Learn more from the following resources:
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@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)
|
||||
@@ -6,4 +6,4 @@ 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)
|
||||
- [@feed@Explore top posts about Testing](https://app.daily.dev/tags/testing?ref=roadmapsh)
|
||||
@@ -7,4 +7,4 @@ One thing you should note is that TypeScript can only help you avoid mistakes du
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@What is TypeScript and why would I use it in place of JavaScript?](https://stackoverflow.com/questions/12694530/what-is-typescript-and-why-would-i-use-it-in-place-of-javascript)
|
||||
- [@article@When Use Zod](https://www.totaltypescript.com/when-should-you-use-zod)
|
||||
- [@article@When Use Zod](https://www.totaltypescript.com/when-should-you-use-zod)
|
||||
@@ -7,4 +7,4 @@ Visit the following resources to learn more:
|
||||
- [@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)
|
||||
- [@feed@Explore top posts about TypeScript](https://app.daily.dev/tags/typescript?ref=roadmapsh)
|
||||
@@ -4,13 +4,13 @@ urql (Universal React Query Library) is a library for managing GraphQL data in R
|
||||
|
||||
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.
|
||||
* 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.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@urql - Formidable Labs](https://formidable.com/open-source/urql/)
|
||||
- [@article@urql - Formidable Labs](https://formidable.com/open-source/urql/)
|
||||
@@ -6,4 +6,4 @@ Visit the following resources to learn more:
|
||||
|
||||
- [@official@React Documentation on useCallback](https://react.dev/reference/react/useCallback)
|
||||
- [@article@useCallback Explained in Depth](https://kentcdodds.com/blog/usememo-and-usecallback)
|
||||
- [@article@useCallback Hook: An Introductory Guide](https://dmitripavlutin.com/dont-overuse-react-usecallback/)
|
||||
- [@article@useCallback Hook: An Introductory Guide](https://dmitripavlutin.com/dont-overuse-react-usecallback/)
|
||||
@@ -1,10 +1,9 @@
|
||||
# useContext
|
||||
|
||||
The `useContext` Hook lets us share data between components without having to pass props down through every level of the component tree.
|
||||
This is particularly useful when many components need to access the same data or when components are deeply nested.
|
||||
The `useContext` Hook lets us share data between components without having to pass props down through every level of the component tree. This is particularly useful when many components need to access the same data or when components are deeply nested.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Using useContext](https://react.dev/reference/react/useContext)
|
||||
- [@official@Explore the concept of context](https://react.dev/learn/passing-data-deeply-with-context)
|
||||
- [@video@Learn useContext In 13 Minutes](https://www.youtube.com/watch?v=5LrDIWkK_Bc)
|
||||
- [@video@Learn useContext In 13 Minutes](https://www.youtube.com/watch?v=5LrDIWkK_Bc)
|
||||
@@ -5,4 +5,4 @@
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Using the Effect Hook](https://react.dev/reference/react/useEffect)
|
||||
- [@article@React useEffect Hook by Example](https://www.robinwieruch.de/react-useeffect-hook/)
|
||||
- [@article@React useEffect Hook by Example](https://www.robinwieruch.de/react-useeffect-hook/)
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
`useMemo` is a React hook that memoizes 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:
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@useMemo Docs](https://react.dev/reference/react/useMemo)
|
||||
- [@article@useMemo and useCallback - Josh W. Comeau](https://www.joshwcomeau.com/react/usememo-and-usecallback/)
|
||||
- [@article@useMemo and useCallback - Josh W. Comeau](https://www.joshwcomeau.com/react/usememo-and-usecallback/)
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
`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:
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@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)
|
||||
@@ -5,4 +5,4 @@
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@useRef](https://react.dev/reference/react/useRef)
|
||||
- [@video@WebDevSimplified](https://www.youtube.com/watch?v=t2ypzz6gJm0)
|
||||
- [@video@WebDevSimplified](https://www.youtube.com/watch?v=t2ypzz6gJm0)
|
||||
@@ -5,4 +5,4 @@
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Using the State Hook](https://react.dev/reference/react/useState)
|
||||
- [@article@React useState Hook by Example](https://www.robinwieruch.de/react-usestate-hook/)
|
||||
- [@article@React useState Hook by Example](https://www.robinwieruch.de/react-usestate-hook/)
|
||||
@@ -8,4 +8,4 @@ Visit the following resources to learn more:
|
||||
- [@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)
|
||||
- [@feed@Explore top posts about Vite](https://app.daily.dev/tags/vite?ref=roadmapsh)
|
||||
@@ -1,9 +1,8 @@
|
||||
# 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 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
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Vitest Website](https://vitest.dev/)
|
||||
- [@video@Testing with Vitest](https://www.youtube.com/watch?v=cM_AeQHzlGg)
|
||||
- [@video@Testing with Vitest](https://www.youtube.com/watch?v=cM_AeQHzlGg)
|
||||
@@ -4,4 +4,4 @@ While "CSS in JS" is the most predominant way of styling modern frontend applica
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Ways to CSS style a React application](https://www.robinwieruch.de/react-css-styling/)
|
||||
- [@article@Ways to CSS style a React application](https://www.robinwieruch.de/react-css-styling/)
|
||||
@@ -7,4 +7,4 @@ Zod is designed to be as developer-friendly as possible. The goal is to eliminat
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Zod Website](https://zod.dev/)
|
||||
- [@video@Learn Zod In 30 Minutes](https://www.youtube.com/watch?v=L6BE-U3oy80)
|
||||
- [@video@Learn Zod In 30 Minutes](https://www.youtube.com/watch?v=L6BE-U3oy80)
|
||||
@@ -7,7 +7,7 @@ Zustand is often used as an alternative to other state management libraries, suc
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@opensource@Zustand - Official Website](https://github.com/pmndrs/zustand)
|
||||
- [@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)
|
||||
- [@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)
|
||||
Reference in New Issue
Block a user