❮ Previous

Environment Variables

  • This lesson introduces environment variables in React and explains how to use them for secure and flexible configuration.

  • Environment Variables

    Using .env Files

    Environment variables store sensitive data.

    Example:

REACT_APP_API_URL=https://api.example.com
  • Access in React:

process.env.REACT_APP_API_URL

  • Variables must start with REACT_APP_.

    Securing API Keys

     ❌ Do NOT hardcode API keys
     ❌ Do NOT push .env files to GitHub

    Best Practices:

    • Use .env

    • Add .env to .gitignore

    • Restrict API keys by domain

    Real-World Example Flow

Component Mounts
↓
Show Loading
↓
Fetch API Data
↓
Success → Show Data
↓
Error → Show Message

  • Final Summary 

    • APIs connect frontend with backend

    • Fetch and Axios are used for requests

    • Handle loading and errors properly

    • Display data using map()

    • Environment variables protect secrets

    • Secure API keys is critical

❮ Previous