🌳 Canh

React

Sep 13, 20241 min read

Basic

Details

  1. One-way data flow, thinking in react
  2. JSX
  3. key property
  4. Class components vs function components
  5. Main lifecycle methods for class components
  6. Main hooks
    1. useState
    2. useEffect
  7. Handling events, SyntheticEvent
  8. Controlled components
  9. React dev tools
  1. https://reactjs.org/tutorial/tutorial.html
  2. https://beta.reactjs.org/learn
  3. https://reactjs.org/docs/thinking-in-react.html
  4. https://reactjs.org/docs/introducing-jsx.html
  5. https://www.geeksforgeeks.org/differences-between-functional-components-and-class-components-in-react/
  6. https://reactjs.org/docs/handling-events.html
  7. https://reactjs.org/docs/events.html
  8. https://blog.logrocket.com/controlled-vs-uncontrolled-components-in-react/
  9. https://www.upbeatcode.com/react/how-to-use-react-developer-tools/
  10. https://chrome.google.com/webstore/detail/react-developer-tools/

Intermediate

Details

  1. Component lifecycle (both class and hooks)
  2. React Fragment
  3. Rendering process
  4. Hooks
    1. useRef, using refs
    2. useEffect in depth
    3. useMemo
    4. useCallback
    5. useContext
  5. React Context
  6. React Portal
  7. Pure components
  1. https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/
  2. https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
  3. https://reactjs.org/docs/fragments.html
  4. https://www.robinwieruch.de/react-ref/
  5. https://wavez.github.io/react-hooks-lifecycle/
  6. https://reactjs.org/docs/portals.html
  7. https://reactjs.org/docs/context.html
  8. https://kentcdodds.com/blog/how-to-use-react-context-effectively
  9. https://dmitripavlutin.com/dont-overuse-react-usecallback/
  10. https://dmitripavlutin.com/react-useeffect-explanation/
  11. https://blog.logrocket.com/what-are-react-pure-functional-components/

Advanced

Details

  1. Virtual DOM in depth, reconciliation
  2. React fiber
  3. Concurrent rendering in React
  4. Server-side rendering in React, ReactDOMServer
  5. dangerouslySetInnerHTML
  6. Hooks
    1. useInsertionEffect
    2. useImperativeHandle
    3. useTransition
    4. useSyncExternalStore
  7. React animation
  8. Testing
    1. ShallowRendering
  9. Alternative React implementations
    1. Preact
    2. Inferno
  1. https://reactjs.org/docs/reconciliation.html
  2. https://dev.to/adityasharan01/react-virtual-dom-explained-in-simple-english-10j6
  3. https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/
  4. https://blog.logrocket.com/deep-dive-react-fiber/
  5. https://blog.logrocket.com/react-concurrent-mode/
  6. https://swizec.com/blog/experimenting-with-the-new-react-concurrent-mode/
  7. https://beta.reactjs.org/apis/react/useMemo
  8. https://blog.logrocket.com/using-dangerouslysetinnerhtml-in-a-react-application/
  9. https://overreacted.io/react-as-a-ui-runtime/
  10. https://blog.logrocket.com/best-react-animation-library-top-7-libraries-compared/
  11. https://reactjs.org/docs/shallow-renderer.html
  12. https://kentcdodds.com/blog/why-i-never-use-shallow-rendering
  13. https://preactjs.com/
  14. https://www.infernojs.org/

Graph View

Backlinks