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:
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