6 React.js框架从零教程：环境搭建之文件结构介绍
在上一篇中，我们讨论了如何创建一个新的 React 应用，掌握了使用 create-react-app 工具来快速构建项目的初步流程。这一节，我们将深入探讨 React 应用的文件结构，以及每个目录和文件的作用。这将为我们后续的学习，尤其是理解核心概念如 JSX 语法，提供很好的基础。
React 应用的基础文件结构
创建一个新的 React 应用后，你会发现一个标准的文件结构，如下所示：
my-react-app/
├── node_modules/
├── public/
│ ├── index.html
│ ├── favicon.ico
│ └── ...
├── src/
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── ...
├── .gitignore
├── package.json
├── README.md
└── yarn.lock
主要目录和文件说明
-
node_modules/:- 这个目录是由包管理工具（如 npm 或 yarn）自动生成的，包含了所有项目依赖的包。通常我们不需要手动修改这个文件夹的内容。
-
public/:- 里面存放了应用的公共资源，如
index.html文件。在开发中，这是整个应用的起点，React 会将应用的组件渲染到这个文件中。 - 你可以在这里添加其他静态资源，比如图片或其他 HTML 页面。
<!-- public/index.html --> <!DOCTYPE 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 将从这里开始初始化应用并渲染组件。
// 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是默认的应用组件，它将是我们第一个展示的组件。
// 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 的强大之处。
