Mastering React and Node.js Firebase Authentication [2026]

# Lecture 1.2: Setting Up a Node.js Development Environment

## Overview

Setting up a proper development environment is crucial for efficient Node.js programming. This lecture will guide you through the process of installing Node.js and essential tools for development.

## 1. Installing Node.js

### Method 1: Direct Download

- Visit the official Node.js website (https://nodejs.org)

- Download the LTS (Long Term Support) version for your operating system

- Run the installer and follow the prompts

### Method 2: Using a Version Manager (Recommended)

- For Windows: Use nvm-windows

- For macOS/Linux: Use nvm (Node Version Manager)

Benefits of using a version manager:

- Easily switch between Node.js versions

- Install and manage multiple versions

## 2. Verifying the Installation

Open a terminal/command prompt and type:

```

node --version

npm --version

```

These commands should display the installed versions of Node.js and npm.

## 3. Integrated Development Environment (IDE)

Popular choices:

- Visual Studio Code (recommended)

- WebStorm

- Atom

For this course, we'll use Visual Studio Code:

1. Download from https://code.visualstudio.com/

2. Install useful extensions:

   - ESLint (for linting)

   - Prettier (for code formatting)

   - Node.js Modules Intellisense (for autocompletion)

## 4. Setting Up a Basic Node.js Project

1. Create a new directory for your project

2. Open the terminal in this directory

3. Initialize a new Node.js project:

   ```

   npm init -y

   ```

4. This creates a `package.json` file

## 5. Version Control with Git

1. Install Git from https://git-scm.com/

2. Configure Git:

   ```

   git config --global user.name "Your Name"

   git config --global user.email "your.email@example.com"

   ```

3. Initialize a Git repository in your project:

   ```

   git init

   ```

## 6. Essential Global npm Packages

Install these useful packages globally:

```

npm install -g nodemon

npm install -g npm-check-updates

```

- `nodemon`: Automatically restarts the Node.js application when file changes are detected

- `npm-check-updates`: Checks for updates of dependencies

## Conclusion

You now have a basic Node.js development environment set up. This includes:

- Node.js and npm

- An IDE (Visual Studio Code)

- A basic project structure

- Version control with Git

- Essential global npm packages

In the next lecture, we'll write our first Node.js application using this setup.

# Master Git and VS Code: Essential Tools for Modern Web Development

Are you ready to supercharge your web development workflow? Dive into the world of professional coding with our comprehensive course on Git version control and Visual Studio Code setup!

## What You'll Learn:

1. **Git Essentials**: Unleash the power of version control!

   - Install Git like a pro on any operating system

   - Configure Git to work seamlessly with your identity

   - Create and manage GitHub repositories effortlessly

2. **Visual Studio Code Mastery**: Transform your coding environment!

   - Install and set up VS Code for optimal performance

   - Discover must-have extensions that will skyrocket your productivity

   - Customize your IDE to suit your unique coding style

3. **Real-world Application**: Put your skills to the test!

   - Create your first project and push it to GitHub

   - Learn industry-standard practices for code management

   - Collaborate like a seasoned developer using Git and GitHub

## Why This Course?

- **Beginner-Friendly**: No prior experience? No problem! We start from scratch.

- **Hands-On Learning**: Follow along with step-by-step instructions and live demonstrations.

- **Future-Proof Skills**: Master tools used by professional developers worldwide.

- **Quick Wins**: Start applying what you learn immediately to your projects.

## Your Instructor:

Meet [Your Name], a passionate web developer with years of experience in both solo and team projects. With a knack for simplifying complex concepts, [Your Name] will guide you through each step of your journey to becoming a Git and VS Code pro!

## Who Is This Course For?

- Aspiring web developers looking to adopt professional tools

- Self-taught coders ready to level up their workflow

- Students preparing for their first internship or job in tech

- Anyone curious about modern software development practices

Don't let version control and IDE setup intimidate you any longer. Enroll now and take the first step towards a more efficient, collaborative, and professional coding journey!

? Are you ready to revolutionize your coding workflow? Let's Git it started! ?️

# Lecture 3.1: Introduction to React and Firebase Integration

## Overview

Integrating React with Firebase allows you to build powerful, real-time web applications with a robust backend. This lecture introduces the basics of combining these two technologies.

## Key Concepts

1. **React**: A JavaScript library for building user interfaces

   - Component-based architecture

   - Virtual DOM for efficient updates

2. **Firebase**: A comprehensive app development platform by Google

   - Real-time database

   - Authentication services

   - Hosting capabilities

3. **React-Firebase Integration**: Combining React's UI capabilities with Firebase's backend services

## Benefits of Integration

1. Real-time data synchronization

2. Simplified state management

3. Rapid development and prototyping

4. Scalable backend without managing servers

## Basic Integration Steps

1. **Set up a React project**

   - Use Create React App or your preferred method

2. **Add Firebase to your project**

   - Install Firebase SDK: `npm install firebase`

3. **Initialize Firebase in your React app**

   - Create a configuration file

   - Import and initialize Firebase

4. **Use Firebase services in React components**

   - Authentication

   - Database operations

   - Storage interactions

## Example: Basic Firebase Configuration in React

```javascript

// In your config file (e.g., firebase.js)

import { initializeApp } from 'firebase/app';

const firebaseConfig = {

  apiKey: "YOUR_API_KEY",

  authDomain: "YOUR_AUTH_DOMAIN",

  projectId: "YOUR_PROJECT_ID",

  // ... other config options

};

const app = initializeApp(firebaseConfig);

export default app;

```

```javascript

// In your React component

import app from './firebase';

import { getAuth, signInWithPopup, GoogleAuthProvider } from 'firebase/auth';

function LoginComponent() {

  const handleLogin = () => {

    const auth = getAuth(app);

    const provider = new GoogleAuthProvider();

    signInWithPopup(auth, provider)

      .then((result) => {

        // Handle successful login

      })

      .catch((error) => {

        // Handle errors

      });

  };

  return <button onClick={handleLogin}>Login with Google</button>;

}

```

## Best Practices

1. Keep Firebase configuration separate

2. Use environment variables for sensitive information

3. Implement proper error handling

4. Follow React and Firebase security best practices

## Next Steps

- Explore Firebase Authentication in depth

- Learn about Firestore for data storage

- Implement real-time updates in React components

Understanding the basics of React and Firebase integration sets the foundation for building sophisticated, real-time web applications. In the upcoming lectures, we'll dive deeper into specific Firebase features and their implementation in React.

For Lecture 3.2: Setting Up a Firebase Project in your Udemy course, titled Mastering Node.js and React Firebase Authentication, here's a simple and comprehensive structure you can follow:

Lecture 3.2: Setting Up a Firebase Project

Objective:

By the end of this lecture, students will know how to set up a Firebase project and integrate it with their Node.js and React applications.

1. Introduction to Firebase

• What is Firebase?

  • Firebase is a platform developed by Google for building mobile and web applications.

  • It offers backend services like authentication, real-time databases, cloud functions, and more.

• Why use Firebase?

  • It's scalable, real-time, secure, and integrates well with Node.js and React.

  • Ideal for authentication, data storage, and serverless functions.

2. Create a Firebase Project

• Step 1: Sign in to Firebase

  • Go to firebase.google.com and log in with your Google account.

• Step 2: Create a New Project

  • On the Firebase homepage, click on Go to Console.

  • Select Add project.

  • Enter a project name (e.g., my-auth-app).

  • Enable or disable Google Analytics based on your needs.

  • Click Create Project and wait for Firebase to provision the project.

3. Configure Firebase for the Web

• Step 3: Add Firebase to Your Web App

  • In the Firebase console, go to Project Settings.

  • Scroll down to Your apps and click the Web icon (</>).

  • Register your app by giving it a nickname (e.g., ReactApp).

  • Firebase will provide you with a code snippet containing your Firebase configuration.

4. Firebase SDK Setup

• Step 4: Install Firebase SDK in React

  • In your React project, open the terminal and run:

    npm install firebase

• Step 5: Initialize Firebase in React

  • In your project directory, create a file firebase-config.js:

    // firebase-config.js

    import { initializeApp } from "firebase/app";

    
    

    const firebaseConfig = {

      apiKey: "your-api-key",

      authDomain: "your-auth-domain",

      projectId: "your-project-id",

      storageBucket: "your-storage-bucket",

      messagingSenderId: "your-messaging-sender-id",

      appId: "your-app-id"

    };

    
    

    // Initialize Firebase

    const firebaseApp = initializeApp(firebaseConfig);

    
    

    export default firebaseApp;

5. Integrating Firebase with Node.js

• Step 6: Install Firebase Admin SDK in Node.js

  • In your Node.js backend, run:

    npm install firebase-admin

• Step 7: Initialize Firebase in Node.js

  • Create a firebase-admin.js file:

    // firebase-admin.js

    const admin = require('firebase-admin');

    const serviceAccount = require('./path-to-service-account-key.json');

    
    

    admin.initializeApp({

      credential: admin.credential.cert(serviceAccount),

      databaseURL: 'https://your-project-id.firebaseio.com'

    });

    
    

    module.exports = admin;

• Step 8: Get Firebase Service Account Key

  • In the Firebase console, go to Project Settings -> Service Accounts.

  • Click Generate New Private Key to download the JSON file, and place it in your backend project.

6. Testing Your Setup

• Test Firebase Authentication

  • You can now start implementing Firebase authentication methods like Google Sign-In, Email/Password, etc.

• Deploying Your Firebase Project (Optional)

  • Learn how to deploy Firebase hosting if you're planning to host your frontend on Firebase.

Conclusion:

You've successfully set up a Firebase project, integrated it with both a React frontend and a Node.js backend. This forms the foundation for authentication, database management, and more advanced Firebase features that will be covered in future lectures.

This lecture covers setting up Firebase in a simple and comprehensive way, providing both a practical walkthrough and a deeper understanding of Firebase’s role in full-stack applications.

# Complete Guide to Setting Up Firebase Authentication

Firebase Authentication provides a robust and secure system for managing user access to your application. This guide will walk you through the process of setting up various authentication methods in your Firebase project, including email/password, phone number, and third-party providers like Google and Facebook.

## Prerequisites

- A Firebase project created in the Firebase Console

- Basic familiarity with the Firebase Console interface

## Step 1: Access the Authentication Section

1. Log in to your [Firebase Console](https://console.firebase.google.com/).

2. Select your project.

3. In the left-side menu, locate and click the "Build" button.

4. From the expanded options, choose "Authentication".

## Step 2: Get Started with Authentication

If you haven't set up authentication before, you'll see a landing page with a brief overview of Firebase Authentication.

1. Look for the "Get Started" button below the explanation.

2. Click "Get Started" to begin the authentication setup process.

## Step 3: Choose and Enable Sign-in Providers

You'll now see a list of available sign-in providers. Firebase offers a wide range of options to suit various application needs. Let's go through setting up some common providers:

### Email/Password Authentication

1. Click on the "Email/Password" sign-in option.

2. Toggle the switch to enable this provider.

3. (Optional) Enable the "Email link" option for passwordless sign-in.

4. Click "Save" to confirm your changes.

### Phone Number Authentication

1. Click "Add new provider" at the top of the provider list.

2. Select "Phone" from the options.

3. Enable the phone number sign-in provider by toggling the switch.

4. Click "Save" to confirm.

### Google Authentication

1. Click "Add new provider" again.

2. Select "Google" from the list.

3. Enable the Google authentication provider.

4. Enter your project's public-facing name.

5. Select a support email address from the dropdown.

6. Click "Save" to finalize the setup.

### Facebook Authentication (Optional)

Setting up Facebook authentication requires some additional steps:

1. Click "Add new provider" and select "Facebook".

2. You'll need to create a Facebook Developer account and app if you haven't already.

3. Once your Facebook app is set up, enter the App ID and App Secret in the Firebase Console.

4. Note the "OAuth redirect URI" provided by Firebase - you'll need to add this to your Facebook app settings.

5. Click "Save" to complete the Facebook authentication setup in Firebase.

## Step 4: Additional Configuration for Third-Party Providers

For third-party providers like Facebook, Microsoft, GitHub, and Yahoo, you'll need to perform additional configuration steps on their respective platforms:

1. Create developer accounts on the platforms you want to use.

2. Set up your application in their developer consoles.

3. Configure the OAuth redirect URIs provided by Firebase in your app settings on these platforms.

4. Obtain the necessary credentials (like App ID and App Secret) to enter in the Firebase Console.

## Step 5: Verify Your Setup

After enabling your chosen providers:

1. Return to the "Sign-in method" tab in the Firebase Authentication section.

2. You should see all the providers you've enabled listed as "Enabled".

3. If any provider shows as "Not enabled" or has a warning icon, revisit its setup to ensure all steps were completed correctly.

## Next Steps

Now that you've set up authentication in your Firebase project, you're ready to implement these methods in your application. Here are some next steps to consider:

1. Implement the Firebase Authentication SDK in your app.

2. Create sign-up and sign-in flows using the enabled providers.

3. Set up security rules in Firebase to protect your data based on user authentication.

4. Consider implementing features like email verification or account linking.

## Conclusion

Setting up Firebase Authentication is a crucial step in creating secure, user-friendly applications. By following this guide, you've laid the groundwork for robust user management in your Firebase project. Remember to regularly review and update your authentication settings to ensure ongoing security and compatibility with third-party providers.

Happy coding, and enjoy building with Firebase!

# Setting up GitHub Authentication for Firebase

## Introduction

In this tutorial, we'll walk through the process of setting up GitHub authentication for your Firebase project. This will allow users to sign in to your application using their GitHub accounts.

## Step 1: Accessing GitHub Developer Settings

1. Log in to your GitHub account

2. Click on your profile image in the top right corner

3. Select "Settings" from the dropdown menu

4. Scroll down and click on "Developer settings" in the left sidebar

## Step 2: Creating a New OAuth App

1. In Developer settings, click on "OAuth Apps"

2. Click the "New OAuth App" button

3. Fill out the application form:

   - Enter an Application name

   - Provide your Homepage URL (use localhost if developing locally)

   - Add a Description (optional)

   - For the Authorization callback URL, we'll get this from Firebase

## Step 3: Firebase Configuration

1. Open your Firebase Console and select your project

2. Go to Authentication > Sign-in method

3. Enable GitHub as a sign-in provider

4. You'll see a callback URL - copy this

## Step 4: Completing GitHub OAuth App Setup

1. Paste the Firebase callback URL into the "Authorization callback URL" field in GitHub

2. Click "Register application"

3. You'll now see your Client ID

4. Click "Generate a new client secret" to get your Client Secret

## Step 5: Finalizing Firebase Setup

1. Return to your Firebase Console

2. In the GitHub provider settings, enter the Client ID and Client Secret from GitHub

3. Save the configuration

## Conclusion

You've now successfully set up GitHub authentication for your Firebase project. Users can sign in using their GitHub accounts, enhancing the authentication options for your application.

 # Setting up Microsoft Authentication with Firebase

## 1. Log in to Microsoft Azure

• 1. Go to the Microsoft Azure portal.

• 2. Enter your email and password to log in.

## 2. Navigate to App Registration

1. On the landing page, scroll down to find Azure services.

2. Look for "App registration" in the list.

   - If you can't find it, click "More services" and use the filter to search for "App registration".

3. Click on "App registration" to open the page.

## 3. Create a New Application

1. At the top of the App registration page, click "New registration".

2. You'll see a "Register an application" page.

3. Enter an application name (e.g., "ReactJsAuth").

4. Under "Supported account types", select the third option: "Accounts in any organizational directory".

5. For the redirect URI:

   - Select "Web" as the platform.

   - We'll get the actual URL from Firebase in the next steps.

## 4. Set Up Firebase

1. Open the Firebase Console and select your project.

2. Go to Authentication > Sign-in methods.

3. Click "Add new provider" and choose Microsoft.

4. In the popup window, enable the Microsoft sign-in method.

5. You'll see fields for Application ID and Application Secret (we'll fill these later).

6. Copy the redirect URL provided by Firebase.

## 5. Complete Microsoft Application Setup

1. Switch back to the Microsoft Azure portal.

2. Paste the Firebase redirect URL into the redirect URI field.

3. Click the "Register" button to complete the application process.

## 6. Get Application ID and Secret

1. Once registration is complete, you'll see the Application ID. Copy this.

2. To generate the Application Secret:

   - Click "Manage", then "Certificates & secrets".

   - Click "New client secret".

   - Add a description (e.g., "reactjsSecret").

   - Choose an expiry period (e.g., 90 days for testing).

   - Click "Add".

3. Copy the generated secret value (not the secret ID).

## 7. Configure Firebase

1. Return to the Firebase Authentication settings.

2. Paste the Application ID and Secret into the respective fields.

3. Click "Save" to complete the Microsoft sign-in method configuration.

## Important Note

When copying the Application Secret, make sure to use the secret value, not the secret ID. Using the wrong value will prevent the Microsoft sign-in method from working correctly.

Congratulations! You've now successfully integrated Microsoft authentication with Firebase.

# Setting Up Google Firebase Authentication with Yahoo Sign-In

In this comprehensive lecture, we guide you through the process of integrating Yahoo sign-in with Google Firebase authentication. This step-by-step tutorial covers everything you need to know to implement this feature in your web application.

## What You'll Learn:

1. Accessing and navigating the Yahoo developer dashboard

2. Creating a new app in the Yahoo developer console

3. Configuring OAuth settings for your Yahoo app

4. Setting up Firebase Authentication for Yahoo sign-in

5. Linking Yahoo and Firebase configurations

## Key Steps Covered:

• - Logging into your Yahoo developer account

• - Navigating the Yahoo developer dashboard

• - Creating a new app in the Yahoo developer console

• - Configuring app details and OAuth settings

• - Setting up Firebase Authentication for Yahoo sign-in

• - Obtaining and using the Firebase redirect URL

• - Configuring API permissions for OpenID Connect

• - Retrieving and using the Yahoo Client ID and Client Secret

• - Finalizing the Firebase configuration for Yahoo authentication

This lecture is perfect for developers looking to expand their authentication options and provide users with the ability to sign in using their Yahoo accounts. By the end of this tutorial, you'll have a fully functional Yahoo sign-in integration with Firebase authentication.

Whether you're a beginner or an experienced developer, this lecture offers valuable insights into working with third-party authentication providers and Firebase. Join us to enhance your web application's user authentication capabilities!

Welcome to this section of our Udemy course. In the previous section, we set up a Node.js server for our project. Now, we're going to discuss our project's folder structure.

We'll be using a standard folder structure, and I'll show you how to create these folders efficiently using the command prompt. The command we'll use is "mkdir" (make directory) followed by the folder names.

mkdir config controllers firebase middlewares models routes

Here are the folders we'll create:

1. "config": This will store our configuration files, including Firebase admin-side configuration.

2. "controller": For handling user authentication.

3. "Firebase": To connect with our configuration.

4. "middleware": For route protection and verification.

5. "models": Where we'll create our user and login models.

6. "routes": For defining our API routes.

I'll demonstrate how to create these folders using a single command line. Don't worry if you prefer creating folders manually - you can always do so by right-clicking in your project directory.

Let's break down the purpose of each folder:

• The "config" folder will store our Firebase configuration, including private key concepts. We'll delve deeper into admin Firebase key generation in a future lecture.

• Our "controller" folder will handle the authentication logic for users.

• The "Firebase" folder will help us connect our configuration with Firebase.

• "Middleware" is crucial for protection. We'll use it to verify if a router is genuine, check user authentication, and validate tokens.

• In the "models" folder, we'll create our user model and user login model.

This folder structure will set us up for success as we move forward with our project.

In the next lecture, we'll install some essential npm packages for our further development. These packages are vital for creating our API, so make sure not to miss it!

The command for creating these folders will be provided in the course resources. Feel free to use it to save time, or create the folders manually if you prefer.

Thank you for your attention, and I'll see you in the next lecture where we'll dive into npm packages!

I'll show you how to create a standard React project using Create React App (CRA), which is the traditional way:

# Create a new React project

npx create-react-app firebase-auth-project

# Move into the project directory

cd firebase-auth-project

t # Start the development server

npm start

After running these commands, you'll have a complete React project with this structure:

my-project/

│

├── node_modules/

├── public/

│ ├── index.html

│ ├── favicon.ico

│ └── manifest.json

│

├── src/

│ ├── App.js

│ ├── App.css

│ ├── index.js

│ ├── index.css

│ ├── App.test.js

│ ├── setupTests.js

│ └── reportWebVitals.js

│ ├── package.json

└── README.md

The key files are:

• src/App.js: Your main React component

• src/index.js: The entry point of your application

• public/index.html: The HTML template

You can start developing by editing App.js. The development server will automatically reload when you make changes.

Common commands:

npm start # Starts development server

npm test # Runs tests

npm run build # Creates production build

npm run eject # Ejects from Create React App

Certainly, I can provide a voice script to explain the React.js folder structure that you have shown in the image. Here's a detailed explanation:

"In this React.js project, we can see the folder structure laid out in the 'Explorer' panel on the left-hand side of the screen. Let's go through the different folders and files and understand their purpose:

The top-level folder is 'sample_react_js', which is the main workspace for this project. Inside this folder, we have several sub-folders:

'build' - This folder is likely where the production-ready, optimized version of the application is generated when you run the 'npm run build' command.

'node_modules' - This folder contains all the dependencies and third-party libraries that your project relies on. These are installed via the 'npm install' command.

'public' - This folder contains the main HTML file, typically named 'index.html', which serves as the entry point for your React application. It also houses any static assets, like images or fonts, that your app might use.

'src' - This is the heart of your React project. It contains all the source code files, including components, pages, configurations, and utilities. Let's dive deeper into the 'src' folder:

'assets' - This folder is where you'd store any static assets, like images, icons, or SVGs, that your components need.

'components' - This is where you would keep your reusable React components, like a header, footer, or a specific UI element.

'config' - This folder is typically used to store configuration files, such as API endpoints or environment-specific settings.

'constants' - Any constant values or utility functions that are used across your application would be placed here.

'hooks' - If you're using custom React hooks, you'd put them in this folder.

'pages' - This is where you would keep the main pages or views of your application, like the home page, about page, or dashboard.

'redux' - If you're using the Redux state management library, this is where you'd put your Redux-related code, such as actions, reducers, and store configuration.

'routes' - This folder contains the routing configuration for your application, mapping URLs to specific components.

'services' - Any API or data-fetching logic would be placed in this folder.

'store' - If you're using a state management solution like Redux or MobX, the store configuration would be located here.

'types' - This is where you'd put any TypeScript type definitions or interface declarations.

'utils' - Utility functions or helper modules that are used across your application would be placed in this folder.

The other files in the root directory, such as 'App.css', 'App.js', 'index.css', and 'index.js', are the main entry points and configuration files for your React application.

This folder structure is a common and recommended way to organize a React.js project, as it helps to keep your codebase clean, maintainable, and scalable as your application grows in complexity."

React and Related Packages

copy this code into VS code and install

npm install @reduxjs/toolkit axios bootstrap react react-bootstrap react-dom react-icons react-paginate react-redux react-toastify redux-persist react-scripts react-router-dom

1. @reduxjs/toolkit

• Official, opinionated toolset for efficient Redux development

• Includes utilities to simplify common Redux use cases

• Features: configureStore(), createReducer(), createAction(), createSlice()

• Helps reduce boilerplate code in Redux applications

2. Axios

• Promise-based HTTP client for browser and Node.js

• Features:

  • Make XMLHttpRequests from the browser

  • Make HTTP requests from Node.js

  • Supports the Promise API

  • Intercept request and response

  • Transform request and response data

3. Bootstrap & React-Bootstrap

• Bootstrap: Popular CSS framework for responsive, mobile-first front-end development

• React-Bootstrap:

  • React components that implement Bootstrap's design

  • No dependency on Bootstrap's JavaScript or jQuery

  • Fully accessible components following WAI-ARIA standards

4. React & React-DOM

• React: JavaScript library for building user interfaces

  • Component-based architecture

  • Virtual DOM for efficient updates

• React-DOM:

  • Package for DOM-specific methods

  • Renders React components to the DOM

5. React-Icons

• Library that includes popular icon packs as React components

• Supports icons from:

  • Font Awesome

  • Material Design

  • Ionicons

  • And many more

• Easy to use: import { FaBeer } from 'react-icons/fa'

6. React-Paginate

• Component for adding pagination to React applications

• Customizable appearance and behavior

• Handles page numbers, previous/next buttons

• Useful for displaying large sets of data

7. React-Redux

• Official React bindings for Redux

• Allows React components to read data from a Redux store and dispatch actions

• Key features:

  • <Provider> component for making store available

  • useSelector() hook for accessing state

  • useDispatch() hook for dispatching actions

8. React-Toastify

• Library for adding toast notifications to React apps

• Easy to use and highly customizable

• Features:

  • Multiple toast types (success, error, info, etc.)

  • Custom positioning

  • Progress bar

  • Callbacks and promises

9. Redux-Persist

• Library for saving and rehydrating Redux stores

• Persists state to storage (e.g., localStorage) and rehydrates on app startup

• Customizable storage engines and data transformations

• Useful for maintaining app state across sessions

10. React-Scripts

• Set of scripts and configuration used by Create React App

• Includes:

  • Development server with hot reloading

  • Build script for production

  • Test runner

• Abstracts away complex webpack and Babel configurations

11. React-Router-DOM

• Declarative routing for React applications

• Allows navigation without refreshing the page

• Key features:

  • <BrowserRouter> for client-side routing

  • <Route> for defining routes

  • <Link> for navigation

  • Hooks like useParams() and useNavigate()

Thank You!

Any questions?