diff --git a/Technical Stack/Frontend Developer/React.md b/Technical Stack/Frontend Developer/React.md index 384fe5c..20bb524 100644 --- a/Technical Stack/Frontend Developer/React.md +++ b/Technical Stack/Frontend Developer/React.md @@ -3,43 +3,35 @@ React React is an open-source JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. - + * [ ] You know how to write a function component. [:books:](https://reactjs.org/docs/components-and-props.html#function-and-class-components) * [ ] You know the difference between function and class components. [:books:](https://medium.com/@Zwenza/functional-vs-class-components-in-react-231e3fbd7108#:~:text=The%20most%20obvious%20one%20difference,which%20returns%20a%20React%20element.) -* [ ] You know how to define and modify local component's state. [:books:](https://reactjs.org/docs/faq-state.html) +* [ ] You know how to define and modify local component's state. [:books:](https://react.dev/learn/state-a-components-memory) * [ ] You know what Virtual DOM is and how React uses it to render components. [:books:](https://www.geeksforgeeks.org/reactjs-virtual-dom/) -* [ ] You know how to use element events and how to incorporate them in React lifecycle [:books:](https://reactjs.org/docs/handling-events.html#gatsby-focus-wrapper) -* [ ] You know component's lifecycle and know how to use each of the phases. [:books:](https://www.geeksforgeeks.org/reactjs-lifecycle-components/) -* [ ] You know and can use Context API [:books:](https://reactjs.org/docs/context.html#reactcreatecontext) -* [ ] You can use refs to bind to a native DOM element and interact with it in component lifecycle [:books:](https://css-tricks.com/working-with-refs-in-react/) -* [ ] You understand concepts of higher order components and render functions, as well as their differences, pros and cons. [:books:](https://reactjs.org/docs/higher-order-components.html) +* [ ] You know how to use element events and how to incorporate them in React lifecycle [:books:](https://react.dev/learn/responding-to-events) +* [ ] You know component's lifecycle and know how to use each of the phases. [:books:](https://react.dev/learn/lifecycle-of-reactive-effects) +* [ ] You know and can use Context API [:books:](https://react.dev/reference/react/hooks#context-hooks) +* [ ] You can use refs to bind to a native DOM element and interact with it in component lifecycle [:books:](https://react.dev/reference/react/useRef#manipulating-the-dom-with-a-ref) * [ ] You know how to prevent components from re-rendering. [:books:](https://blog.bitsrc.io/5-ways-to-avoid-react-component-re-renderings-90241e775b8c) * [ ] You know how to reconcile global state with local component's state [:books:](https://redux.js.org/introduction/getting-started) -* [ ] You know how and when to use portals. [:books:](https://reactjs.org/docs/portals.html#gatsby-focus-wrapper) +* [ ] You know how and when to use portals. [:books:](https://react.dev/reference/react-dom/createPortal) [Hooks](/Technical%20Stack/Mobile%20Developer/React.md#hooks) ------------------------------------------------------------- -* [ ] You can use useState and useEffect hooks. [:books:](https://reactjs.org/docs/react-api.html#hooks) -* [ ] You know how hook dependency array works. [:books:](https://medium.com/better-programming/understanding-the-useeffect-dependency-array-2913da504c44) -* [ ] You know how to write a custom React hook. [:books:](https://reactjs.org/docs/hooks-custom.html) +* [ ] You can use useState and useEffect hooks. [:books:](https://react.dev/reference/react/hooks) +* [ ] You know how hook dependency array works. [:books:](https://react.dev/reference/react/useEffect#specifying-reactive-dependencies) +* [ ] You know how to write a custom React hook. [:books:](https://react.dev/learn/reusing-logic-with-custom-hooks) * [ ] You understand pros and cons of using useCallback hook. [:books:](https://kentcdodds.com/blog/usememo-and-usecallback/) -* [ ] You know how to use react-hook form [:books:](https://www.react-hook-form.com/get-started/) -* [ ] You are familliar with react-infinite-scroll-hook [:books:](https://www.npmjs.com/package/react-infinite-scroll-hook/) +* [ ] You know how to use react-hook form [:books:](https://www.react-hook-form.com/get-started/) +* [ ] You are familiar with react-infinite-scroll-hook [:books:](https://www.npmjs.com/package/react-infinite-scroll-hook/) ### [react-use](/Technical%20Stack/Mobile%20Developer/React.md#react-use) -* [ ] You know how to incorporate react-use hooks in your component [:books:](https://github.com/streamich/react-use/blob/master/docs/useLocalStorage.md) +* [ ] You know how to incorporate react-use hooks in your component [:books:](https://github.com/streamich/react-use) * [ ] You understand the advantages/disadvantages of the API compared to Lodash -[react-dom](/Technical%20Stack/Mobile%20Developer/React.md#react-dom) ---------------------------------------------------------------------- - -* [ ] You can explain how React.render function works. [:books:](https://reactjs.org/docs/rendering-elements.html) -* [ ] You can explain React.createPortal works. [:books:](https://pl.reactjs.org/docs/portals.html) -* [ ] You can explain how React.hydrate function works. [:books:](https://medium.com/@akakankur81/a-quick-overview-on-react-dom-render-and-hydrate-6d0ec6c1b234) - [Components](/Technical%20Stack/Mobile%20Developer/React.md#components) ----------------------------------------------------------------------- @@ -53,7 +45,7 @@ React is an open-source JavaScript library for building user interfaces. It is m ### [react-loading-skeleton](/Technical%20Stack/Mobile%20Developer/React.md#react-loading-skeleton) -* [ ] You used it in a project [:books:](https://www.npmjs.com/package/react-loading-skeleton) +* [ ] You used it in a project [:books:](https://www.npmjs.com/package/react-loading-skeleton) ### [react-dropzone](/Technical%20Stack/Mobile%20Developer/React.md#react-dropzone)