diff --git a/Technical Stack/Mobile Developer/React.md b/Technical Stack/Mobile Developer/React.md index a100839..1e4d259 100644 --- a/Technical Stack/Mobile Developer/React.md +++ b/Technical Stack/Mobile Developer/React.md @@ -1,50 +1,52 @@ React ===== -* [ ] You know how to write a function component. [:books:](https://www.robinwieruch.de/react-function-component#react-function-component-example) +* [ ] 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 what Virtual DOM is and how React uses it to render components. [:books:](https://www.youtube.com/watch?v=RquK3TImY9U) -* [ ] You know how to use element events and how to incorporate them in React lifecycle [:books:](https://stackoverflow.com/questions/29303456/reactjs-onclick-change-element/29304703#29304703) -* [ ] You know component's lifecycle and know how to use each of the phases. [:books:](https://www.youtube.com/watch?v=m_mtV4YaI8c) -* [ ] 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 prevent components from re-rendering. [:books:](https://hackernoon.com/redux-saga-tutorial-for-beginners-and-dog-lovers-aa69a17db645) -* [ ] You know how to reconcile global state with local component's state -* [ ] You know how and when to use portals. [:books:](https://blog.logrocket.com/learn-react-portals-by-example/) +* [ ] 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://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://react.dev/reference/react-dom/createPortal) [Hooks](/Technical%20Stack/Mobile%20Developer/React.md#hooks) ------------------------------------------------------------- -* [ ] You can use useState and useEffect hooks. [:books:](https://www.valentinog.com/blog/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 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://blog.logrocket.com/learn-react-portals-by-example/) -* [ ] 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) ----------------------------------------------------------------------- ### [downshift](/Technical%20Stack/Mobile%20Developer/React.md#downshift) -* [ ] You used it in a project [:books:](https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=%2Fsrc%2Fordered-examples%2F01-basic-autocomplete.js&moduleview=1) +* [ ] You used it in a project [:books:](https://github.com/downshift-js/downshift) ### [react-day-picker](/Technical%20Stack/Mobile%20Developer/React.md#react-day-picker) * [ ] You used it in a project +### [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) + +### [react-dropzone](/Technical%20Stack/Mobile%20Developer/React.md#react-dropzone) + +* [ ] You used it in a project [:books:](https://react-dropzone.js.org/) + * * * Contribution @@ -74,4 +76,4 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.