/react-reads

Recommended tools, curated articles to learn more about react-ecosystem and some common implementation logics in react,ts,next.

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:

Patterns:

Redux, ReduxToolkit:

Routing:

Organization/Architecture: