Kamran Ahmed
2 years ago
parent
96dd4ab4a1
commit
0e71019feb
85 changed files with 4814 additions and 3814 deletions
@ -1,73 +1,70 @@ |
|||||||
{ |
{ |
||||||
"home": "/roadmaps/103-react/content/readme.md", |
"home": "/roadmaps/103-react/content/readme.md", |
||||||
"react-advanced-topics": "/roadmaps/103-react/content/101-react-advanced-topics/readme.md", |
"cli-tools": "/roadmaps/103-react/content/101-cli-tools/readme.md", |
||||||
"react-advanced-topics:hooks": "/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/readme.md", |
"cli-tools:create-react-app": "/roadmaps/103-react/content/101-cli-tools/101-create-react-app.md", |
||||||
"react-advanced-topics:hooks:common-hooks": "/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/102-common-hooks.md", |
"cli-tools:vite": "/roadmaps/103-react/content/101-cli-tools/100-vite.md", |
||||||
"react-advanced-topics:hooks:writing-your-own-hooks": "/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/101-writing-your-own-hooks.md", |
"components": "/roadmaps/103-react/content/102-components/readme.md", |
||||||
"react-advanced-topics:context": "/roadmaps/103-react/content/101-react-advanced-topics/101-context.md", |
"components:functional-components": "/roadmaps/103-react/content/102-components/101-functional-components.md", |
||||||
"react-advanced-topics:refs": "/roadmaps/103-react/content/101-react-advanced-topics/102-refs.md", |
"components:class-components": "/roadmaps/103-react/content/102-components/100-class-components.md", |
||||||
"react-advanced-topics:render-props": "/roadmaps/103-react/content/101-react-advanced-topics/103-render-props.md", |
"components:jsx": "/roadmaps/103-react/content/102-components/102-jsx.md", |
||||||
"react-advanced-topics:high-order-components": "/roadmaps/103-react/content/101-react-advanced-topics/104-high-order-components.md", |
"components:props-vs-state": "/roadmaps/103-react/content/102-components/103-props-vs-state.md", |
||||||
"react-advanced-topics:portals": "/roadmaps/103-react/content/101-react-advanced-topics/105-portals.md", |
"components:conditional-rendering": "/roadmaps/103-react/content/102-components/104-conditional-rendering.md", |
||||||
"react-advanced-topics:error-boundaries": "/roadmaps/103-react/content/101-react-advanced-topics/106-error-boundaries.md", |
"components:composition-vs-inheritance": "/roadmaps/103-react/content/102-components/105-composition-vs-inheritance.md", |
||||||
"react-advanced-topics:fiber-architecture": "/roadmaps/103-react/content/101-react-advanced-topics/107-fiber-architecture.md", |
"rendering": "/roadmaps/103-react/content/103-rendering/readme.md", |
||||||
"react-fundamental-topics": "/roadmaps/103-react/content/100-react-fundamental-topics/readme.md", |
"rendering:lists-and-keys": "/roadmaps/103-react/content/103-rendering/101-lists-and-keys.md", |
||||||
"react-fundamental-topics:cli-tools": "/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/readme.md", |
"rendering:component-life-cycle": "/roadmaps/103-react/content/103-rendering/100-component-life-cycle.md", |
||||||
"react-fundamental-topics:cli-tools:create-react-app": "/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/100-create-react-app.md", |
"rendering:render-props": "/roadmaps/103-react/content/103-rendering/102-render-props.md", |
||||||
"react-fundamental-topics:cli-tools:vite": "/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/101-vite.md", |
"rendering:refs": "/roadmaps/103-react/content/103-rendering/103-refs.md", |
||||||
"react-fundamental-topics:create-react-app": "/roadmaps/103-react/content/100-react-fundamental-topics/100-create-react-app.md", |
"rendering:events": "/roadmaps/103-react/content/103-rendering/104-events.md", |
||||||
"react-fundamental-topics:jsx": "/roadmaps/103-react/content/100-react-fundamental-topics/101-jsx.md", |
"rendering:high-order-components": "/roadmaps/103-react/content/103-rendering/105-high-order-components.md", |
||||||
"react-fundamental-topics:components": "/roadmaps/103-react/content/100-react-fundamental-topics/102-components/readme.md", |
"hooks": "/roadmaps/103-react/content/104-hooks/readme.md", |
||||||
"react-fundamental-topics:components:functional-components": "/roadmaps/103-react/content/100-react-fundamental-topics/102-components/100-functional-components.md", |
"hooks:basic-hooks": "/roadmaps/103-react/content/104-hooks/100-basic-hooks/readme.md", |
||||||
"react-fundamental-topics:components:class-components": "/roadmaps/103-react/content/100-react-fundamental-topics/102-components/101-class-components.md", |
"hooks:basic-hooks:use-state": "/roadmaps/103-react/content/104-hooks/100-basic-hooks/100-use-state.md", |
||||||
"react-fundamental-topics:props-vs-state": "/roadmaps/103-react/content/100-react-fundamental-topics/103-props-vs-state.md", |
"hooks:basic-hooks:use-effect": "/roadmaps/103-react/content/104-hooks/100-basic-hooks/101-use-effect.md", |
||||||
"react-fundamental-topics:conditional-rendering": "/roadmaps/103-react/content/100-react-fundamental-topics/104-conditional-rendering.md", |
"hooks:writing-your-own-hooks": "/roadmaps/103-react/content/104-hooks/101-writing-your-own-hooks.md", |
||||||
"react-fundamental-topics:component-life-cycle": "/roadmaps/103-react/content/100-react-fundamental-topics/105-component-life-cycle.md", |
"hooks:common-hooks": "/roadmaps/103-react/content/104-hooks/102-common-hooks.md", |
||||||
"react-fundamental-topics:lists-and-keys": "/roadmaps/103-react/content/100-react-fundamental-topics/106-lists-and-keys.md", |
"routers": "/roadmaps/103-react/content/105-routers/readme.md", |
||||||
"react-fundamental-topics:composition-vs-inheritance": "/roadmaps/103-react/content/100-react-fundamental-topics/107-composition-vs-inheritance.md", |
"routers:react-router": "/roadmaps/103-react/content/105-routers/100-react-router.md", |
||||||
"react-fundamental-topics:basic-hooks": "/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/readme.md", |
"routers:reach-router": "/roadmaps/103-react/content/105-routers/101-reach-router.md", |
||||||
"react-fundamental-topics:basic-hooks:use-state": "/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/100-use-state.md", |
"state-management": "/roadmaps/103-react/content/106-state-management/readme.md", |
||||||
"react-fundamental-topics:basic-hooks:use-effect": "/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/101-use-effect.md", |
"state-management:context": "/roadmaps/103-react/content/106-state-management/100-context.md", |
||||||
"react-fundamental-topics:events": "/roadmaps/103-react/content/100-react-fundamental-topics/109-events.md", |
"state-management:zustand": "/roadmaps/103-react/content/106-state-management/101-zustand.md", |
||||||
"react-ecosystem": "/roadmaps/103-react/content/102-react-ecosystem/readme.md", |
"state-management:redux-and-redux-toolkit": "/roadmaps/103-react/content/106-state-management/102-redux-and-redux-toolkit.md", |
||||||
"react-ecosystem:routers": "/roadmaps/103-react/content/102-react-ecosystem/100-routers/readme.md", |
"state-management:mobx": "/roadmaps/103-react/content/106-state-management/103-mobx.md", |
||||||
"react-ecosystem:routers:react-router": "/roadmaps/103-react/content/102-react-ecosystem/100-routers/100-react-router.md", |
"state-management:recoil": "/roadmaps/103-react/content/106-state-management/104-recoil.md", |
||||||
"react-ecosystem:routers:reach-router": "/roadmaps/103-react/content/102-react-ecosystem/100-routers/101-reach-router.md", |
"styling": "/roadmaps/103-react/content/107-styling/readme.md", |
||||||
"react-ecosystem:ssr": "/roadmaps/103-react/content/102-react-ecosystem/101-ssr/readme.md", |
"styling:chakra-ui": "/roadmaps/103-react/content/107-styling/105-chakra-ui.md", |
||||||
"react-ecosystem:ssr:next-js": "/roadmaps/103-react/content/102-react-ecosystem/101-ssr/100-next-js.md", |
"styling:material-ui": "/roadmaps/103-react/content/107-styling/104-material-ui.md", |
||||||
"react-ecosystem:ssr:remix": "/roadmaps/103-react/content/102-react-ecosystem/101-ssr/100-remix.md", |
"styling:mantine": "/roadmaps/103-react/content/107-styling/102-mantine.md", |
||||||
"react-ecosystem:ssg": "/roadmaps/103-react/content/102-react-ecosystem/102-ssg/readme.md", |
"styling:tailwind": "/roadmaps/103-react/content/107-styling/103-tailwind.md", |
||||||
"react-ecosystem:ssg:gatsby": "/roadmaps/103-react/content/102-react-ecosystem/102-ssg/101-gatsby.md", |
"styling:styled-components": "/roadmaps/103-react/content/107-styling/100-styled-components.md", |
||||||
"react-ecosystem:api-calls": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/readme.md", |
"styling:emotion": "/roadmaps/103-react/content/107-styling/101-emotion.md", |
||||||
"react-ecosystem:api-calls:react-query": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/100-react-query.md", |
"api-calls": "/roadmaps/103-react/content/108-api-calls/readme.md", |
||||||
"react-ecosystem:api-calls:swr": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/101-swr.md", |
"api-calls:apollo": "/roadmaps/103-react/content/108-api-calls/100-apollo.md", |
||||||
"react-ecosystem:api-calls:apollo": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/102-apollo.md", |
"api-calls:relay": "/roadmaps/103-react/content/108-api-calls/101-relay.md", |
||||||
"react-ecosystem:api-calls:relay-modern": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/103-relay-modern.md", |
"api-calls:urql": "/roadmaps/103-react/content/108-api-calls/102-urql.md", |
||||||
"react-ecosystem:api-calls:axios": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/104-axios.md", |
"api-calls:swr": "/roadmaps/103-react/content/108-api-calls/103-swr.md", |
||||||
"react-ecosystem:api-calls:unfetch": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/105-unfetch.md", |
"api-calls:axios": "/roadmaps/103-react/content/108-api-calls/105-axios.md", |
||||||
"react-ecosystem:api-calls:superagent": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/106-superagent.md", |
"api-calls:superagent": "/roadmaps/103-react/content/108-api-calls/106-superagent.md", |
||||||
"react-ecosystem:mobile": "/roadmaps/103-react/content/102-react-ecosystem/104-mobile/readme.md", |
"api-calls:react-query": "/roadmaps/103-react/content/108-api-calls/104-react-query.md", |
||||||
"react-ecosystem:mobile:react-native": "/roadmaps/103-react/content/102-react-ecosystem/104-mobile/100-react-native.md", |
"testing": "/roadmaps/103-react/content/109-testing/readme.md", |
||||||
"react-ecosystem:forms": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/readme.md", |
"testing:jest": "/roadmaps/103-react/content/109-testing/100-jest.md", |
||||||
"react-ecosystem:forms:react-hook-form": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/100-react-hook-form.md", |
"testing:vitest": "/roadmaps/103-react/content/109-testing/101-vitest.md", |
||||||
"react-ecosystem:forms:formik": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/101-formik.md", |
"testing:react-testing-library": "/roadmaps/103-react/content/109-testing/102-react-testing-library.md", |
||||||
"react-ecosystem:forms:final-form": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/102-final-form.md", |
"testing:cypress": "/roadmaps/103-react/content/109-testing/103-cypress.md", |
||||||
"react-ecosystem:testing": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/readme.md", |
"testing:playwright": "/roadmaps/103-react/content/109-testing/104-playwright.md", |
||||||
"react-ecosystem:testing:jest": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/100-jest.md", |
"frameworks": "/roadmaps/103-react/content/110-frameworks/readme.md", |
||||||
"react-ecosystem:testing:vitest": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/103-vitest.md", |
"frameworks:next-js": "/roadmaps/103-react/content/110-frameworks/101-next-js.md", |
||||||
"react-ecosystem:testing:playwright": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/104-playwright.md", |
"frameworks:remix": "/roadmaps/103-react/content/110-frameworks/100-remix.md", |
||||||
"react-ecosystem:testing:react-testing-library": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/101-react-testing-library.md", |
"forms": "/roadmaps/103-react/content/111-forms/readme.md", |
||||||
"react-ecosystem:testing:cypress": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/102-cypress.md", |
"forms:react-hook-form": "/roadmaps/103-react/content/111-forms/100-react-hook-form.md", |
||||||
"react-ecosystem:state-management": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/readme.md", |
"forms:formik": "/roadmaps/103-react/content/111-forms/101-formik.md", |
||||||
"react-ecosystem:state-management:context-state": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/100-context-state.md", |
"forms:final-form": "/roadmaps/103-react/content/111-forms/102-final-form.md", |
||||||
"react-ecosystem:state-management:zustand": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-zustand.md", |
"suspense": "/roadmaps/103-react/content/112-suspense.md", |
||||||
"react-ecosystem:state-management:redux": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-redux/readme.md", |
"portals": "/roadmaps/103-react/content/113-portals.md", |
||||||
"react-ecosystem:state-management:redux:redux-toolkit": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-redux/100-redux-toolkit.md", |
"error-boundaries": "/roadmaps/103-react/content/114-error-boundaries.md", |
||||||
"react-ecosystem:state-management:mobx": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/102-mobx.md", |
"fiber-architecture": "/roadmaps/103-react/content/115-fiber-architecture.md", |
||||||
"react-ecosystem:styling": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/readme.md", |
"mobile": "/roadmaps/103-react/content/116-mobile/readme.md", |
||||||
"react-ecosystem:styling:chakra-ui": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/100-chakra-ui.md", |
"mobile:react-native": "/roadmaps/103-react/content/116-mobile/100-react-native.md", |
||||||
"react-ecosystem:styling:material-ui": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/101-material-ui.md", |
"react-roadmap-note": "/roadmaps/103-react/content/100-react-roadmap-note.md" |
||||||
"react-ecosystem:styling:mantine": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/102-mantine.md", |
} |
||||||
"react-ecosystem:styling:styled-components": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/103-styled-components.md", |
|
||||||
"react-ecosystem:styling:emotion": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/104-emotion.md" |
|
||||||
} |
|
||||||
@ -1,9 +0,0 @@ |
|||||||
# Create React App |
|
||||||
|
|
||||||
Create React App is the CLI based tool and is the best way to start building a new single-page application in React. |
|
||||||
|
|
||||||
It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine. |
|
||||||
|
|
||||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
|
||||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://create-react-app.dev/docs/getting-started'>Official Website</BadgeLink> |
|
||||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/minimal-react-webpack-babel-setup/'>Advanced: Custom Setup with Webpack</BadgeLink> |
|
||||||
@ -1,8 +0,0 @@ |
|||||||
# useContext Hook |
|
||||||
|
|
||||||
`useContext` hook is used to read and subscribe to context from your component. Context allows a parent component to pass data down the entire component tree below it. |
|
||||||
|
|
||||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
|
||||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://beta.reactjs.org/apis/react/useContext'>Using the Context Hook</BadgeLink> |
|
||||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=5LrDIWkK_Bc'>Learn useContext in 13 Minutes</BadgeLink> |
|
||||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-usecontext-hook'>How to useContext in React</BadgeLink> |
|
||||||
@ -1,7 +0,0 @@ |
|||||||
# React |
|
||||||
|
|
||||||
React is a JavaScript library for building user interfaces. It is an open-source, component-based front end library responsible only for the view layer of the application. |
|
||||||
|
|
||||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
|
||||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://reactjs.org/'>Official Website</BadgeLink> |
|
||||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/getting-started.html'>Official Documentation</BadgeLink> |
|
||||||
@ -0,0 +1,3 @@ |
|||||||
|
# Note |
||||||
|
|
||||||
|
This roadmap specifically covers **React and the ecosystem** around it. You will notice that it is missing things like version control, package managers, build tools, linters, task runners and other things that are not directly related to React; this is intentional. Have a look at the [Frontend Roadmap](/roadmaps/frontend) for a more comprehensive overview of the frontend ecosystem. |
||||||
@ -1,9 +0,0 @@ |
|||||||
# 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. |
|
||||||
|
|
||||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
|
||||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/context.html'>Official React Context Docs</BadgeLink> |
|
||||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-context/'>React Context: Why, How, and When</BadgeLink> |
|
||||||
@ -1,3 +0,0 @@ |
|||||||
# Advanced Topics |
|
||||||
|
|
||||||
Now that you have covered the basics, next we have the advanced topics such as advanced hook topics, context, refs, portals, error boundaries and more. |
|
||||||
@ -1,11 +0,0 @@ |
|||||||
# Server-side rendering |
|
||||||
|
|
||||||
Server-side rendering refers to the process that the service side completes the HTML structure splicing of the page, sends it to the browser, and then binds the status and events for it to become a fully interactive page. |
|
||||||
|
|
||||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
|
||||||
|
|
||||||
<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.educative.io/answers/what-is-server-side-rendering'>what is server side rendering</BadgeLink> |
|
||||||
<BadgeLink colorScheme='blue' badgeText='Read' href='https://medium.com/@mbleigh/when-should-i-server-side-render-c2a383ff2d0f'>When should I Server-Side Render?</BadgeLink> |
|
||||||
<BadgeLink colorScheme='blue' badgeText='Read' href='https://vuejs.org/guide/scaling-up/ssr.html'>Server-Side Rendering (SSR)</BadgeLink> |
|
||||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=GQzn7XRdzxY'>what is server side rendering?</BadgeLink> |
|
||||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=okvg3MRAPs0'>What is server-side rendering for web development?</BadgeLink> |
|
||||||
@ -1,8 +0,0 @@ |
|||||||
# Gatsby |
|
||||||
|
|
||||||
Gatsby is a React-based open source framework with performance, scalability and security built-in. |
|
||||||
|
|
||||||
<ResourceGroupTitle>Free Resources</ResourceGroupTitle> |
|
||||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.gatsbyjs.com/'>Gatsby Website</BadgeLink> |
|
||||||
<BadgeLink colorScheme='blue' badgeText='Docs' href='https://www.gatsbyjs.com/docs'>Gatsby Docs</BadgeLink> |
|
||||||
<BadgeLink badgeText='Watch' href='https://youtube.com/playlist?list=PL4cUxeGkcC9hw1g77I35ZivVLe8k2nvjB'>Gatsby Tutorial</BadgeLink> |
|
||||||
@ -1,9 +0,0 @@ |
|||||||
# Static Site Generators |
|
||||||
|
|
||||||
A static site generator is a tool that generates a full static HTML website based on raw data and a set of templates. Essentially, a static site generator automates the task of coding individual HTML pages and gets those pages ready to serve to users ahead of time. Because these HTML pages are pre-built, they can load very quickly in users' browsers. |
|
||||||
|
|
||||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
|
||||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/learning/performance/static-site-generator/'>What is a static site generator?</BadgeLink> |
|
||||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://nextjs.org/docs/advanced-features/static-html-export'>Next.js SSG</BadgeLink> |
|
||||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.gatsbyjs.com/docs/glossary/static-site-generator/'>Gatsby SSG</BadgeLink> |
|
||||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.smashingmagazine.com/2021/10/building-ssg-11ty-vite-jam-sandwich/'>SSG — An 11ty, Vite And JAM Sandwich</BadgeLink> |
|
||||||
@ -1,9 +0,0 @@ |
|||||||
# use-http |
|
||||||
|
|
||||||
React hook for making isomorphic http requests. |
|
||||||
|
|
||||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
|
||||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://use-http.com/#/'>Official Website: use-http</BadgeLink> |
|
||||||
<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/ava/use-http'>ava / use-http</BadgeLink> |
|
||||||
|
|
||||||
|
|
||||||
@ -1,6 +0,0 @@ |
|||||||
# Unfetch |
|
||||||
|
|
||||||
Unfetch is the bare minimum 500b [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) polyfill. |
|
||||||
|
|
||||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
|
||||||
<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/developit/unfetch'>Official GitHub Repository</BadgeLink> |
|
||||||
@ -1,8 +0,0 @@ |
|||||||
# Redux Toolkit |
|
||||||
|
|
||||||
Redux Toolkit (RTK) is a library for managing state in JavaScript applications. It is an opinionated set of tools and utilities for building Redux applications, and it is designed to make it easier and faster to build Redux applications. |
|
||||||
|
|
||||||
RTK is often used as an alternative to writing Redux applications from scratch, as it provides a set of conventions and utilities that can make it easier and faster to build Redux applications. |
|
||||||
|
|
||||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
|
||||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://redux-toolkit.js.org/'>Redux Toolkit - ReduxJS</BadgeLink> |
|
||||||
@ -1,8 +0,0 @@ |
|||||||
# Ecosystem |
|
||||||
|
|
||||||
Thanks to its popularity, React has been enriched by a vast ecosystem of plugins and tools. A (long) list is available here: [awesome-react](https://github.com/enaqx/awesome-react). |
|
||||||
|
|
||||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
|
||||||
<BadgeLink colorScheme='blue' badgeText='Awesome React' href='https://github.com/enaqx/awesome-react'>Awesome React</BadgeLink> |
|
||||||
<BadgeLink colorScheme='blue' badgeText='Awesome React Components' href='https://github.com/brillout/awesome-react-components'>Awesome React Components</BadgeLink> |
|
||||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-libraries/'>Popular React Libraries</BadgeLink> |
|
||||||
@ -0,0 +1,16 @@ |
|||||||
|
# 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. |
||||||
|
|
||||||
|
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||||
|
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/react-under-the-hood/'>React.js under the Hood</BadgeLink> |
||||||
|
|
||||||
@ -1,7 +1,6 @@ |
|||||||
# Hooks |
# 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 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. |
||||||
|
|
||||||
|
|
||||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-intro.html'>Introduction to Hooks</BadgeLink> |
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-intro.html'>Introduction to Hooks</BadgeLink> |
||||||
@ -1,8 +1,7 @@ |
|||||||
# React Hooks |
# Hooks |
||||||
|
|
||||||
Hooks were introduced in React 16.8 and they let us use state and other React features without writing a class |
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. |
||||||
|
|
||||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-intro.html'>Introduction to Hooks</BadgeLink> |
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-intro.html'>Introduction to Hooks</BadgeLink> |
||||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-reference.html'>Hooks Reference</BadgeLink> |
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-reference.html'>Hooks Reference</BadgeLink> |
||||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-hooks/'>Hooks by Example</BadgeLink> |
|
||||||
@ -0,0 +1,17 @@ |
|||||||
|
# Recoil |
||||||
|
|
||||||
|
Recoil is a library for managing state in React applications. |
||||||
|
|
||||||
|
Recoil is designed to be easy to use and efficient, with a focus on improving the performance and scalability of large, complex React applications. It is based on the concept of atoms and selectors, which are used to manage the state of a component. Atoms represent the state of a component, and selectors are used to derive new state from atoms. |
||||||
|
|
||||||
|
Recoil provides a set of utilities and APIs for managing state, including: |
||||||
|
|
||||||
|
- atom: A utility for creating atoms, which represent the state of a component. |
||||||
|
- selector: A utility for creating selectors, which are used to derive new state from atoms. |
||||||
|
- useRecoilValue: A hook for accessing the value of an atom or selector in a component. |
||||||
|
- useSetRecoilState: A hook for updating the value of an atom in a component. |
||||||
|
|
||||||
|
Recoil is often used as an alternative to other state management libraries, such as Redux and MobX, because of its simplicity and performance. It is particularly well-suited for large, complex React applications where the overhead of other state management libraries may be too high. |
||||||
|
|
||||||
|
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||||
|
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://recoiljs.org/'>Recoil - Official Website</BadgeLink> |
||||||
@ -0,0 +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. |
||||||
|
|
||||||
|
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||||
|
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://tailwindcss.com'>Tailwind Website</BadgeLink> |
||||||
|
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.codemag.com/Article/2105091/Tailwind-CSS-An-Introduction'>Tailwind CSS: An Introduction</BadgeLink> |
||||||
|
<BadgeLink badgeText='Watch' href='https://www.youtube.com/c/TailwindLabs/videos'>Official Screencasts</BadgeLink> |
||||||
|
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=hdGsFpZ0J2E'>Should You Use Tailwind CSS?</BadgeLink> |
||||||
|
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=UBOj6rqRUME'>Tailwind CSS Crash Course</BadgeLink> |
||||||
@ -1,4 +1,4 @@ |
|||||||
# Relay Modern |
# Relay |
||||||
|
|
||||||
Relay is a JavaScript client used in the browser to fetch GraphQL data. It's a JavaScript framework developed by Facebook for managing and fetching data in React applications. It is built with scalability in mind in order to power complex applications like Facebook. The ultimate goal of GraphQL and Relay is to deliver instant UI-response interactions. |
Relay is a JavaScript client used in the browser to fetch GraphQL data. It's a JavaScript framework developed by Facebook for managing and fetching data in React applications. It is built with scalability in mind in order to power complex applications like Facebook. The ultimate goal of GraphQL and Relay is to deliver instant UI-response interactions. |
||||||
|
|
||||||
@ -0,0 +1,15 @@ |
|||||||
|
# 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. |
||||||
|
|
||||||
|
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||||
|
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://formidable.com/open-source/urql/'>urql - Formidable Labs</BadgeLink> |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
# 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](https://nextjs.org/) |
||||||
|
- [Remix](https://remix.run/) |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
# 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. |
||||||
|
|
||||||
|
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||||
|
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://reactjs.org/docs/react-api.html#suspense'>React Suspense - Official Docs</BadgeLink> |
||||||
@ -1,7 +0,0 @@ |
|||||||
> **We are still preparing the resources**. Please check back later or [subscribe to get notified](/signup). |
|
||||||
|
|
||||||
While we prepare the list, follow this simple advice to learn anything |
|
||||||
|
|
||||||
> Just **pick a project and start working on it**, you will learn all that you need along the way. |
|
||||||
|
|
||||||
**→** [All Roadmaps](/roadmaps) • [Programming guides](/guides) • [Subscribe](/signup) |
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue