React.js Design Patterns: Learn how to build scalable React apps with ease

Cover Page Title Page Copyright Page Dedication Page About the Author About the Reviewers Acknowledgement Preface Errata Table of Contents 1. React Anti-Patterns and Best Practices Introduction Structure Objectives Bad practices in building a React application Inline CSS Large component Props drilling Do not pass all props Not using the key in the map loop Using the index as a key in the map loop Nested ternary statements Ambiguous naming Do not mutate state directly Do not style HTML tags directly What are the best ways of architecting a react application? Styling Preprocessor (SASS/LESS) File/folder structure Naming conventions Rendering with useMemo and useCallBack Use Prettier Use Linter and its rules Use try…catch Log errors React error boundary Test your code Component name must be in Pascal case Extract reusable logic Benefits of using JavaScript in React application Benefits of using TypeScript in React application Conclusion 2. Writing Components Introduction Structure Objectives Naming conventions Camel case Pascal case Functional component useState useRef useEffect Class component ComponentDidMount ComponentDidUpdate Best way to structure a react component Data sharing between components Props Context API Provider Consumer Redux Store Reducer Actions useReducer Controlled versus uncontrolled components Conclusion 3. Clean and Maintainable Code Introduction Structure Objectives Writing a clean code Business continuity Easy to read and understand Achieving clean and maintainable code Writing maintainable code Design patterns Writing testable codes Checking for errors Log errors for easy bug tracking and fixes Using TypeScript to build applications Conclusion 4. React Hooks Introduction Structure Objectives React hooks useState useReducer useEffect useLayoutEffect useMemo useCallBack useRef useContext Custom hooks Conclusion 5. Styling Introduction Structure Objectives Styling a component Types of styling Inline CSS External CSS Sass Bootstrap Styled components Tailwind CSS Conventions of writing styles BEM Conclusion 6. Server-Side Renderings Introduction Structure Objectives What is Server-Side rendering? When to use server-side rendering? Pros of using Next.js Cons of using Next.js Pre-rendering in Next.js Static generation Static page without data Static page with data GetServerSideProps Next.js versus React.js Maintainability TypeScript support Configuration Server-side rendering Image optimization Server-side rendering with Node.js and Express.js. Conclusion 7. Data Fetching Introduction Structure Objectives Fetching data in React Fetch Axios GraphQL Rest API versus GraphQl Caching data Memoization useMemo useCallBack State management Promises Conclusion 8. Building Scalable Applications Introduction Structure Objectives Conditional rendering Ternary operation Logical operation If else operation Memoization useMemo useCallback TypeScript File organization Separation of concerns Higher order component Solid principles Conclusion 9. Testing Introduction Structure Objectives How to test components? Functional test Rendering test Testing with Jest React testing library Regression test End-to-end test with Cypress Integration test with Jest API mocking with Jest Conclusion Index