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