Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Frontend Developer/React.md #59

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 14 additions & 22 deletions Technical Stack/Frontend Developer/React.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 <code>useState</code> and <code>useEffect</code> 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 <code>useState</code> and <code>useEffect</code> 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 <code>useCallback</code> hook. [:books:](https://kentcdodds.com/blog/usememo-and-usecallback/)
* [ ] You know how to use <code>react-hook</code> form [:books:](https://www.react-hook-form.com/get-started/)
* [ ] You are familliar with <code>react-infinite-scroll-hook</code> [:books:](https://www.npmjs.com/package/react-infinite-scroll-hook/)
* [ ] You know how to use <code>react-hook</code> form [:books:](https://www.react-hook-form.com/get-started/)
* [ ] You are familiar with <code>react-infinite-scroll-hook</code> [: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)
-----------------------------------------------------------------------

Expand All @@ -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)

Expand Down