diff --git a/src/data/roadmaps/react/content/102-components/102-jsx.md b/src/data/roadmaps/react/content/102-components/102-jsx.md index 7d706e4ac..27c0b1e4e 100644 --- a/src/data/roadmaps/react/content/102-components/102-jsx.md +++ b/src/data/roadmaps/react/content/102-components/102-jsx.md @@ -4,7 +4,7 @@ JSX stands for JavaScript XML. It allows writing HTML in JavaScript and converts Visit the following resources to learn more: -- [Introduction to JSX](https://reactjs.org/docs/introducing-jsx.html) - [Writing markup with JSX](https://react.dev/learn/writing-markup-with-jsx) +- [JavaScript in JSX with Curly Braces](https://react.dev/learn/javascript-in-jsx-with-curly-braces) - [JSX in React – Explained with Examples](https://www.freecodecamp.org/news/jsx-in-react-introduction/) - [JSX in React on w3school](https://www.w3schools.com/react/react_jsx.asp) diff --git a/src/data/roadmaps/react/content/103-rendering/100-component-life-cycle.md b/src/data/roadmaps/react/content/103-rendering/100-component-life-cycle.md index 6708fbfb1..2f63e4cbb 100644 --- a/src/data/roadmaps/react/content/103-rendering/100-component-life-cycle.md +++ b/src/data/roadmaps/react/content/103-rendering/100-component-life-cycle.md @@ -1,8 +1,10 @@ # 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. +React components have a lifecycle consisting of three phases: Mounting, Updating, and Unmounting along with 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. + +It is not recommended to use lifecycle methods manually. Instead, use the useEffect hook with functional components. Visit the following resources to learn more: -- [The Component Lifecycle](https://reactjs.org/docs/react-component.html#the-component-lifecycle) +- [Class Component](https://react.dev/reference/react/Component) - [Lifecycle of Reactive Effects](https://react.dev/learn/lifecycle-of-reactive-effects) diff --git a/src/data/roadmaps/react/content/103-rendering/104-events.md b/src/data/roadmaps/react/content/103-rendering/104-events.md index 557956ee5..cb0183ec1 100644 --- a/src/data/roadmaps/react/content/103-rendering/104-events.md +++ b/src/data/roadmaps/react/content/103-rendering/104-events.md @@ -7,7 +7,7 @@ Handling events with React elements is very similar to handling events on DOM el Visit the following resources to learn more: -- [Handling Events in React](https://reactjs.org/docs/handling-events.html) -- [Synthetic Events in React](https://reactjs.org/docs/events.html) +- [Responding to Events](https://react.dev/learn/responding-to-events) +- [React Event Object (Synthetic Event)](https://react.dev/reference/react-dom/components/common#react-event-object) - [Responding to Events](https://react.dev/learn/responding-to-events) - [React Event Handler](https://www.robinwieruch.de/react-event-handler/) diff --git a/src/data/roadmaps/react/content/103-rendering/105-high-order-components.md b/src/data/roadmaps/react/content/103-rendering/105-high-order-components.md index 716f56dce..1869186aa 100644 --- a/src/data/roadmaps/react/content/103-rendering/105-high-order-components.md +++ b/src/data/roadmaps/react/content/103-rendering/105-high-order-components.md @@ -4,6 +4,8 @@ A higher-order component (HOC) is an advanced technique in React for reusing com Concretely, a higher-order component is a function that takes a component and returns a new component. +Higher-order components are not commonly used in modern React code. In order to reuse logic, React hooks are mainly used now. + Visit the following resources to learn more: - [High-Order Components](https://reactjs.org/docs/higher-order-components.html) diff --git a/src/data/roadmaps/react/content/114-error-boundaries.md b/src/data/roadmaps/react/content/114-error-boundaries.md index d0bdb677f..698605dad 100644 --- a/src/data/roadmaps/react/content/114-error-boundaries.md +++ b/src/data/roadmaps/react/content/114-error-boundaries.md @@ -6,4 +6,4 @@ Error boundaries are React components that catch JavaScript errors anywhere in t Visit the following resources to learn more: -- [Error Boundaries in React](https://reactjs.org/docs/error-boundaries.html) +- [Error Boundaries in React](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)