6 环境搭建之文件结构介绍
在上一篇中，我们讨论了如何创建一个新的 React 应用，掌握了使用 create-react-app 工具来快速构建项目的初步流程。这一节，我们将深入探讨 React 应用的文件结构，以及每个目录和文件的作用。这将为我们后续的学习，尤其是理解核心概念如 JSX 语法，提供很好的基础。
React 应用的基础文件结构
创建一个新的 React 应用后，你会发现一个标准的文件结构，如下所示：
1 | my-react-app/ |
主要目录和文件说明
node_modules/:- 这个目录是由包管理工具（如 npm 或 yarn）自动生成的，包含了所有项目依赖的包。通常我们不需要手动修改这个文件夹的内容。
public/:- 里面存放了应用的公共资源，如
index.html文件。在开发中，这是整个应用的起点，React 会将应用的组件渲染到这个文件中。 - 你可以在这里添加其他静态资源，比如图片或其他 HTML 页面。
1
2
3
4
5
6
7
8
9
10
11
12
13<!-- public/index.html -->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>- 里面存放了应用的公共资源，如
src/:- 这个目录是开发的主要工作区，包含了你的 React 组件和应用逻辑。
index.js是应用的入口文件，React 将从这里开始初始化应用并渲染组件。
1
2
3
4
5
6
7
8
9
10
11
12// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);App.js是默认的应用组件，它将是我们第一个展示的组件。
1
2
3
4
5
6
7
8
9
10
11
12
13// src/App.js
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<h1>Welcome to My React App</h1>
</div>
);
}
export default App;.gitignore:- 针对 Git 版本控制，定义了不需要被跟踪的文件和文件夹。常见的包括
node_modules和构建生成的文件。
- 针对 Git 版本控制，定义了不需要被跟踪的文件和文件夹。常见的包括
package.json:- 这个文件记录了项目的各种信息，包括项目名称、版本、依赖包等。它是 npm 管理包的重要依据。
README.md:- 项目说明文件，通常在这里包含关于项目的概述、安装步骤和使用示例等信息，对于其他开发者理解项目非常重要。
yarn.lock:- 当使用 yarn 管理包时，会生成此文件，用于锁定已安装的依赖包的版本，确保团队成员之间的环境一致性。
小结
了解这些文件结构和目录的意义，可以帮助你更好地进行 React 开发。在接下来的教程中，我们将深入探讨 JSX 语法，这在 React 中扮演着至关重要的角色。请继续关注我们的系列教程！通过不断实践、编写和调试代码，你将逐渐掌握 React 的强大之处。
6 环境搭建之文件结构介绍
