React Programming: The Big Nerd Ranch Guide

Introduction
    Learning Web Development
    Learning React
    Prerequisites
    How This Book Is Organized
    How to Use This Book
        Typographical conventions
        Using an eBook
    For the More Curious
    Challenges
The Necessary Tools
    Installing Google Chrome
    Installing Visual Studio Code
    Crash Course in the Command Line
        Finding the current directory
        Changing directories
        Creating a directory
        Listing files
        Getting administrator privileges
        Quitting a program
    Installing Node.js
    Resources
    Finding Documentation and Help
1. Create React App
    Create React App
    Running the Development Server
    Navigating Your App
        Project metadata and dependencies
        public directory
        src directory
    Customizing Your App
        Title
        Favicon
    Adding Elements
    Styles
    The Chrome Developer Tools
    Conclusion
    Are You More Curious?
    For the More Curious: npx
    For the More Curious: %PUBLIC_URL%
    Challenges
    Bronze Challenge: Subtitle
    Silver Challenge: Canarygram
2. Components
    App Organization
    Header Component
    JSX
    Post Component
    React Developer Tools
        Why name components?
    Props
    Reusing a Component
        Object destructuring
    Rendering Lists
        Keys
    Conclusion
    For the More Curious: Testing Prop Changes in the DevTools
    Bronze Challenge: Footer
    Silver Challenge: Canarygram Footer
3. User Events
    Adding SelectedItem
    User Events
    Passing Parameters
    Conclusion
    For the More Curious: Alternate file-naming conventions
    For the More Curious: Detaching Event Handlers
    Bronze Challenge: Hello, Goodbye
    Silver Challenge: Canary Alert
4. State
    What Is State?
    useState
    Updating State
    Conclusion
    For the More Curious: Components – Functions vs Classes
    Gold Challenge: Canary Shuffle
5. Linting
    Creating a Project
    Updating the Title and Favicon
    Linting Overview
    Linting Rules
        Installing and configuring Airbnb’s ESLint
    Running ESLint
        Auto-fixing errors
        Overriding ESLint rules
    Installing the ESLint Extension in Visual Studio Code
    Conclusion
    For the More Curious: Shortcuts to Running ESLint in Visual Studio     Code
    For the More Curious: Linting Before Committing
6. Prop Types
    Adding Resources
    Header Component
        Whitespace issues
        Adding the component to App.js
        Styling the header
    Thumbnail Component
    Prop Types
        Installing the prop-types library
    Thumbnail Prop Types
    Rendering Items
    Home Component
    Reusing Prop Types
    Prop Mismatch
    Conclusion
    For the More Curious: Why Pass Items as a     Prop?
    For the More Curious: Inlining Images
    Bronze Challenge: Add a Prop
7. Styles
    Style Scoping
    Responsive Design
    Media Queries
    Hover Effect
        Animating the hover effect
    Conclusion
    For the More Curious: Grid Layout
    For the More Curious: Styled Components
    For the More Curious: Compiled CSS
    Silver Challenge: Custom Effect
8. Interacting with a Server
    Setting Up the Server
        Creating a proxy
            Adding an HTTP request library
    useEffect
    Confirming the Network Request
    Promises
        How promises work
    Conclusion
    For the More Curious: Server Endpoints
    For the More Curious: How to Set Up a Proxy in Production
    For the More Curious: Cross-Origin Resource Sharing (CORS)
    For the More Curious: useEffect vs Lifecycle Methods
    Silver Challenge: Promise Practice
9. Router
    Creating Routes
    Using Link
    Creating the Details Page and Route
        Nesting a route
        Index route
    useParams
    Navigating Home from the Header
    Navigating from Thumbnails to Details
    Conclusion
    Silver Challenge: More Routes
10. Conditional Rendering
    Getting Additional Item Info
    Undefined Items
    if Statements
    Inline Logical Operators
    Fragments
    More Logical Operators
        The && operator
        The || operator
        The ?? operator
    Boolean Type Conversion
    Conclusion
    For the More Curious: Truthy and Falsy Values
    Silver Challenge: Promote Sale Items
11. useReducer
    useReducer vs useState
    Implementing useReducer
    The Reducer Function
    Updating the Quantity
    Displaying Information in the Header
    Adding Items to the Cart
    Action Creators
    Conclusion
12. Editing the Cart
    Creating the Cart Page
        Linking to the cart page
    Viewing the Cart’s Contents
    Displaying the Cart Contents
        Displaying the item title and price
    Removing Items from the Cart
        Passing dispatch as a prop
        Setting up the remove button
    Emptying the Cart
    Displaying the Subtotal
    Conclusion
    Bronze Challenge: Increasing the Quantity
    Silver Challenge: Decreasing the Quantity
13. Forms
    Building the Form
    onSubmit
    Value from Inputs
    Controlled Components
    onChange
    Calculating the Tax
    Calculating the Total
        Displaying the total conditionally
    Formatting Input
    Form Validation
    Conclusion
    Silver Challenge: Coupon Code
    Gold Challenge: Maintaining the Cursor Position in the Phone     Number
    Gold Challenge: Setting the Quantity
14. Local Storage and useRef
    Local Storage
    useRef vs useState
    Using setTimeout with useRef
    Accessing DOM Elements
    Accessibility Considerations
    Conclusion
    Silver Challenge: Returning Focus to the Name Input
15. Submitting Orders
    Submitting a Form
    async/await
        Comparing async/await and then/catch
    Preventing Inadvertent Submissions
    Conclusion
    Bronze Challenge: Reset the Cart State
    Silver Challenge: How Many Orders Are in the Queue?
16. Component Composition
    Alert
    Conditionally Showing an Alert
    Component Composition with Props
    Reusing Alert
    Emptying the Cart
    Conclusion
    Gold Challenge: Closeable Alert
17. Context
    Getting the Logged-In User
    Login Button
    Avoiding Prop Drilling
    Passing currentUser with Context
    useMemo
    useContext
    Login Component
    useNavigate
    Logout Button
    Login Error
    Conclusion
    For the More Curious: Login Cookie
    Silver Challenge: Items Context
18. Fulfilling Orders
    Creating the Orders Component
    Orders Link
    Fetching and Displaying Orders
    Fulfilling Orders
    Restricting Access with a Custom Hook
        Custom hooks
        Adding to the dependency array
    Cleaning Up useEffect
    Getting New Orders
        Proxying a websocket
        Using the websocket
        Closing the websocket
    Conclusion
    Bronze Challenge: Smarter Redirect
    Bronze Challenge: Import a Custom Hook
    Silver Challenge: Loader
    Silver Challenge: Error Display
19. Introduction to App Performance Optimization
    React Profiler
    Memo
    Context Changes
    useCallback
    Expensive Calculations
    Comparing useCallback, useMemo, and memo
    Cleaning Up
    Conclusion
    Silver Challenge: Memoized UserDetails
20. Testing Overview
    Deciding What Tests to Use
        Why are you testing?
        What do you want to know?
        What does the future look like?
    Types of Testing
    Static Testing
    Unit and Integration Testing
        Unit testing for functions
        Integration testing for components
        Testing the full app
        Snapshot testing
    End-to-End Testing
        End-to-end testing with a live back end
        End-to-end testing with a mocked back end
        Which to use?
    Visual or Screenshot Testing
    Conclusion
21. Testing with Jest and the React Testing Library
    Housekeeping
    Unit Testing
    Integration Testing
        Testing Thumbnail
        Testing Home
    Mocking the Server
    Testing the Logged-In User’s Username
    Testing Navigation
        Testing the Add to Cart button
        Testing checkout
        Verifying order submission
    Checkout Error
        Mocking console.error
    Conclusion
    For the More Curious: File Structure for Test Files
    For the More Curious: React Testing Library Queries
    Bronze Challenge: Testing Removing an Item from the     Cart
    Silver Challenge: Additional cartReducer Tests
    Silver Challenge: Testing Phone Number Formatting
    Silver Challenge: Testing Tax Details
    Gold Challenge: Additional Login Tests
22. End-to-End Testing
    Installing and Configuring Cypress
        Configuring scripts
        Setting up ESLint for Cypress
        Importing commands
        Setting the base URL
    Testing the Login Flow
    Testing the Checkout Flow
        Interacting with the server
        Testing errors in the checkout flow
    Testing the Flow to View and Delete Orders
        Clearing the orders
    Factoring Out Custom Commands
    Invisible Elements
    Avoiding Flaky Tests
    Conclusion
    For the More Curious: Cypress Media Files
    For the More Curious: Cypress Network Requests
    Silver Challenge: Testing Phone Number Formatting
    Silver Challenge: Testing Cart Details
    Silver Challenge: Testing Removing an Item from the Cart
    Gold Challenge: Additional Tests
23. Building Your Application
    Manifest
    Building the Application
    Deploying Your Application
    Conclusion
24. Data Loading
    Production Build
    Analysis
    Large Images
    Analyzing JavaScript Files
    Lazy Loading
        Naming the bundles
    Other Considerations
    Conclusion
    Gold Challenge: Lazy Loading
25. Component Speed
    Inspecting Performance
    Transitions
    Storing Rendered Content
    Storing a Rendered Component
    Conclusion
    Gold Challenge: Caching the Filtered Data
26. Afterword
    The Final Challenge
    Shameless Plugs
    Thank You
Index