Environment Variables in React JS 🎯

Welcome back to CodeYourCraft! Today, we're diving into a crucial topic for any React JS developer: Environment Variables.

Environment variables are used to store sensitive data like API keys, database credentials, and other configuration settings. They help in keeping such data secure by preventing hard-coding these secrets in the application code.

What are Environment Variables? 📝

Environment variables are key-value pairs that store configuration data. These variables are accessible from the application, but not directly hard-coded in the source code.

Why use Environment Variables? 💡

Security: Keeping sensitive data out of the source code reduces the risk of data breaches.
Portability: Environment variables make it easy to switch between development, testing, and production environments.
Collaboration: Multiple developers can work on the same project without worrying about conflicting configuration settings.

Creating Environment Variables 🎯

You can create environment variables on your system using the command line or operating system settings.

On macOS and Linux: Use the export command

bash

export REACT_APP_API_KEY=your_api_key

On Windows: Use the set command

bash

set REACT_APP_API_KEY=your_api_key

Accessing Environment Variables in React JS 🎯

React JS provides a way to access environment variables using the process.env object.

Accessing environment variables in a functional component 📝

jsx

import React from 'react';

function MyComponent() {
  const apiKey = process.env.REACT_APP_API_KEY;

  return (
    <div>
      {apiKey}
    </div>
  );
}

export default MyComponent;

Accessing environment variables in a class component 📝

jsx

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    const apiKey = process.env.REACT_APP_API_KEY;
    console.log(apiKey);
  }

  render() {
    return (
      <div>
        {/* Your component */}
      </div>
    );
  }
}

export default MyComponent;

💡 Pro Tip: Prefix environment variables with REACT_APP_ to make them accessible in the application.

Wrapping Up 📝

Environment variables are an essential part of building secure and maintainable React JS applications. They help keep sensitive data secure, make the application portable, and enable easier collaboration among developers.

Now, let's put your knowledge to the test!