واکنش - جاده‌ای به سوی کسب‌وکار

Foreword Acknowledgements About the author Contact Introduction About this book Who is this book for? How to follow this book Code examples Pre-requisites Project Configuration and Useful Extensions Setting up a React project Plugins configuration PostCSS Stylelint Configuring Sass Tailwind Prettier TypeScript Jest, Cypress, and Testing Library Cypress & Testing Library Jest & Testing Library Formatting Code Automatically on Commit What about Vite? VS Code extensions Summary Scalable and Maintainable Project Architecture Managing route components by feature Encapsulating components and business logic Summary API Layer and Managing Async Operations Implementing an API layer Handling API states How to avoid flickering loader Abstracting API states and fetching with the useApi hook Request cancellation Enhancing the API layer to add abort logic Error logging Summary Managing APIs with API Layer and React-Query How to fetch data with React-Query How to update data with React-Query Pagination with React-Query Infinite scroll with React-Query Query cancellation with the API layer and React-Query Cancel Function Abort Signal Summary State Management Patterns in React Apps Sharing state between sibling components by lifting state up Context State Provider How to improve performance and avoid unnecessary re-renders with Context API Wrap JSX inside of the useMemo hook Extract JSX into its own component wrapped with memo Split the Context and use two separate context providers Use the useContextSelector library. Better state handling with useImmer and useReducer hooks Immutable updates with useImmer useReducer Cleaner reducer with useImmerReducer Reducer with Context API Summary Modern Redux - Global State Management with Redux Toolkit Redux of the past Modern Redux with Redux Toolkit (RTK) API Requests with Redux Toolkit API requests with RTK’s createAsyncThunk and API layer Fetching Users Adding and Deleting Users State Normalisation Normalising State with createEntityAdapter Persisting Redux Store with RTK and Redux-Persist Resetting Slices State and Redux Store Resetting Users Slice Resetting Whole Redux Store API management with Redux & RTK Query Integrating RTK Query with API Layer Optimistic Updates Summary Global State Management with Zustand and Jotai Zustand Events Manager with Zustand Computing derived state in selectors Computing derived state with the useMemo hook Computing derived state with the useEffect hook Computing derived state with subscriptions Simplifying selectors with a Pick helper Simplifying Zustand state updates with Immer Simplifying store creation with factory helpers Persisting Zustand store Async operations Zustand with React-Query Jotai Atoms Converting Events Manager to use atoms and how to derive atom state Jotai with Immer Persisting Atom State with atomWithStorage Combining atomWithStorage and Immer Async Requests with Jotai Jotai with React-Query Summary Advanced Component Patterns Higher Order Components Render Props Wrapper components Polymorphic components Composition vs Configuration - how to build flexible, maintainable and reusable components Observer Pattern - communicating between sibling components Summary Managing Application Layouts Route Layouts with React Router Product Grid and List layouts with the useLayout hook Summary Performance Optimisation Code-Splitting and Lazy-Loading routes and components with React.Lazy and React.Suspense How to optimise and prevent re-renders of React components Optimising component re-renders with memo and useCallback Avoiding re-renders with useMemo Reducing the number of re-renders by moving state down (state colocation) Preventing re-renders by lifting components up Optimising long lists by virtualising with React Virtual Throttle and Debounce events to prevent frequent re-renders Throttling mousemove events Debouncing search requests Tree-shaking First example - Lodash Second example - React Icons Third example - UI frameworks Choosing appropriate libraries and tree-shaking What to look at when choosing libraries and do I even need one? Reducing bundle CSS by removing unused CSS Production Build Summary Application Security Validate URLs Rendering HTML Third-party libraries JSON Web Tokens (JWT) Access permissions Restricting access to specific content using the Permission component Restricting access to private routes with the Permission component Summary React Testing - Best Practices For Writing Future-Proof Tests Unit testing React components How to test standalone React hooks API mocking in React Unit Tests End-to-end testing with Cypress Useful testing tips Summary Static Site Generation (SSG), Incremental Site Renegeration (ISR) and Server Side Rendering (SSR) with Next.js (MJ_AD) Next.js Project Setup Pages and Routing in Next.js apps Static Site Generation (SSG) with getStaticProps and getStaticPaths Incremental Site Regeneration (ISR) Server Side Rendering (SSR) with getServerSideProps Running code server-side with API Routes Restricting Access to Specific Pages with Middleware Summary