.envとは

ウェブアプリへの Firebase の追加

.env.sample をsrc下に作成
こういう内容が入ってるよ

.env.sample

REACT_APP_FIREBASE_API_KEY=""
REACT_APP_FIREBASE_AUTH_DOMAIN=""
REACT_APP_FIREBASE_PROJECT_ID=""
REACT_APP_FIREBASE_STORAGE_BUCKET=""
REACT_APP_FIREBASE_MESSAGE_SENDER_ID=""
REACT_APP_FIREBASE_APP_ID=""
REACT_APP_FIREBASE_MEASSUREMENT_ID=""

src/_servicesディレクトリを作成
/firebasse.tsxファイルを作成

firebasse.tsx

import { initializeApp } from 'firebase/app';
import { getAnalytics } from 'firebase/analytics';

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASSUREMENT_ID
};

export const initializeFirebase = () => {
  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
}

src/index.tsxにinitializeFirebaseを追加

+import { initializeFirebase } from './_services/firebase';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

+initializeFirebase();

root.render(

src下に.env.local作成
その中に.env.sampleの実際のパスワードを入力