Advanced Front-End Development: Building Scalable and High-Performance Web Applications with React

Description

Table of Contents About the Author About the Technical Reviewers Introduction Chapter 1: Introduction to React What Is React? A Brief History of React Why Use React? Component-Based Architecture Benefits of Component-Based Architecture Complex Applications Made Simple Virtual DOM for Performance What Is the DOM? What Is Virtual DOM? Benefits of the Virtual DOM Visualizing the Process Declarative Syntax Declarative vs. Imperative Why Declarative Syntax Is Important React Hooks Why Are Hooks Important? Core Concepts of React Hooks Custom Hooks React vs. Other Frameworks The Structure of a React Application What You’ll Learn in This Book Summary Chapter 2: Setting Up Your Development Environment Installing Node.js and npm Download and Install Node.js Verify Installation Updating Node.js and npm Creating a React App with create-react-app Create Your First React App What create-react-app Does Understanding the Project Structure Run the Development Server Stopping the Server Alternative Setup with Vite Install Vite and Create a Project Run the Vite Development Server Comparison Between Vite and create-react-app Essential Tools for React Development Visual Studio Code (VS Code) Recommended Extensions for React Development Setting Up Git for Version Control Download and Install Git Initial Git Configuration Initialize a Git Repository Basic Git Workflow Summary Chapter 3: Components, Props, and State Introduction to Components Types of Components in React Functional Components Class Components Props: Passing Data to Components State: Managing Component Data Using State in Functional Components Using State in Class Components Differences Between Props and State Best Practices for Using Props and State Example: Building a Simple User List Application Summary Chapter 4: JSX and Element Rendering Introduction to JSX Basic Rules of JSX Rendering Elements Rendering a Single Element Rendering Multiple Elements React’s Efficient Rendering Embedding JavaScript Expressions in JSX Embedding Variables Conditional Rendering Calling Functions Using Props for Dynamic Rendering Advanced JSX Techniques React Fragments for Grouping Elements Inline Styling in JSX Applying CSS Classes in JSX Using JSX Spread Attributes Conditional Rendering with the Logical AND (&&) Operator Rendering Lists of Elements Example: Building a User Dashboard Application Features Summary Chapter 5: Handling Events and Conditional Rendering Introduction to Event Handling Event Handling in Functional Components Event Handling in Class Components Passing Parameters to Event Handlers Why Use Arrow Functions for Passing Parameters? Passing Multiple Parameters Conditional Rendering Using if Statements Using the Ternary Operator Using the Logical && Operator Creating Reusable Functions for Component Behavior Example: Building an Interactive Login Form Summary Chapter 6: Lists and Keys Introduction to Lists in React Rendering Lists in React Rendering Objects with Lists Understanding Keys in React Dynamic Lists: Adding, Removing, and Updating Items Nested Lists and Complex Data Structures Recursive Rendering for Deeply Nested Structures Best Practices for Managing Lists and Keys Advanced Techniques: Lazy Rendering and Virtualized Lists Lazy Loading in React Virtualization of Large Lists When to Use Lazy Loading and Virtualization Example: Product List with Add-to-Cart Functionality Summary Chapter 7: Thinking in Components Understanding Components Why Adopt a Component-Based Approach? Steps to Think in Components Types of Components Functional Components Class Components Reusability and Composition Best Practices for Component Design Example: Designing a Shopping Cart Page Header Component Product Component ProductList Component CartSummary Component Composing the Page Common Challenges When Thinking in Components Summary Chapter 8: Styling Your Application Importance of Styling in React Applications Adding Styles Using Traditional CSS Pros of Using Traditional CSS Cons of Using Traditional CSS Inline Styling in React Pros of Inline Styling Cons of Inline Styling CSS Modules How CSS Modules Work Pros of CSS Modules Cons of CSS Modules CSS-in-JS Libraries Dynamic Styling Theming Support Using Preprocessors (SCSS/SASS) Features of SCSS/SASS How to Use SCSS/SASS in React Styling with Frameworks (Bootstrap, Tailwind) Responsive Design Techniques Best Practices for Styling Summary Chapter 9: Lifecycle Methods and Hooks Understanding the Component Lifecycle Lifecycle Methods in Class Components Mounting Phase Updating Phase Unmounting Phase Hooks for Functional Components Using useEffect for Side Effects Managing State with useState Advanced Hooks for Lifecycle Scenarios Example: A Timer Component with Cleanup Common Challenges and Solutions Best Practices for Lifecycle Management Summary Chapter 10: Managing State with Context and Redux Understanding State Management in React React Context API Introduction to Redux Toolkit Core Features of Redux Toolkit Connecting Redux Toolkit with React Components Comparing Context API and Redux Toolkit Best Practices for State Management Example: Building a Shopping Cart with Redux Toolkit Step 1: Define the Cart Slice Step 2: Configure the Store Step 3: Provide the Store to the Application Step 4: Build the Shopping Cart Component Summary Chapter 11: Form Handling and Validation Controlled vs. Uncontrolled Components Controlled Components Uncontrolled Components Handling User Input OnChange Event OnSubmit Event Combined Event Event Object Form Validation Client-Side Validation Real-Time Validation Using Third-Party Libraries Formik React Hook Form Example: Checkout Form Summary Chapter 12: Routing and Navigation Understanding Routing in SPAs How SPAs Handle Routing Setting Up React Router Core Concepts of React Router Route Matching Navigating Between Pages Nested Routes Protected Routes Lazy Loading Routes Error Handling Example: Simple Blog Navigation with React Router Page Implementations Summary Chapter 13: Optimizing Performance Understanding React’s Rendering Behavior Symptoms of Bottlenecks Tools for Identifying Bottlenecks Preventing Unnecessary Re-renders React.memo useCallback and useMemo Code Splitting and Lazy Loading Optimizing State Management Avoiding Deeply Nested State Using Selectors in Redux Optimizing Large Lists Virtualization Optimizing Images and Media Lazy Loading Images Responsive Images Network Performance Caching with React Query Prefetching Data Summary Chapter 14: Testing Your Application Why Testing Matters The Testing Pyramid Setting Up a Testing Environment Configuring Jest Configuring React Testing Library Configuring Cypress Unit Testing Integration Testing End-to-End Testing Snapshot Testing How Snapshot Testing Works Mocking and Stubbing Mocking API Calls Summary Chapter 15: Security Best Practices Common Security Risks in React Applications Cross-Site Scripting (XSS) Cross-Site Request Forgery (CSRF) Sensitive Data Exposure Insecure API Endpoints Securing React Components Sanitizing User Inputs Escaping Output Authentication and Authorization Secure Authentication Role-Based Access Control (RBAC) Securing API Requests Using HTTPS Securing Tokens Preventing CSRF Attacks Example: CSRF Token Implementation Data Protection Encryption Masking Sensitive Information Dependency Management Secure Deployment Security Testing Static Analysis Tools Penetration Testing Conducting Penetration Testing Summary Chapter 16: Accessibility and Internationalization Introduction to Accessibility and Internationalization Implementing Accessibility in React Testing for Accessibility Writing Automated Tests for Accessibility Internationalization (i18n) in React Setting Up react-i18next Summary Chapter 17: Deployment and Continuous Integration Preparing Your React App for Deployment Optimizing for Production Setting Up Environment Variables Creating a Build Deployment Platforms Popular Deployment Platforms Deploying to Netlify Deploying to Vercel Continuous Integration and Deployment (CI/CD) What Is CI/CD? Setting Up CI/CD with GitHub Actions Automating Tests and Builds Monitoring and Error Tracking in Production Setting Up Sentry for Error Tracking Summary Chapter 18: Integrating Third-Party Services and APIs Introduction to Third-Party Services Why Use Third-Party Services? Examples of Popular Services Working with REST APIs Fetching Data with fetch Using Axios for Fetching Data Handling API Errors Gracefully GraphQL Integration What Is GraphQL? Payment Gateway Integration Integrating Firebase with React Summary Chapter 19: Advanced Component Patterns Higher-Order Components (HOCs) Use Cases and Limitations Render Props Comparing Render Props with HOCs Compound Components Controlled and Uncontrolled Components Custom Hooks Summary Chapter 20: Building a Real-World Retail Store App Setting Up the Project Folder Structure Why This Structure? Adding Mock Data Creating the Mock Data File Organizing Product Images How Mock Data Fits into the App Building Core Pages and Components Product Page (Home) Product Card Product Details Page State Management with Redux Setting Up Redux 1. Creating the Store 2. Creating the Retail Slice 3. Connecting Redux to the App Checkout with Stripe 1. Installing Stripe Dependencies 2. Cart Page 3. Creating the Checkout Page 4. Creating the Checkout Form Routing Adding Routes Deployment 1. Building the App Build the App 2. Deploying to Netlify Step 1: Sign Up/Log In to Netlify Step 2: Create a New Site Step 3: Manual Deployment Step 4: Configure the Domain (Optional) 3. Testing the Deployed App Summary Index