react项目文件结构解析

使用 create-react-app my-app 脚手架工具 命令 之后快速搭建一个 react项目之后生产的目录 结构 有

image.png
利用 vscode 编译器打开

这个是自动创建的初始结构，下面是各个文件的内容和作用。

1. package.json

每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

负责 管理 整个项目用到的 依赖包 列表配置 以及 项目打包的一些脚本命令 scripts 配置

image.png

• name 和 version
  是 package.json文件中最重要的字段，也是必须的字段，如果 你的 npm 包没有指定 这个两个字段，将无法被安装
  name 指的是 npm 包名，在这里指向项目的名称

public 文件夹

• favicon.ico
  浏览器 tab 上的 图标，也是一个项目的图标

• index.html
  项目的入口文件，引用了第三方类库，还可以引入cdn

<div id="root"></div> 是项目的总容器，所有的内容存储在这个容器中。这个容器有且只能有一个

src 文件夹

项目的源码区

• index.js

  
  image.png

存放的是这个项目的核心内容，也就是我们的主要工作区域。其中，index.js文件是和index.html进行关联的文件的唯一接口。index.js的内容结构：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';  // 引用的页面内容，整个项目的根组件
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

ReactDOM.render(）的作用是将<App/>的内容渲染到根“root”容器中去。

• App.js

  
  image.png