Beefy App 项目启动与配置教程

一、项目目录结构及介绍

Beefy App 是一个基于区块链的去中心化金融（DeFi）应用。以下是项目的目录结构及其简要介绍：

beefy-app/
├── .github/                # GitHub 相关文件
├── public/                 # 公共静态文件，如图片、字体等
├── src/                    # 源代码目录
│   ├── components/         # 通用组件
│   ├── hooks/              # 自定义钩子
│   ├── pages/              # 页面组件
│   ├── services/           # 后端服务接口
│   ├── store/              # 状态管理
│   ├── styles/             # 样式文件
│   ├── utils/              # 工具函数
│   ├── App.js              # 应用主组件
│   └── index.js            # 应用入口文件
├── .env.local              # 本地环境变量配置
├── .eslintrc.js            # ESLint 配置文件
├── .gitignore              # Git 忽略文件
├── .prettierrc             # Prettier 配置文件
├── package.json            # 项目依赖及配置
├── package-lock.json       # 项目依赖锁定文件
├── README.md               # 项目说明文件
└── yarn.lock               # Yarn 依赖锁定文件

二、项目的启动文件介绍

项目的启动文件位于 src/index.js。以下是启动文件的主要内容：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

该文件负责将 App 组件渲染到页面的 root 元素中，并开启了 React 的严格模式，帮助开发者在开发过程中发现潜在的问题。

三、项目的配置文件介绍

项目的配置主要通过 .env.local 文件进行。以下是配置文件的主要内容：

REACT_APP_API_URL=https://api.example.com # API 请求的基础 URL
REACT_APPChainId=56 # 使用的区块链网络链ID，例如主网为 1，测试网为 97
REACT_APP_WALLET_CONNECT_PROJECT_ID=your_wallet_connect_project_id # WalletConnect 项目 ID

这些环境变量可以在项目中的任何地方通过 process.env 访问，如 process.env.REACT_APP_API_URL。

在开始项目前，确保你已经正确设置了这些环境变量，以匹配你的开发或生产环境需求。