mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2026-03-12 17:51:53 +08:00
Compare commits
11 Commits
javascript
...
interactiv
| Author | SHA1 | Date | |
|---|---|---|---|
|
9371d8b8e9 | ||
|
|
aa8e8daacb | ||
|
|
944c38736d | ||
|
|
d916319777 | ||
|
|
1c47773816 | ||
|
|
c52ea8d7f8 | ||
|
|
6c4d98d6a0 | ||
|
|
78d94cd4b0 | ||
|
|
25cf42eb47 | ||
|
|
7b11f49468 | ||
|
|
14f3a8b02d |
@@ -177,7 +177,6 @@
|
||||
"isTextHeavy": false,
|
||||
"isCommunity": false,
|
||||
"featured": true,
|
||||
"landingPath": "/roadmaps/103-react/landscape.md",
|
||||
"resourcesPath": "/roadmaps/103-react/resources.md",
|
||||
"jsonUrl": "/project/react.json",
|
||||
"versions": [
|
||||
@@ -190,6 +189,7 @@
|
||||
"url": "https://twitter.com/kamranahmedse"
|
||||
},
|
||||
"pdfUrl": "/pdfs/react.pdf",
|
||||
"contentPathsFilePath": "/roadmaps/103-react/content-paths.json",
|
||||
"id": "react",
|
||||
"metaPath": "/roadmaps/103-react/meta.json",
|
||||
"isUpcoming": false
|
||||
|
||||
65
content/roadmaps/103-react/content-paths.json
Normal file
65
content/roadmaps/103-react/content-paths.json
Normal file
@@ -0,0 +1,65 @@
|
||||
{
|
||||
"home": "/roadmaps/103-react/content/readme.md",
|
||||
"react-advanced-ecosystem": "/roadmaps/103-react/content/react-advanced-ecosystem/readme.md",
|
||||
"react-advanced-ecosystem:hooks": "/roadmaps/103-react/content/react-advanced-ecosystem/100-hooks/readme.md",
|
||||
"react-advanced-ecosystem:hooks:common-hooks": "/roadmaps/103-react/content/react-advanced-ecosystem/100-hooks/102-common-hooks.md",
|
||||
"react-advanced-ecosystem:hooks:writing-your-own-hooks": "/roadmaps/103-react/content/react-advanced-ecosystem/100-hooks/101-writing-your-own-hooks.md",
|
||||
"react-advanced-ecosystem:context": "/roadmaps/103-react/content/react-advanced-ecosystem/101-context.md",
|
||||
"react-advanced-ecosystem:refs": "/roadmaps/103-react/content/react-advanced-ecosystem/102-refs.md",
|
||||
"react-advanced-ecosystem:render-props": "/roadmaps/103-react/content/react-advanced-ecosystem/103-render-props.md",
|
||||
"react-advanced-ecosystem:high-order-components": "/roadmaps/103-react/content/react-advanced-ecosystem/104-high-order-components.md",
|
||||
"react-advanced-ecosystem:portals": "/roadmaps/103-react/content/react-advanced-ecosystem/105-portals.md",
|
||||
"react-advanced-ecosystem:error-boundaries": "/roadmaps/103-react/content/react-advanced-ecosystem/106-error-boundaries.md",
|
||||
"react-advanced-ecosystem:fiber-architecture": "/roadmaps/103-react/content/react-advanced-ecosystem/107-fiber-architecture.md",
|
||||
"react-fundamental-topics": "/roadmaps/103-react/content/100-react-fundamental-topics/readme.md",
|
||||
"react-fundamental-topics:create-react-app": "/roadmaps/103-react/content/100-react-fundamental-topics/100-create-react-app.md",
|
||||
"react-fundamental-topics:jsx": "/roadmaps/103-react/content/100-react-fundamental-topics/101-jsx.md",
|
||||
"react-fundamental-topics:components": "/roadmaps/103-react/content/100-react-fundamental-topics/102-components/readme.md",
|
||||
"react-fundamental-topics:components:functional-components": "/roadmaps/103-react/content/100-react-fundamental-topics/102-components/100-functional-components.md",
|
||||
"react-fundamental-topics:components:class-components": "/roadmaps/103-react/content/100-react-fundamental-topics/102-components/101-class-components.md",
|
||||
"react-fundamental-topics:props-vs-state": "/roadmaps/103-react/content/100-react-fundamental-topics/103-props-vs-state.md",
|
||||
"react-fundamental-topics:conditional-rendering": "/roadmaps/103-react/content/100-react-fundamental-topics/104-conditional-rendering.md",
|
||||
"react-fundamental-topics:component-life-cycle": "/roadmaps/103-react/content/100-react-fundamental-topics/105-component-life-cycle.md",
|
||||
"react-fundamental-topics:lists-and-keys": "/roadmaps/103-react/content/100-react-fundamental-topics/106-lists-and-keys.md",
|
||||
"react-fundamental-topics:composition-vs-inheritance": "/roadmaps/103-react/content/100-react-fundamental-topics/107-composition-vs-inheritance.md",
|
||||
"react-fundamental-topics:basic-hooks": "/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/readme.md",
|
||||
"react-fundamental-topics:basic-hooks:use-state": "/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/100-use-state.md",
|
||||
"react-fundamental-topics:basic-hooks:use-effect": "/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/101-use-effect.md",
|
||||
"react-advanced-topics": "/roadmaps/103-react/content/101-react-advanced-topics.md",
|
||||
"react-ecosystem": "/roadmaps/103-react/content/102-react-ecosystem/readme.md",
|
||||
"react-ecosystem:routers": "/roadmaps/103-react/content/102-react-ecosystem/100-routers/readme.md",
|
||||
"react-ecosystem:routers:react-router": "/roadmaps/103-react/content/102-react-ecosystem/100-routers/100-react-router.md",
|
||||
"react-ecosystem:routers:reach-router": "/roadmaps/103-react/content/102-react-ecosystem/100-routers/101-reach-router.md",
|
||||
"react-ecosystem:ssr": "/roadmaps/103-react/content/102-react-ecosystem/101-ssr/readme.md",
|
||||
"react-ecosystem:ssr:next-js": "/roadmaps/103-react/content/102-react-ecosystem/101-ssr/100-next-js.md",
|
||||
"react-ecosystem:ssg": "/roadmaps/103-react/content/102-react-ecosystem/102-ssg/readme.md",
|
||||
"react-ecosystem:ssg:gatsby": "/roadmaps/103-react/content/102-react-ecosystem/102-ssg/101-gatsby.md",
|
||||
"react-ecosystem:api-calls": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/readme.md",
|
||||
"react-ecosystem:api-calls:react-query": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/100-react-query.md",
|
||||
"react-ecosystem:api-calls:use-http": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/101-use-http.md",
|
||||
"react-ecosystem:api-calls:apollo": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/102-apollo.md",
|
||||
"react-ecosystem:api-calls:relay-modern": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/103-relay-modern.md",
|
||||
"react-ecosystem:api-calls:axios": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/104-axios.md",
|
||||
"react-ecosystem:api-calls:unfetch": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/105-unfetch.md",
|
||||
"react-ecosystem:api-calls:superagent": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/106-superagent.md",
|
||||
"react-ecosystem:mobile": "/roadmaps/103-react/content/102-react-ecosystem/104-mobile/readme.md",
|
||||
"react-ecosystem:mobile:react-native": "/roadmaps/103-react/content/102-react-ecosystem/104-mobile/100-react-native.md",
|
||||
"react-ecosystem:forms": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/readme.md",
|
||||
"react-ecosystem:forms:react-hook-form": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/100-react-hook-form.md",
|
||||
"react-ecosystem:forms:formik": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/101-formik.md",
|
||||
"react-ecosystem:forms:final-form": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/102-final-form.md",
|
||||
"react-ecosystem:testing": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/readme.md",
|
||||
"react-ecosystem:testing:jest": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/100-jest.md",
|
||||
"react-ecosystem:testing:react-testing-library": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/101-react-testing-library.md",
|
||||
"react-ecosystem:testing:cypress": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/102-cypress.md",
|
||||
"react-ecosystem:state-management": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/readme.md",
|
||||
"react-ecosystem:state-management:conext-state": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/100-conext-state.md",
|
||||
"react-ecosystem:state-management:redux": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-redux.md",
|
||||
"react-ecosystem:state-management:mobx": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/102-mobx.md",
|
||||
"react-ecosystem:styling": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/readme.md",
|
||||
"react-ecosystem:styling:chakra-ui": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/100-chakra-ui.md",
|
||||
"react-ecosystem:styling:material-ui": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/101-material-ui.md",
|
||||
"react-ecosystem:styling:ant-design": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/102-ant-design.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"
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
# 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>
|
||||
@@ -0,0 +1,8 @@
|
||||
# JSX
|
||||
|
||||
JSX stands for JavaScript XML. It allows writing HTML in JavaScript and converts the HTML tags into React elements.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Introduction' href='https://reactjs.org/docs/introducing-jsx.html'>Introduction to JSX</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/jsx-in-react-introduction/'>JSX in React – Explained with Examples</BadgeLink>
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
# Functional Components
|
||||
|
||||
Functional components are some of the more common components that will come across while working in React. These are simply JavaScript functions. We can create a functional component to React by writing a JavaScript function. These functions may or may not receive data as parameters. In the functional Components, the return value is the JSX code to render to the DOM tree. Functional components can also have state which is managed using React hooks.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/components-and-props.html#function-and-class-components'>Components and Props</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/reactjs-functional-components/'>ReactJS Functional Components</BadgeLink>
|
||||
@@ -0,0 +1,10 @@
|
||||
# Class Components
|
||||
|
||||
Components can either be created using the class based approach or a functional approach. These components are simple classes (made up of multiple functions that add functionality to the application). All class based components are child classes for the Component class of ReactJS.
|
||||
|
||||
Although the class components are supported in React, it is encouraged to write functional components and make use of hooks in modern React applications.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/components-and-props.html#function-and-class-components'>Components and Props</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/geekculture/is-there-any-reason-to-still-use-react-class-components-9b6a1e6aa9ef'>Is There Any Reason to Still Use React Class Components?</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/functional-components-vs-class-components-in-react'>Functional Components vs Class Components in React</BadgeLink>
|
||||
@@ -0,0 +1,9 @@
|
||||
# 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.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/components-and-props.html'>Components and Props</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/react-component.html'>Components in Depth</BadgeLink>
|
||||
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
# Props vs State
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react'>What is the difference between state and props in React?</BadgeLink>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
# Conditional rendering
|
||||
@@ -0,0 +1 @@
|
||||
# Component life cycle
|
||||
@@ -0,0 +1 @@
|
||||
# Lists and keys
|
||||
@@ -0,0 +1 @@
|
||||
# Composition vs inheritance
|
||||
@@ -0,0 +1 @@
|
||||
# Use state
|
||||
@@ -0,0 +1 @@
|
||||
# Use effect
|
||||
@@ -0,0 +1 @@
|
||||
# Basic hooks
|
||||
@@ -0,0 +1,7 @@
|
||||
# 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 @@
|
||||
# React advanced topics
|
||||
@@ -0,0 +1 @@
|
||||
# React router
|
||||
@@ -0,0 +1 @@
|
||||
# Reach router
|
||||
@@ -0,0 +1 @@
|
||||
# Routers
|
||||
@@ -0,0 +1 @@
|
||||
# Next js
|
||||
@@ -0,0 +1 @@
|
||||
# Ssr
|
||||
@@ -0,0 +1 @@
|
||||
# Gatsby
|
||||
@@ -0,0 +1 @@
|
||||
# Ssg
|
||||
@@ -0,0 +1 @@
|
||||
# React query
|
||||
@@ -0,0 +1 @@
|
||||
# Use http
|
||||
@@ -0,0 +1 @@
|
||||
# Apollo
|
||||
@@ -0,0 +1 @@
|
||||
# Relay modern
|
||||
@@ -0,0 +1 @@
|
||||
# Axios
|
||||
@@ -0,0 +1 @@
|
||||
# Unfetch
|
||||
@@ -0,0 +1 @@
|
||||
# Superagent
|
||||
@@ -0,0 +1 @@
|
||||
# Api calls
|
||||
@@ -0,0 +1 @@
|
||||
# React native
|
||||
@@ -0,0 +1 @@
|
||||
# Mobile
|
||||
@@ -0,0 +1 @@
|
||||
# React hook form
|
||||
@@ -0,0 +1 @@
|
||||
# Formik
|
||||
@@ -0,0 +1 @@
|
||||
# Final form
|
||||
@@ -0,0 +1 @@
|
||||
# Forms
|
||||
@@ -0,0 +1 @@
|
||||
# Jest
|
||||
@@ -0,0 +1 @@
|
||||
# React testing library
|
||||
@@ -0,0 +1 @@
|
||||
# Cypress
|
||||
@@ -0,0 +1 @@
|
||||
# Testing
|
||||
@@ -0,0 +1 @@
|
||||
# Conext state
|
||||
@@ -0,0 +1 @@
|
||||
# Redux
|
||||
@@ -0,0 +1 @@
|
||||
# Mobx
|
||||
@@ -0,0 +1 @@
|
||||
# State management
|
||||
@@ -0,0 +1 @@
|
||||
# Chakra ui
|
||||
@@ -0,0 +1 @@
|
||||
# Material ui
|
||||
@@ -0,0 +1 @@
|
||||
# Ant design
|
||||
@@ -0,0 +1 @@
|
||||
# Styled components
|
||||
@@ -0,0 +1 @@
|
||||
# Emotion
|
||||
@@ -0,0 +1 @@
|
||||
# Styling
|
||||
@@ -0,0 +1 @@
|
||||
# React ecosystem
|
||||
@@ -0,0 +1 @@
|
||||
# Writing your own hooks
|
||||
@@ -0,0 +1 @@
|
||||
# Common hooks
|
||||
@@ -0,0 +1 @@
|
||||
# Hooks
|
||||
@@ -0,0 +1 @@
|
||||
# Context
|
||||
@@ -0,0 +1 @@
|
||||
# Refs
|
||||
@@ -0,0 +1 @@
|
||||
# Render props
|
||||
@@ -0,0 +1 @@
|
||||
# High order components
|
||||
@@ -0,0 +1 @@
|
||||
# Portals
|
||||
@@ -0,0 +1 @@
|
||||
# Error boundaries
|
||||
@@ -0,0 +1 @@
|
||||
# Fiber architecture
|
||||
@@ -0,0 +1 @@
|
||||
# React advanced ecosystem
|
||||
1
content/roadmaps/103-react/content/readme.md
Normal file
1
content/roadmaps/103-react/content/readme.md
Normal file
@@ -0,0 +1 @@
|
||||
#
|
||||
@@ -1,7 +0,0 @@
|
||||
The intent of this guide is to give you an idea about the React ecosystem and to help guide your learning if you are confused. We have another [roadmap on the Frontend Development](/frontend) that focuses on the frontend development if you are interested in that.
|
||||
|
||||
Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things.
|
||||
|
||||
|
||||
|
||||
Please note that the list is opinionated, and you might have different opinions than those of the author. Having said that, [we would love to hear your opinions](https://github.com/kamranahmedse/developer-roadmap/issues/new) and incorporate them in the picture if suitable.
|
||||
@@ -26,7 +26,6 @@
|
||||
"isTextHeavy": false,
|
||||
"isCommunity": false,
|
||||
"featured": true,
|
||||
"landingPath": "./landscape.md",
|
||||
"resourcesPath": "./resources.md",
|
||||
"jsonUrl": "/project/react.json",
|
||||
"versions": [
|
||||
@@ -38,5 +37,6 @@
|
||||
"name": "Kamran Ahmed",
|
||||
"url": "https://twitter.com/kamranahmedse"
|
||||
},
|
||||
"pdfUrl": "/pdfs/react.pdf"
|
||||
}
|
||||
"pdfUrl": "/pdfs/react.pdf",
|
||||
"contentPathsFilePath": "./content-paths.json"
|
||||
}
|
||||
@@ -43,5 +43,5 @@ export function getFeaturedRoadmaps(): RoadmapType[] {
|
||||
}
|
||||
|
||||
export function isInteractiveRoadmap(id: string): boolean {
|
||||
return ['frontend', 'backend', 'devops', 'vue'].includes(id);
|
||||
return ['frontend', 'backend', 'devops', 'react', 'vue'].includes(id);
|
||||
}
|
||||
|
||||
@@ -129,6 +129,10 @@ export function InteractiveRoadmapRenderer(props: RoadmapProps) {
|
||||
minHeight = ['600px', '820px', '1340px', '1680px', '1750px', '1750px'];
|
||||
}
|
||||
|
||||
if (roadmap.id === 'react') {
|
||||
minHeight = ['400px', '865px', '1065px', '1400px', '1400px', '1400px'];
|
||||
}
|
||||
|
||||
return (
|
||||
<Container maxW={'container.lg'} position="relative" minHeight={minHeight}>
|
||||
{(isLoading || isRendering) && <RoadmapLoader />}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -21,7 +21,7 @@
|
||||
<url>
|
||||
<loc>https://roadmap.sh/react</loc>
|
||||
<changefreq>monthly</changefreq>
|
||||
<lastmod>2022-08-04T11:37:35.834Z</lastmod>
|
||||
<lastmod>2022-08-11T13:50:53.707Z</lastmod>
|
||||
<priority>1.0</priority>
|
||||
</url>
|
||||
<url>
|
||||
@@ -33,7 +33,7 @@
|
||||
<url>
|
||||
<loc>https://roadmap.sh/vue</loc>
|
||||
<changefreq>monthly</changefreq>
|
||||
<lastmod>2022-08-08T14:56:45.396Z</lastmod>
|
||||
<lastmod>2022-08-08T16:43:49.818Z</lastmod>
|
||||
<priority>1.0</priority>
|
||||
</url>
|
||||
<url>
|
||||
|
||||
Reference in New Issue
Block a user