使用 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
