From 68d360c0b4ef67478b69cce2faf1b23489db9cfe Mon Sep 17 00:00:00 2001 From: Robin Wieruch Date: Thu, 13 Oct 2022 14:32:43 +0200 Subject: [PATCH] docs(react-roadmap): new content by robinwieruch.de (#2467) --- .../100-react-fundamental-topics/100-create-react-app.md | 1 + .../content/100-react-fundamental-topics/101-jsx.md | 1 - .../102-components/100-functional-components.md | 3 ++- .../102-components/101-class-components.md | 1 + .../100-react-fundamental-topics/102-components/readme.md | 4 ++-- .../100-react-fundamental-topics/103-props-vs-state.md | 2 +- .../104-conditional-rendering.md | 4 +--- .../100-react-fundamental-topics/106-lists-and-keys.md | 2 ++ .../107-composition-vs-inheritance.md | 2 +- .../108-basic-hooks/100-use-state.md | 2 +- .../108-basic-hooks/101-use-effect.md | 1 + .../100-hooks/101-writing-your-own-hooks.md | 4 ++-- .../101-react-advanced-topics/100-hooks/102-common-hooks.md | 5 +++++ .../content/101-react-advanced-topics/100-hooks/readme.md | 2 +- .../content/101-react-advanced-topics/101-context.md | 1 + .../103-react/content/101-react-advanced-topics/102-refs.md | 1 + .../content/101-react-advanced-topics/103-render-props.md | 1 + .../101-react-advanced-topics/104-high-order-components.md | 1 + .../102-react-ecosystem/100-routers/100-react-router.md | 1 + .../content/102-react-ecosystem/103-api-calls/readme.md | 3 +-- .../content/102-react-ecosystem/105-forms/readme.md | 2 ++ .../106-testing/101-react-testing-library.md | 1 + .../107-state-management/100-context-state.md | 1 + .../102-react-ecosystem/107-state-management/readme.md | 1 + .../102-react-ecosystem/108-styling/103-styled-components.md | 1 + .../content/102-react-ecosystem/108-styling/readme.md | 2 ++ .../roadmaps/103-react/content/102-react-ecosystem/readme.md | 1 + 27 files changed, 36 insertions(+), 15 deletions(-) diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/100-create-react-app.md b/content/roadmaps/103-react/content/100-react-fundamental-topics/100-create-react-app.md index a23a43785..c4e56125c 100644 --- a/content/roadmaps/103-react/content/100-react-fundamental-topics/100-create-react-app.md +++ b/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 Free Content Official Website +Advanced: Custom Setup with Webpack diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/101-jsx.md b/content/roadmaps/103-react/content/100-react-fundamental-topics/101-jsx.md index 1d326b7ea..bd36074cc 100644 --- a/content/roadmaps/103-react/content/100-react-fundamental-topics/101-jsx.md +++ b/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 Free Content Introduction to JSX JSX in React – Explained with Examples - diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/102-components/100-functional-components.md b/content/roadmaps/103-react/content/100-react-fundamental-topics/102-components/100-functional-components.md index 7cd8e34d3..814b0d177 100644 --- a/content/roadmaps/103-react/content/100-react-fundamental-topics/102-components/100-functional-components.md +++ b/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 Free Content Components and Props -ReactJS Functional Components +Functional Components in React (1) +Functional Components in React (2) diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/102-components/101-class-components.md b/content/roadmaps/103-react/content/100-react-fundamental-topics/102-components/101-class-components.md index b7cb7b6d2..cb3a862ec 100644 --- a/content/roadmaps/103-react/content/100-react-fundamental-topics/102-components/101-class-components.md +++ b/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 Components and Props Is There Any Reason to Still Use React Class Components? Functional Components vs Class Components in React +Migrate Class Components to Functional Components with Hooks in React diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/102-components/readme.md b/content/roadmaps/103-react/content/100-react-fundamental-topics/102-components/readme.md index dc205ed8d..156d8e6e5 100644 --- a/content/roadmaps/103-react/content/100-react-fundamental-topics/102-components/readme.md +++ b/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 Free Content Components and Props Components in Depth - - +Explore the different types of components in React +What is the difference between components, elements, and instances? diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/103-props-vs-state.md b/content/roadmaps/103-react/content/100-react-fundamental-topics/103-props-vs-state.md index 30b1e1f86..518b922d6 100644 --- a/content/roadmaps/103-react/content/100-react-fundamental-topics/103-props-vs-state.md +++ b/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. Free Content Component State +How to use Props in React What is the difference between state and props in React? - diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/104-conditional-rendering.md b/content/roadmaps/103-react/content/100-react-fundamental-topics/104-conditional-rendering.md index d7d733948..c1dcaf01a 100644 --- a/content/roadmaps/103-react/content/100-react-fundamental-topics/104-conditional-rendering.md +++ b/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. Free Content Conditional Rendering - - - +Different techniques for conditional rendering in React diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/106-lists-and-keys.md b/content/roadmaps/103-react/content/100-react-fundamental-topics/106-lists-and-keys.md index d02f659fe..216b8e6c9 100644 --- a/content/roadmaps/103-react/content/100-react-fundamental-topics/106-lists-and-keys.md +++ b/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 Free Content Lists and Keys +List components in React by Example +Why do we need the key prop in React? diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/107-composition-vs-inheritance.md b/content/roadmaps/103-react/content/100-react-fundamental-topics/107-composition-vs-inheritance.md index 400bd15d3..9f4726469 100644 --- a/content/roadmaps/103-react/content/100-react-fundamental-topics/107-composition-vs-inheritance.md +++ b/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 Free Content Composition vs Inheritance - +How to perform component composition in React diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/100-use-state.md b/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/100-use-state.md index 6350e3e37..9a8f4bf04 100644 --- a/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/100-use-state.md +++ b/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/100-use-state.md @@ -4,4 +4,4 @@ Free Content Using the State Hook - +React useState Hook by Example diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/101-use-effect.md b/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/101-use-effect.md index 354a583f8..9118612db 100644 --- a/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/101-use-effect.md +++ b/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/101-use-effect.md @@ -4,3 +4,4 @@ Free Content Using the Effect Hook +React useEffect Hook by Example diff --git a/content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/101-writing-your-own-hooks.md b/content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/101-writing-your-own-hooks.md index c2235cb12..1d5864208 100644 --- a/content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/101-writing-your-own-hooks.md +++ b/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 Free Content Creating Custom Hooks -How to Build Your Own React Hooks - +How to create a custom Hook (1) +How to create a custom Hook (2) followed by Examples diff --git a/content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/102-common-hooks.md b/content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/102-common-hooks.md index 85f786d90..0de24d765 100644 --- a/content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/102-common-hooks.md +++ b/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. Free Content React Hooks Reference +useCallback Hook by Example +useMemo Hook by Example +useContext Hook by Example +useReducer Hook by Example +useReducer vs useState Hook diff --git a/content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/readme.md b/content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/readme.md index 9a90a36c6..7cbd43651 100644 --- a/content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/readme.md +++ b/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 Free Content Introduction to Hooks Hooks Reference - +Hooks by Example diff --git a/content/roadmaps/103-react/content/101-react-advanced-topics/101-context.md b/content/roadmaps/103-react/content/101-react-advanced-topics/101-context.md index 76531174a..1e3a6f2ae 100644 --- a/content/roadmaps/103-react/content/101-react-advanced-topics/101-context.md +++ b/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 Free Content Official React Context Docs +React Context: Why, How, and When diff --git a/content/roadmaps/103-react/content/101-react-advanced-topics/102-refs.md b/content/roadmaps/103-react/content/101-react-advanced-topics/102-refs.md index 99972355d..5a7519255 100644 --- a/content/roadmaps/103-react/content/101-react-advanced-topics/102-refs.md +++ b/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 Free Content Refs and DOM +Examples of using refs in React diff --git a/content/roadmaps/103-react/content/101-react-advanced-topics/103-render-props.md b/content/roadmaps/103-react/content/101-react-advanced-topics/103-render-props.md index 7c1ac302f..a0cac9c96 100644 --- a/content/roadmaps/103-react/content/101-react-advanced-topics/103-render-props.md +++ b/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 Free Content Render Props in React +How to create a Render Prop Component diff --git a/content/roadmaps/103-react/content/101-react-advanced-topics/104-high-order-components.md b/content/roadmaps/103-react/content/101-react-advanced-topics/104-high-order-components.md index 64c084307..ff3ca853b 100644 --- a/content/roadmaps/103-react/content/101-react-advanced-topics/104-high-order-components.md +++ b/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 Free Content High-Order Components +How to create a Higher-Order Component diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/100-routers/100-react-router.md b/content/roadmaps/103-react/content/102-react-ecosystem/100-routers/100-react-router.md index 31b597588..6f9017e11 100644 --- a/content/roadmaps/103-react/content/102-react-ecosystem/100-routers/100-react-router.md +++ b/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 React Router — Official Website Getting Started Guide React Router v6 in 1 hour +How to use React Router v6 diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/readme.md b/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/readme.md index d9a8dbec7..a2ff0b485 100644 --- a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/readme.md +++ b/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 Free Content AJAX and APIs - - +How to fetch data in React diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/105-forms/readme.md b/content/roadmaps/103-react/content/102-react-ecosystem/105-forms/readme.md index 7c9976493..1101c6f39 100644 --- a/content/roadmaps/103-react/content/102-react-ecosystem/105-forms/readme.md +++ b/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. + +How to use Forms in React diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/106-testing/101-react-testing-library.md b/content/roadmaps/103-react/content/102-react-ecosystem/106-testing/101-react-testing-library.md index 8505ba7e5..a97947aa9 100644 --- a/content/roadmaps/103-react/content/102-react-ecosystem/106-testing/101-react-testing-library.md +++ b/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 Free Content React Testing Library +How to use React Testing Library diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/100-context-state.md b/content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/100-context-state.md index 76531174a..064853629 100644 --- a/content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/100-context-state.md +++ b/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 Free Content Official React Context Docs +State with useContext and useState/useReducer diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/readme.md b/content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/readme.md index 9a03c3eb3..6f761619d 100644 --- a/content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/readme.md +++ b/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 Free Content What is State Management? +Overview of State in React diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/103-styled-components.md b/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/103-styled-components.md index 9daecf6fd..41c83c169 100644 --- a/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/103-styled-components.md +++ b/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 Official Website Official Docs Styled Components Crash Course & Project +Best Practices for Styled Components diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/readme.md b/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/readme.md index a313452b7..49cd1b862 100644 --- a/content/roadmaps/103-react/content/102-react-ecosystem/108-styling/readme.md +++ b/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. + +Ways to CSS style a React application diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/readme.md b/content/roadmaps/103-react/content/102-react-ecosystem/readme.md index fe358882b..2e4f657f0 100644 --- a/content/roadmaps/103-react/content/102-react-ecosystem/readme.md +++ b/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 Free Content Awesome React Awesome React Components +Popular React Libraries