react-reads

react-reads copied to clipboard

Before Learning React:

• [ ] Fundamentals of javascript

• [ ] ES6 Modules

• [ ] let, const (immutable vs mutable)

• [ ] import

• [ ] Function expressions and Arrow Function

• [ ] Array methods like map, filter, reduce and more

• [ ] Asynchronous Javascript

• [ ] Destructuring Assignment

• [ ] Better if you know git for version control

• [ ] Package Manager (Npm, Yarn)

• [ ] Spread/Rest Operator

• [ ] Callback functions

Frequently Used Tools:

• [ ] React Core Concepts (Hooks, Lifecycle of React Components, State Management in React)

• [ ] Managing global state with (Redux Toolkit/Mobx/zustand/reselect/thunk) + redux-persist

• [ ] React Hookform/ formik for creating and managing complex forms

• [ ] Yup for form validation

• [ ] React-Router

• [ ] Next.js/Gatsby/Blitz.js

• [ ] Image Optimization

• [ ] Axios, Advanced usage of axios MUST READ

• [ ] Lazy Loading + Suspense. Resource

• [ ] Authentication methods, Social Authentication

• [ ] Role-based access restriction (both content, route)

• [ ] Organizing files/codes (Clean code in react, clean architecture in react, react/frontend project architecture)

• [ ] Use of PropTypes, lodash, moment, datefns, querparser, leaflet, chart.js, immer

• [ ] React-Query, React-Table, React-Location

• [ ] Styled Components/Emotion

• [ ] Higher order components (HOC)

• [ ] Custom hooks, some third party custom hooks (check https://usehooks.com/)

• [ ] React Helmet, Storybook, React-Select, react-loadable, loadable-components, react-slick, react-dropzone

• [ ] React-spring, framer-motion, using lottiefiles with react

Plus points:

• [ ] Typescript
• [ ] Graphql
• [ ] Third party tools integration (payment gateway, logging tools, analytics etc)

Articles:

Plain React:

• React hooks : the complete guide. https://javascript.plainenglish.io/react-hooks-the-complete-guide-5c176ca825f6
• React Role Based Authorization. https://jasonwatmore.com/post/2019/02/01/react-role-based-authorization-tutorial-with-example
• Learn controlled/uncontrolled components
• (GH Issue) Where is the correct place to put interceptors in React app

Patterns:

• Adapter pattern - create a component

Redux, ReduxToolkit:

• By Erikson https://blog.isquaredsoftware.com/2020/12/presentations-react-redux-ts-intro/
• Learnwithjason: https://www.learnwithjason.dev/let-s-learn-modern-redux
• Tania Rascia: https://www.taniarascia.com/redux-react-guide/
• Matt Button: https://www.mattbutton.com/redux-made-easy-with-redux-toolkit-and-typescript/
• ReactCasts YT: https://www.youtube.com/watch?v=T-qtHI1qHIg&ab_channel=ReactCasts
• Book by Manning: https://www.manning.com/books/redux-in-action
• Book by Leanpub: https://leanpub.com/redux-book
• UI.dev: https://ui.dev/redux/
• WES BOSS: https://learnredux.com/

Routing:

• Must Know Concepts of React Router: https://blog.bitsrc.io/must-know-concepts-of-react-router-fb9c8cc3c12
• Hookrouter: https://blog.logrocket.com/how-react-hooks-can-replace-react-router/
• Cleaner & Moduler Routing: https://medium.com/software-insight/cleaner-and-modular-routing-in-react-92a6fcc97893

Organization/Architecture:

• Presentational and Container Components: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.4rmjqneiw