docs(react-roadmap): new content by robinwieruch.de (#2467)

content/roadmaps/103-react/content/100-react-fundamental-topics/100-create-react-app.md

@@ -6,3 +6,4 @@ It sets up your development environment so that you can use the latest JavaScrip
 
 <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>

content/roadmaps/103-react/content/100-react-fundamental-topics/101-jsx.md

@@ -5,4 +5,3 @@ JSX stands for JavaScript XML. It allows writing HTML in JavaScript and converts
 <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>
-

content/roadmaps/103-react/content/100-react-fundamental-topics/102-components/100-functional-components.md

@@ -4,4 +4,5 @@ Functional components are some of the more common components that will come acro
 
 <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>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/reactjs-functional-components/'>Functional Components in React (1)</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-function-component/'>Functional Components in React (2)</BadgeLink>

content/roadmaps/103-react/content/100-react-fundamental-topics/102-components/101-class-components.md

@@ -8,3 +8,4 @@ Although the class components are supported in React, it is encouraged to write
 <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>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-hooks-migration/'>Migrate Class Components to Functional Components with Hooks in React</BadgeLink>

content/roadmaps/103-react/content/100-react-fundamental-topics/102-components/readme.md

@@ -5,5 +5,5 @@ Components are the building blocks of React applications. They let us split the
 <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>
-
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-component-types/'>Explore the different types of components in React</BadgeLink>
-
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-element-component/'>What is the difference between components, elements, and instances?</BadgeLink>

content/roadmaps/103-react/content/100-react-fundamental-topics/103-props-vs-state.md

@@ -4,5 +4,5 @@ Props (short for “properties”) and state are both plain JavaScript objects.
 
 <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://www.robinwieruch.de/react-pass-props-to-component/'>How to use Props in React</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>
-

content/roadmaps/103-react/content/100-react-fundamental-topics/104-conditional-rendering.md

@@ -6,6 +6,4 @@ Conditional rendering in React works the same way conditions work in JavaScript.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/conditional-rendering.html'>Conditional Rendering</BadgeLink>
-
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/conditional-rendering-react/'>Different techniques for conditional rendering in React</BadgeLink>
-
-

content/roadmaps/103-react/content/100-react-fundamental-topics/106-lists-and-keys.md

@@ -4,3 +4,5 @@ When you render lists in React, you can use the `key` prop to specify a unique k
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/lists-and-keys.html'>Lists and Keys</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-list-component/'>List components in React by Example</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-list-key/'>Why do we need the key prop in React?</BadgeLink>

content/roadmaps/103-react/content/100-react-fundamental-topics/107-composition-vs-inheritance.md

@@ -4,4 +4,4 @@ React has a powerful composition model, and it is recommended to use composition
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/composition-vs-inheritance.html'>Composition vs Inheritance</BadgeLink>
-
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-component-composition/'>How to perform component composition in React</BadgeLink>

content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/100-use-state.md

@@ -4,4 +4,4 @@
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-state.html'>Using the State Hook</BadgeLink>
-
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-usestate-hook/'>React useState Hook by Example</BadgeLink>

content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/101-use-effect.md

@@ -4,3 +4,4 @@
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-effect.html'>Using the Effect Hook</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-useeffect-hook/'>React useEffect Hook by Example</BadgeLink>

content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/101-writing-your-own-hooks.md

@@ -4,5 +4,5 @@ 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>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/how-to-create-react-hooks/'>How to create a custom Hook (1)</BadgeLink>
-
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-custom-hook/'>How to create a custom Hook (2) followed by Examples</BadgeLink>

content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/102-common-hooks.md

@@ -4,3 +4,8 @@ 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>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-usecallback-hook/'>useCallback Hook by Example</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-usememo-hook/'>useMemo Hook by Example</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-usecontext-hook/'>useContext Hook by Example</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-usereducer-hook/'>useReducer Hook by Example</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-usereducer-vs-usestate/'>useReducer vs useState Hook</BadgeLink>

content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/readme.md

@@ -5,4 +5,4 @@ Hooks were introduced in React 16.8 and they let us use state and other React fe
 <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>
-
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-hooks/'>Hooks by Example</BadgeLink>

content/roadmaps/103-react/content/101-react-advanced-topics/101-context.md

@@ -6,3 +6,4 @@ In a typical React application, data is passed top-down (parent to child) via pr
 
 <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>

content/roadmaps/103-react/content/101-react-advanced-topics/102-refs.md

@@ -6,3 +6,4 @@ In the typical React dataflow, props are the only way that parent components int
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/refs-and-the-dom.html'>Refs and DOM</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-ref/'>Examples of using refs in React</BadgeLink>

content/roadmaps/103-react/content/101-react-advanced-topics/103-render-props.md

@@ -6,3 +6,4 @@ A component with a render prop takes a function that returns a React element and
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/render-props.html'>Render Props in React</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-render-props/'>How to create a Render Prop Component</BadgeLink>

content/roadmaps/103-react/content/101-react-advanced-topics/104-high-order-components.md

@@ -6,3 +6,4 @@ Concretely, a higher-order component is a function that takes a component and re
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/higher-order-components.html'>High-Order Components</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-higher-order-components/'>How to create a Higher-Order Component</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/100-routers/100-react-router.md

@@ -6,3 +6,4 @@ React router is the most famous library when it comes to implementing routing in
 <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>
 <BadgeLink badgeText='Watch' href='https://youtu.be/0cSVuySEB0A'>React Router v6 in 1 hour</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-router/'>How to use React Router v6</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/readme.md

@@ -4,5 +4,4 @@ There are several options available to make API calls from your React.js applica
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/faq-ajax.html'>AJAX and APIs</BadgeLink>
-
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-hooks-fetch-data/'>How to fetch data in React</BadgeLink>
-

content/roadmaps/103-react/content/102-react-ecosystem/105-forms/readme.md

@@ -1,3 +1,5 @@
 # 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.
+
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-form/'>How to use Forms in React</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/106-testing/101-react-testing-library.md

@@ -4,3 +4,4 @@ The React Testing Library is a very lightweight solution for testing React compo
 
 <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>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-testing-library/'>How to use React Testing Library</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/100-context-state.md

@@ -6,3 +6,4 @@ In a typical React application, data is passed top-down (parent to child) via pr
 
 <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-state-usereducer-usestate-usecontext/'>State with useContext and useState/useReducer</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/readme.md

@@ -4,3 +4,4 @@ Application state management is the process of maintaining knowledge of an appli
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.techtarget.com/searchapparchitecture/definition/state-management'>What is State Management?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-state/'>Overview of State in React</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/108-styling/103-styled-components.md

@@ -7,3 +7,4 @@ Styled-components is a CSS-in-JS library that enables you to write regular CSS a
 <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>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/styled-components/'>Best Practices for Styled Components</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/108-styling/readme.md

@@ -1,3 +1,5 @@
 # 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.
+
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.robinwieruch.de/react-css-styling/'>Ways to CSS style a React application</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/readme.md

@@ -5,3 +5,4 @@ Thanks to its popularity, React has been enriched by a vast ecosystem of plugins
 <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>