add new references to learn component lifecycles (#7319)

* add new references to learn component lifecycles

* add new references to learn component lifecycles and update official at top

* add new references to learn component lifecycles and place the main link in link section

src/data/roadmaps/react/content/component-lifecycle@8OBlgDRUg-CTgDXY-QHyO.md

@@ -1,10 +1,14 @@
 # Component Life Cycle
 
-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.
+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.
 
 It is not recommended to use lifecycle methods manually. Instead, use the useEffect hook with functional components.
 
 Visit the following resources to learn more:
 
+- [@official@Lifecycle of Reactive Effects](https://react.dev/learn/lifecycle-of-reactive-effectsv)
 - [@official@Class Component](https://react.dev/reference/react/Component)
-- [@official@Lifecycle of Reactive Effects](https://react.dev/learn/lifecycle-of-reactive-effects)
+- [@article@React component lifecycle: React lifecycle methods & hooks](https://tsh.io/blog/react-component-lifecycle-methods-vs-hooks/)
+- [@article@The React lifecycle: methods and hooks explained](https://retool.com/blog/the-react-lifecycle-methods-and-hooks-explained#react-hooks-and-the-component-lifecycle)
+- [@article@React Lifecycle: Methods & Hooks In Detail](https://www.bairesdev.com/blog/react-lifecycle-methods-hooks/)
+- [@article@lifecycle diagram](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)