mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2026-03-13 02:01:57 +08:00
Compare commits
49 Commits
interactiv
...
interactiv
| Author | SHA1 | Date | |
|---|---|---|---|
|
437dee4d24 | ||
|
|
5f3fe3e507 | ||
|
|
390cdb932e | ||
|
|
8b0bda8347 | ||
|
|
5f8a9ad103 | ||
|
|
278d74024b | ||
|
|
a5fe79bbdf | ||
|
|
41e604e783 | ||
|
|
5c8fa5850e | ||
|
|
1a63618fe8 | ||
|
|
bdb3b51073 | ||
|
|
9c0b0a067a | ||
|
|
a3f3f9a3e3 | ||
|
|
9df2c5c898 | ||
|
|
f1255ad6a8 | ||
|
|
e08567d346 | ||
|
|
8f9a9e0869 | ||
|
|
fc1a3ffd0f | ||
|
|
c6ec0d384a | ||
|
0b6884d6d0 | ||
|
|
70752b26f4 | ||
|
|
34fc5a9f7a | ||
|
|
59bedd2100 | ||
|
|
4bcadc7313 | ||
|
|
2070483971 | ||
|
|
a16946da6c | ||
|
|
04113464fb | ||
|
|
d21582ac4d | ||
|
|
dc451e68fc | ||
|
|
9e08eb1a98 | ||
|
|
a512aeeaf8 | ||
|
|
d91c8add76 | ||
|
|
0eba1d36e3 | ||
|
|
b07f40f652 | ||
|
5075529030 | ||
|
|
298c76dad2 | ||
|
6e8308506f | ||
|
|
d2e9bef50f | ||
|
|
387c6026d4 | ||
|
|
0b8ee5ca78 | ||
|
|
40a447e6d3 | ||
|
|
02185886f5 | ||
|
|
f655934a03 | ||
|
|
6b7d141cd7 | ||
|
|
7ae8d5824d | ||
|
|
b0592a540b | ||
|
|
7ab66a3605 | ||
|
|
15306862cb | ||
|
a428071ee6 |
@@ -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
|
||||
@@ -361,7 +361,6 @@
|
||||
"featured": true,
|
||||
"jsonUrl": "/project/python.json",
|
||||
"resourcesPath": "/roadmaps/107-python/resources.md",
|
||||
"landingPath": "/roadmaps/107-python/landscape.md",
|
||||
"pdfUrl": "/pdfs/python.pdf",
|
||||
"versions": [
|
||||
"latest"
|
||||
@@ -370,6 +369,7 @@
|
||||
"name": "Kamran Ahmed",
|
||||
"url": "https://twitter.com/kamranahmedse"
|
||||
},
|
||||
"contentPathsFilePath": "/roadmaps/107-python/content-paths.json",
|
||||
"id": "python",
|
||||
"metaPath": "/roadmaps/107-python/meta.json",
|
||||
"isUpcoming": false
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
# Next.js
|
||||
|
||||
Next.js is an open-source development framework built on top of Node.js
|
||||
enabling React based web applications functionalities such as server-side
|
||||
rendering and generating static websites.
|
||||
Next.js is an open-source development framework built on top of Node.js enabling React based web applications functionalities such as server-side rendering and generating static websites.
|
||||
|
||||
<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Website' href='https://nextjs.org/'>Official Website</BadgeLink>
|
||||
|
||||
@@ -6,6 +6,7 @@ JavaScript allows you to add interactivity to your pages. Common examples that y
|
||||
|
||||
<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.w3schools.com/js/'>W3Schools – JavaScript Tutorial</BadgeLink>
|
||||
<BadgeLink badgeText='Read' colorScheme="yellow" href='https://javascript.info/'>The Modern JavaScript Tutorial</BadgeLink>
|
||||
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://eloquentjavascript.net/'>Eloquent Javascript - Book</BadgeLink>
|
||||
<BadgeLink badgeText='Watch' href='https://youtu.be/hdI2bqOjy3c'>JavaScript Crash Course for Beginners</BadgeLink>
|
||||
|
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=fBNz5xF-Kx4'>Node.js Crash Course</BadgeLink>
|
||||
|
||||
@@ -1 +1,8 @@
|
||||
# Echo
|
||||
# echo
|
||||
|
||||
`echo` is a built-in command in Linux used to display lines of text/string that are passed as an argument. It is mostly used in shell scripts and batch files to output status text or `ENV` variables to the screen or a file.
|
||||
|
||||
It has the following syntax: `$ echo [options] [string]` e.g. `$ echo "Hello World!"`
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tecmint.com/echo-command-in-linux/'>Echo command with Examples</BadgeLink>
|
||||
@@ -1 +1,12 @@
|
||||
# Egrep
|
||||
# egrep
|
||||
|
||||
`egrep` (**E**xtended **Grep**) is a pattern searching command which belongs to the family of grep functions. It treats the pattern as an extended **regular expression** and prints out the lines that match the pattern.
|
||||
It works the same way as `$ grep -E` command
|
||||
|
||||
It has the following syntax:
|
||||
|
||||
`$ egrep [options] pattern [files]` e.g. `$ egrep "search-regex" *.txt`
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://linuxhint.com/linux_egrep_command_examples/'>Egrep command with examples</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.thegeekdiary.com/fgrep-command-examples-in-linux'>options</BadgeLink>
|
||||
@@ -1 +1,13 @@
|
||||
# Fgrep
|
||||
# fgrep
|
||||
|
||||
`fgrep` (**F**ixed **Grep**) command is used for searching fixed-character strings in a file.
|
||||
It treats meta-characters or regular expressions in the search field as strings. For searching any **direct string** or files having meta-characters, this is the version of grep which should be selected. It works the same way as `$ grep -F` command.
|
||||
|
||||
It has the following syntax:
|
||||
|
||||
`$ fgrep [options] [string] [files]` e.g. `$ fgrep "search-string" file.txt`
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/fgrep-command-in-linux-with-examples/'>Fgrep command with examples</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.thegeekdiary.com/fgrep-command-examples-in-linux/'>options</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tecmint.com/difference-between-grep-egrep-and-fgrep-in-linux/'>Grep vs Egrep vs Fgrep</BadgeLink>
|
||||
@@ -1 +1,6 @@
|
||||
# Networking protocols
|
||||
# Networking Protocols
|
||||
|
||||
A network protocol is an established set of rules that determine how data is transmitted between different devices in the same network. Essentially, it allows connected devices to communicate with each other, regardless of any differences in their internal processes, structure or design. Network protocols are the reason you can easily communicate with people all over the world, and thus play a critical role in modern digital communications.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.comptia.org/content/guides/what-is-a-network-protocol'>What Is a Network Protocol, and How Does It Work?</BadgeLink>
|
||||
|
||||
@@ -1 +1,8 @@
|
||||
# Elastic stack
|
||||
# Elastic Stack
|
||||
|
||||
Elastic Stack is a group of open source products comprised of Elasticsearch, Kibana, Beats, and Logstash and more that help store, search, analyze, and visualize data from various source, in different format, in real-time.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.elastic.co/elastic-stack/'>Elastic Stack Website</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://www.elastic.co/guide/index.html'>Official Docs</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='Features List' href='https://www.elastic.co/elastic-stack/features'>Elastic Stack features</BadgeLink>
|
||||
|
||||
64
content/roadmaps/103-react/content-paths.json
Normal file
64
content/roadmaps/103-react/content-paths.json
Normal file
@@ -0,0 +1,64 @@
|
||||
{
|
||||
"home": "/roadmaps/103-react/content/readme.md",
|
||||
"react-advanced-topics": "/roadmaps/103-react/content/101-react-advanced-topics/readme.md",
|
||||
"react-advanced-topics:hooks": "/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/readme.md",
|
||||
"react-advanced-topics:hooks:common-hooks": "/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/102-common-hooks.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",
|
||||
"react-advanced-topics:context": "/roadmaps/103-react/content/101-react-advanced-topics/101-context.md",
|
||||
"react-advanced-topics:refs": "/roadmaps/103-react/content/101-react-advanced-topics/102-refs.md",
|
||||
"react-advanced-topics:render-props": "/roadmaps/103-react/content/101-react-advanced-topics/103-render-props.md",
|
||||
"react-advanced-topics:high-order-components": "/roadmaps/103-react/content/101-react-advanced-topics/104-high-order-components.md",
|
||||
"react-advanced-topics:portals": "/roadmaps/103-react/content/101-react-advanced-topics/105-portals.md",
|
||||
"react-advanced-topics:error-boundaries": "/roadmaps/103-react/content/101-react-advanced-topics/106-error-boundaries.md",
|
||||
"react-advanced-topics:fiber-architecture": "/roadmaps/103-react/content/101-react-advanced-topics/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-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,8 @@
|
||||
# Props vs State
|
||||
|
||||
Props (short for “properties”) and state are both plain JavaScript objects. While both hold information that influences the output of component render, they are different in one important way: props get passed to the component (similar to function parameters) whereas state is managed within the component (similar to variables declared within a function).
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/faq-state.html'>Component State</BadgeLink>
|
||||
<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,11 @@
|
||||
# Conditional Rendering
|
||||
|
||||
In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.
|
||||
|
||||
Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like [if](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) or the [conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to create elements representing the current state, and let React update the UI to match them.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/conditional-rendering.html'>Conditional Rendering</BadgeLink>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
# Component Life Cycle
|
||||
|
||||
Each component has several “lifecycle methods” that you can override to run code at particular times in the process. You can use this [lifecycle diagram](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) as a cheat sheet. In the list below, commonly used lifecycle methods are marked as bold. The rest of them exist for relatively rare use cases.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/react-component.html#the-component-lifecycle'>The Component Lifecycle</BadgeLink>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
# Lists and Keys
|
||||
|
||||
When you render lists in React, you can use the `key` prop to specify a unique key for each item. This key is used to identify which item to update when you want to update a specific item.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/lists-and-keys.html'>Lists and Keys</BadgeLink>
|
||||
@@ -0,0 +1,7 @@
|
||||
# Composition vs Inheritance
|
||||
|
||||
React has a powerful composition model, and it is recommended to use composition instead of inheritance to reuse code between components.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/composition-vs-inheritance.html'>Composition vs Inheritance</BadgeLink>
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
# useState Hook
|
||||
|
||||
`useState` hook is used to manage the state of a component in functional components. Calling `useState` returns an array with two elements: the current state value and a function to update the state.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-state.html'>Using the State Hook</BadgeLink>
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
# useEffect Hook
|
||||
|
||||
`useEffect` is a special hook that lets you run side effects in React. It is similar to componentDidMount and componentDidUpdate, but it only runs when the component (or some of its props) changes.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-effect.html'>Using the Effect Hook</BadgeLink>
|
||||
@@ -0,0 +1,7 @@
|
||||
# Hooks
|
||||
|
||||
Hooks were introduced in React 16.8 and they let us use state and other React features without writing a class
|
||||
|
||||
<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-reference.html'>Hooks Reference</BadgeLink>
|
||||
@@ -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,8 @@
|
||||
# Writing Custom Hooks
|
||||
|
||||
Building your own Hooks lets you extract component logic into reusable functions.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-custom.html'>Creating Custom Hooks</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/how-to-create-react-hooks/'>How to Build Your Own React Hooks</BadgeLink>
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
# Common Hooks
|
||||
|
||||
React also has a lot of hooks that allow you to write more efficient React code.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-reference.html#usereducer'>React Hooks Reference</BadgeLink>
|
||||
@@ -0,0 +1,8 @@
|
||||
# React Hooks
|
||||
|
||||
Hooks were introduced in React 16.8 and they let us use state and other React features without writing a class
|
||||
|
||||
<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-reference.html'>Hooks Reference</BadgeLink>
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
# 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>
|
||||
@@ -0,0 +1,8 @@
|
||||
# Refs
|
||||
|
||||
Refs provide a way to access DOM nodes or React elements created in the render method.
|
||||
|
||||
In the typical React dataflow, props are the only way that parent components interact with their children. To modify a child, you re-render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. The child to be modified could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/refs-and-the-dom.html'>Refs and DOM</BadgeLink>
|
||||
@@ -0,0 +1,8 @@
|
||||
# Render Props
|
||||
|
||||
The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function.
|
||||
|
||||
A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/render-props.html'>Render Props in React</BadgeLink>
|
||||
@@ -0,0 +1,8 @@
|
||||
# High Order Components
|
||||
|
||||
A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.
|
||||
|
||||
Concretely, a higher-order component is a function that takes a component and returns a new component.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/higher-order-components.html'>High-Order Components</BadgeLink>
|
||||
@@ -0,0 +1,6 @@
|
||||
# Portals
|
||||
|
||||
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/portals.html'>Portals in React</BadgeLink>
|
||||
@@ -0,0 +1,8 @@
|
||||
# Error Boundaries
|
||||
|
||||
In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to emit cryptic errors on next renders. These errors were always caused by an earlier error in the application code, but React did not provide a way to handle them gracefully in components, and could not recover from them.
|
||||
|
||||
Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/error-boundaries.html'>Error Boundaries in React</BadgeLink>
|
||||
@@ -0,0 +1,9 @@
|
||||
# Fiber Architecture
|
||||
|
||||
React 16.0 was released with an update to the React core algorithm. This new core architecture is named “Fiber.” Facebook has completely rewritten the internals of React from the ground-up while keeping the public API essentially unchanged; in simple terms, it means only changing the engine of a running car.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://github.com/acdlite/react-fiber-architecture'>React Fiber Architecture</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://dzone.com/articles/understanding-of-react-fiber-architecture'>Understanding React Fiber Architecture</BadgeLink>
|
||||
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
# 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.
|
||||
@@ -0,0 +1,8 @@
|
||||
# React Router
|
||||
|
||||
React router is the most famous library when it comes to implementing routing in React applications.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://reactrouter.com/'>React Router — Official Website</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactrouter.com/docs/en/v6/getting-started/tutorial'>Getting Started Guide</BadgeLink>
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
# Reach Router
|
||||
|
||||
Reach Router is a small, simple router for React that borrows from React Router, Ember, and Preact Router. Reach Router has a small footprint, supports only simple route patterns by design, and has strong (but experimental) accessibility features.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://reach.tech/router/'>Reach Router — Official Website</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reach.tech/router/tutorial/01-intro'>Getting Started Guide</BadgeLink>
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
# Routing
|
||||
|
||||
Routing is an essential concept in Single Page Applications (SPA). When your application is divided into separated logical sections, and all of them are under their own URL, your users can easily share links among each other.
|
||||
@@ -0,0 +1,10 @@
|
||||
# Next.js
|
||||
|
||||
Next.js is an open-source development framework built on top of Node.js enabling React based web applications functionalities such as server-side rendering and generating static websites.
|
||||
|
||||
<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Website' href='https://nextjs.org/'>Official Website</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='Docs' href='https://nextjs.org/docs/getting-started'>Official Docs for Getting Started</BadgeLink>
|
||||
<BadgeLink colorScheme='purple' badgeText='Watch' href='https://masteringnextjs.com/'>Mastering Next.js</BadgeLink>
|
||||
<BadgeLink colorScheme='purple' badgeText='Watch' href='https://youtu.be/1WmNXEVia8I'>Next.js for Beginners - freeCodeCamp</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Handbook' href='https://www.freecodecamp.org/news/the-next-js-handbook/'>The Next.js Handbook — freeCodeCamp</BadgeLink>
|
||||
@@ -0,0 +1,11 @@
|
||||
# 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>
|
||||
@@ -0,0 +1,8 @@
|
||||
# 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>
|
||||
@@ -0,0 +1,9 @@
|
||||
# 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>
|
||||
@@ -0,0 +1,7 @@
|
||||
# React Query
|
||||
|
||||
Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/TanStack/query'>TanStack Query</BadgeLink>
|
||||
<BadgeLink colorScheme='red' badgeText='Watch' href='https://www.youtube.com/watch?v=novnyCaa7To'>React Query in 100 Seconds</BadgeLink>
|
||||
@@ -0,0 +1,9 @@
|
||||
# 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>
|
||||
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
# Apollo
|
||||
|
||||
Apollo is a platform for building a unified graph, a communication layer that helps you manage the flow of data between your application clients (such as web and native apps) and your back-end services.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.apollographql.com'>Apollo Website</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.apollographql.com/docs/'>Official Docs</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='Watch' href='https://www.youtube.com/c/ApolloGraphQL/'>Official YouTube Channel</BadgeLink>
|
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=YyUWW04HwKY'>GraphQL With React Tutorial - Apollo Client</BadgeLink>
|
||||
@@ -0,0 +1,7 @@
|
||||
# Relay Modern
|
||||
|
||||
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.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://relay.dev/'>Official Website</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://relay.dev/docs/'>Introduction to Relay modern</BadgeLink>
|
||||
@@ -0,0 +1,9 @@
|
||||
# Axios
|
||||
|
||||
The most common way for frontend programs to communicate with servers is through the HTTP protocol. You are probably familiar with the Fetch API and the XMLHttpRequest interface, which allows you to fetch resources and make HTTP requests.
|
||||
|
||||
Axios is a client HTTP API based on the XMLHttpRequest interface provided by browsers.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://axios-http.com/docs/intro'>Axios Getting Started</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://blog.logrocket.com/how-to-make-http-requests-like-a-pro-with-axios/#why'>How to make HTTP requests with Axios</BadgeLink>
|
||||
@@ -0,0 +1,6 @@
|
||||
# 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>
|
||||
@@ -0,0 +1,7 @@
|
||||
# Superagent
|
||||
|
||||
Small progressive client-side HTTP request library, and Node.js module with the same API, supporting many high-level HTTP client features
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://visionmedia.github.io/superagent/'>Official Website</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/visionmedia/superagent'>GitHub Repository</BadgeLink>
|
||||
@@ -0,0 +1,8 @@
|
||||
# API Calls
|
||||
|
||||
There are several options available to make API calls from your React.js applications.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/faq-ajax.html'>AJAX and APIs</BadgeLink>
|
||||
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
# React Native
|
||||
|
||||
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.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://reactnative.dev/'>React Native: Official Website</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactnative.dev/docs/getting-started'>Official Getting Started</BadgeLink>
|
||||
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
# 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.
|
||||
@@ -0,0 +1,7 @@
|
||||
# React hook form
|
||||
|
||||
React hook form is an opensource form library for react. Performant, flexible and extensible forms with easy-to-use validation.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://react-hook-form.com/'>React Hook Form: Official Website</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/react-hook-form/react-hook-form'>react-hook-form/react-hook-form</BadgeLink>
|
||||
@@ -0,0 +1,12 @@
|
||||
# Formik
|
||||
|
||||
Formik is another famous opensource form library that helps with getting values in and out of form state, validation and error messages, and handling form submissions.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://formik.org/'>Official Website — Formik</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://formik.org/docs/overview'>Getting Started</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/formik/formik'>formik/formik</BadgeLink>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
# Final form
|
||||
|
||||
High performance subscription-based form state management for React.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://final-form.org/react'>Final Form — Official Website</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/final-form/react-final-form'>final-form / react-final-form</BadgeLink>
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
# Forms
|
||||
|
||||
Although you can build forms using vanilla React, it normally requires a lot of boilerplate code. This is because the form is built using a combination of state and props. To make it easier to manage forms, we use some sort of library.
|
||||
@@ -0,0 +1,6 @@
|
||||
# Jest
|
||||
|
||||
Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://jestjs.io/'>Jest Website</BadgeLink>
|
||||
@@ -0,0 +1,6 @@
|
||||
# React Testing Library
|
||||
|
||||
The React Testing Library is a very lightweight solution for testing React components. It provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices. Its primary guiding principle is: The more your tests resemble the way your software is used, the more confidence they can give you.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Getting Started' href='https://testing-library.com/docs/react-testing-library/intro/'>React Testing Library</BadgeLink>
|
||||
@@ -0,0 +1,8 @@
|
||||
# Cypress
|
||||
|
||||
Cypress framework is a JavaScript-based end-to-end testing framework built on top of Mocha – a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and convenient. It also uses a BDD/TDD assertion library and a browser to pair with any JavaScript testing framework.
|
||||
|
||||
<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Website' href='https://www.cypress.io/'>Official Website</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='Docs' href='https://docs.cypress.io/guides/overview/why-cypress#Other'>Official Documentation</BadgeLink>
|
||||
<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=7N63cMKosIE'>Cypress End-to-End Testing</BadgeLink>
|
||||
@@ -0,0 +1,7 @@
|
||||
# Testing
|
||||
|
||||
A key to building software that meets requirements without defects is testing. Software testing helps developers know they are building the right software. When tests are run as part of the development process (often with continuous integration tools), they build confidence and prevent regressions in the code.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.guru99.com/software-testing-introduction-importance.html'>What is Software Testing?</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.browserstack.com/guide/testing-pyramid-for-test-automation'>Testing Pyramid</BadgeLink>
|
||||
@@ -0,0 +1,8 @@
|
||||
# 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>
|
||||
@@ -0,0 +1,9 @@
|
||||
# Redux
|
||||
|
||||
Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as [live code editing combined with a time traveling debugger](https://github.com/reduxjs/redux-devtools).
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://redux.js.org/'>Official Website</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://redux.js.org/introduction/getting-started'>Official Getting Started to Redux</BadgeLink>
|
||||
<BadgeLink colorScheme='green' badgeText='Course' href='https://redux.js.org/tutorials/essentials/part-1-overview-concepts'>Official Tutorial to Learn Redux</BadgeLink>
|
||||
<BadgeLink colorScheme='green' badgeText='Course' href='https://egghead.io/courses/fundamentals-of-redux-course-from-dan-abramov-bd5cc867'>Fundamentals of Redux Course from Dan Abramov</BadgeLink>
|
||||
@@ -0,0 +1,8 @@
|
||||
# MobX
|
||||
|
||||
MobX is an open source state management tool. MobX, a simple, scalable, and standalone state management library, follows functional reactive programming (FRP) implementation and prevents inconsistent state by ensuring that all derivations are performed automatically.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://mobx.js.org/'>MobX Official Website</BadgeLink>
|
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=WQQq1QbYlAw'>Intro to MobX Tutorial</BadgeLink>
|
||||
@@ -0,0 +1,6 @@
|
||||
# State Management
|
||||
|
||||
Application state management is the process of maintaining knowledge of an application's inputs across multiple related data flows that form a complete business transaction -- or a session -- to understand the condition of the app at any given moment. In computer science, an input is information put into the program by the user and state refers to the condition of an application according to its stored inputs -- saved as variables or constants. State can also be described as the collection of preserved information that forms a complete session.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.techtarget.com/searchapparchitecture/definition/state-management'>What is State Management?</BadgeLink>
|
||||
@@ -0,0 +1,11 @@
|
||||
# Chakra UI
|
||||
|
||||
Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://chakra-ui.com/'>Chakra UI Website</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://chakra-ui.com/docs/getting-started'>Chakra UI Official Getting Started</BadgeLink>
|
||||
<BadgeLink badgeText='Course' colorScheme='green' href='https://egghead.io/courses/build-a-modern-user-interface-with-chakra-ui-fac68106'>Build a Modern User Interface with Chakra UI</BadgeLink>
|
||||
<BadgeLink badgeText='Watch' href='https://youtu.be/wI2vqXsjsIo'>Official Getting Started Video</BadgeLink>
|
||||
<BadgeLink badgeText='Watch' href='https://youtu.be/s-bIsz-NR3c'>Chakra UI Crash Course</BadgeLink>
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/why-should-you-start-using-chakraui/'>Why You Should Start Using Chakra UI</BadgeLink>
|
||||
@@ -0,0 +1,8 @@
|
||||
# Material UI
|
||||
|
||||
Material-UI is an open-source framework that features React components that implement Google’s Material Design.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://mui.com/'>Official Website</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='Docs' href='https://mui.com/getting-started/installation/'>Official Documentation</BadgeLink>
|
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=vyJU9efvUtQ'>Material UI React Tutorial</BadgeLink>
|
||||
@@ -0,0 +1,9 @@
|
||||
# Ant design
|
||||
|
||||
An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://ant.design/'>Official Website: Ant Design</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/ant-design/ant-design'>ant-design / ant-design</BadgeLink>
|
||||
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
# Styled components
|
||||
|
||||
Styled-components is a CSS-in-JS library that enables you to write regular CSS and attach it to JavaScript components. With styled-components, you can use the CSS you’re already familiar with instead of having to learn a new styling structure.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
|
||||
<BadgeLink colorScheme='blue' badgeText='Read' href='https://styled-components.com/'>Official Website</BadgeLink>
|
||||
<BadgeLink colorScheme='blue' badgeText='Read' href='https://styled-components.com/docs'>Official Docs</BadgeLink>
|
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=02zO0hZmwnw'>Styled Components Crash Course & Project</BadgeLink>
|
||||
@@ -0,0 +1,8 @@
|
||||
# Emotion
|
||||
|
||||
Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
|
||||
|
||||
<BadgeLink colorScheme='blue' badgeText='Read' href='https://emotion.sh/docs/introduction'>Official Website and Docs</BadgeLink>
|
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=yO3JU2bMLGA'>Styled components using emotion in React</BadgeLink>
|
||||
@@ -0,0 +1,3 @@
|
||||
# Styling
|
||||
|
||||
While "CSS in JS" is the most predominant way of styling modern frontend applications, there are several different ways to style your React applications whether it is vanilla CSS, [CSS Modules](https://github.com/css-modules/css-modules), or [CSS in JS](https://css-tricks.com/a-thorough-analysis-of-css-in-js/) etc and each has several frameworks available.
|
||||
@@ -0,0 +1,7 @@
|
||||
# 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>
|
||||
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"
|
||||
}
|
||||
53
content/roadmaps/107-python/content-paths.json
Normal file
53
content/roadmaps/107-python/content-paths.json
Normal file
@@ -0,0 +1,53 @@
|
||||
{
|
||||
"home": "/roadmaps/107-python/content/readme.md",
|
||||
"python-basics": "/roadmaps/107-python/content/100-python-basics/readme.md",
|
||||
"python-basics:basic-syntax": "/roadmaps/107-python/content/100-python-basics/100-basic-syntax.md",
|
||||
"python-basics:variables-and-datatypes": "/roadmaps/107-python/content/100-python-basics/101-variables-and-datatypes.md",
|
||||
"python-basics:conditionals": "/roadmaps/107-python/content/100-python-basics/102-conditionals.md",
|
||||
"python-basics:typecasting-exceptions": "/roadmaps/107-python/content/100-python-basics/103-typecasting-exceptions.md",
|
||||
"python-basics:functions": "/roadmaps/107-python/content/100-python-basics/104-functions.md",
|
||||
"python-basics:lists-tuples-sets-dictionaries": "/roadmaps/107-python/content/100-python-basics/105-lists-tuples-sets-dictionaries.md",
|
||||
"data-structures-and-algorithms": "/roadmaps/107-python/content/101-data-structures-and-algorithms/readme.md",
|
||||
"data-structures-and-algorithms:arrays-linked-lists": "/roadmaps/107-python/content/101-data-structures-and-algorithms/100-arrays-linked-lists.md",
|
||||
"data-structures-and-algorithms:heaps-stacks-queues": "/roadmaps/107-python/content/101-data-structures-and-algorithms/101-heaps-stacks-queues.md",
|
||||
"data-structures-and-algorithms:hash-tables": "/roadmaps/107-python/content/101-data-structures-and-algorithms/102-hash-tables.md",
|
||||
"data-structures-and-algorithms:binary-search-trees": "/roadmaps/107-python/content/101-data-structures-and-algorithms/103-binary-search-trees.md",
|
||||
"data-structures-and-algorithms:recursion": "/roadmaps/107-python/content/101-data-structures-and-algorithms/104-recursion.md",
|
||||
"data-structures-and-algorithms:sorting-algorithms": "/roadmaps/107-python/content/101-data-structures-and-algorithms/105-sorting-algorithms.md",
|
||||
"python-advanced-topics": "/roadmaps/107-python/content/102-python-advanced-topics/readme.md",
|
||||
"python-advanced-topics:oop": "/roadmaps/107-python/content/102-python-advanced-topics/100-oop/readme.md",
|
||||
"python-advanced-topics:oop:methods-dunder": "/roadmaps/107-python/content/102-python-advanced-topics/100-oop/100-methods-dunder.md",
|
||||
"python-advanced-topics:oop:inheritance": "/roadmaps/107-python/content/102-python-advanced-topics/100-oop/101-inheritance.md",
|
||||
"python-advanced-topics:oop:classes": "/roadmaps/107-python/content/102-python-advanced-topics/100-oop/102-classes.md",
|
||||
"python-advanced-topics:regular-expressions": "/roadmaps/107-python/content/102-python-advanced-topics/101-regular-expressions.md",
|
||||
"python-advanced-topics:decorators": "/roadmaps/107-python/content/102-python-advanced-topics/102-decorators.md",
|
||||
"python-advanced-topics:lambdas": "/roadmaps/107-python/content/102-python-advanced-topics/103-lambdas.md",
|
||||
"python-advanced-topics:iterators": "/roadmaps/107-python/content/102-python-advanced-topics/104-iterators.md",
|
||||
"python-advanced-topics:modules": "/roadmaps/107-python/content/102-python-advanced-topics/105-modules/readme.md",
|
||||
"python-advanced-topics:modules:builtin-modules": "/roadmaps/107-python/content/102-python-advanced-topics/105-modules/100-builtin-modules.md",
|
||||
"python-advanced-topics:modules:custom-modules": "/roadmaps/107-python/content/102-python-advanced-topics/105-modules/101-custom-modules.md",
|
||||
"version-control-systems": "/roadmaps/107-python/content/103-version-control-systems/readme.md",
|
||||
"version-control-systems:basic-git-usage": "/roadmaps/107-python/content/103-version-control-systems/100-basic-git-usage.md",
|
||||
"repo-hosting-services": "/roadmaps/107-python/content/104-repo-hosting-services/readme.md",
|
||||
"repo-hosting-services:github": "/roadmaps/107-python/content/104-repo-hosting-services/100-github.md",
|
||||
"repo-hosting-services:gitlab": "/roadmaps/107-python/content/104-repo-hosting-services/101-gitlab.md",
|
||||
"repo-hosting-services:bitbucket": "/roadmaps/107-python/content/104-repo-hosting-services/102-bitbucket.md",
|
||||
"python-package-managers": "/roadmaps/107-python/content/105-python-package-managers/readme.md",
|
||||
"python-package-managers:pypi": "/roadmaps/107-python/content/105-python-package-managers/100-pypi.md",
|
||||
"python-package-managers:pip": "/roadmaps/107-python/content/105-python-package-managers/101-pip.md",
|
||||
"python-frameworks": "/roadmaps/107-python/content/106-python-frameworks/readme.md",
|
||||
"python-frameworks:synchronous": "/roadmaps/107-python/content/106-python-frameworks/100-synchronous/readme.md",
|
||||
"python-frameworks:synchronous:django": "/roadmaps/107-python/content/106-python-frameworks/100-synchronous/100-django.md",
|
||||
"python-frameworks:synchronous:flask": "/roadmaps/107-python/content/106-python-frameworks/100-synchronous/101-flask.md",
|
||||
"python-frameworks:synchronous:pyramid": "/roadmaps/107-python/content/106-python-frameworks/100-synchronous/102-pyramid.md",
|
||||
"python-frameworks:asynchronous": "/roadmaps/107-python/content/106-python-frameworks/101-asynchronous/readme.md",
|
||||
"python-frameworks:asynchronous:gevent": "/roadmaps/107-python/content/106-python-frameworks/101-asynchronous/100-gevent.md",
|
||||
"python-frameworks:asynchronous:aiohttp": "/roadmaps/107-python/content/106-python-frameworks/101-asynchronous/101-aiohttp.md",
|
||||
"python-frameworks:asynchronous:tornado": "/roadmaps/107-python/content/106-python-frameworks/101-asynchronous/102-tornado.md",
|
||||
"python-frameworks:asynchronous:sanic": "/roadmaps/107-python/content/106-python-frameworks/101-asynchronous/103-sanic.md",
|
||||
"python-testing": "/roadmaps/107-python/content/107-python-testing/readme.md",
|
||||
"python-testing:unittest-pyunit": "/roadmaps/107-python/content/107-python-testing/100-unittest-pyunit.md",
|
||||
"python-testing:pytest": "/roadmaps/107-python/content/107-python-testing/101-pytest.md",
|
||||
"python-testing:doctest": "/roadmaps/107-python/content/107-python-testing/102-doctest.md",
|
||||
"python-testing:nose": "/roadmaps/107-python/content/107-python-testing/102-nose.md"
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
# Basic syntax
|
||||
@@ -0,0 +1 @@
|
||||
# Variables and datatypes
|
||||
@@ -0,0 +1 @@
|
||||
# Conditionals
|
||||
@@ -0,0 +1 @@
|
||||
# Typecasting exceptions
|
||||
@@ -0,0 +1 @@
|
||||
# Functions
|
||||
@@ -0,0 +1 @@
|
||||
# Lists tuples sets dictionaries
|
||||
@@ -0,0 +1 @@
|
||||
# Python basics
|
||||
@@ -0,0 +1 @@
|
||||
# Arrays linked lists
|
||||
@@ -0,0 +1 @@
|
||||
# Heaps stacks queues
|
||||
@@ -0,0 +1 @@
|
||||
# Hash tables
|
||||
@@ -0,0 +1 @@
|
||||
# Binary search trees
|
||||
@@ -0,0 +1 @@
|
||||
# Recursion
|
||||
@@ -0,0 +1 @@
|
||||
# Sorting algorithms
|
||||
@@ -0,0 +1 @@
|
||||
# Data structures and algorithms
|
||||
@@ -0,0 +1 @@
|
||||
# Methods dunder
|
||||
@@ -0,0 +1 @@
|
||||
# Inheritance
|
||||
@@ -0,0 +1 @@
|
||||
# Classes
|
||||
@@ -0,0 +1 @@
|
||||
# Oop
|
||||
@@ -0,0 +1 @@
|
||||
# Regular expressions
|
||||
@@ -0,0 +1 @@
|
||||
# Decorators
|
||||
@@ -0,0 +1 @@
|
||||
# Lambdas
|
||||
@@ -0,0 +1 @@
|
||||
# Iterators
|
||||
@@ -0,0 +1 @@
|
||||
# Builtin modules
|
||||
@@ -0,0 +1 @@
|
||||
# Custom modules
|
||||
@@ -0,0 +1 @@
|
||||
# Modules
|
||||
@@ -0,0 +1 @@
|
||||
# Python advanced topics
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user