React从0到1 | 1.项目初始化与基础目录分析

初始化项目

npx create-react-app siyezhou-react-p --template typescript

上面这样安装的可以自带ts
当前node版本：12.14.0
项目的react版本："react": "^17.0.1"

基础目录分析

基础目录.png

• node_modules：第三方依赖
• public：静态文件资源，不参与打包

index.html：src文件夹里写的所有内容都会打包成一个bundle.js，然后引入到这个文件中去
manifest.json：配置PWA的一些加载情况
robots.txt：配置搜索引擎关于项目的配置，比如在Disallow中配置不想让搜索引擎访问的页面

• src：源代码，直接参与到打包工具打包

index.tsx：入口文件，进行一些项目的准备工作
App.tsx：入口文件，描述项目本身
react-app-env.d.ts：引用一些预先定义好的ts类型
reportWebVitals.ts：埋点上报
setupTest.ts：配置单元测试

• .gitignore：记录git的忽略文件
• package.json：每个项目的入口文件
• tsconfig.json：关于ts的配置
• yarn.lock：锁定版本号

在src中引用到的静态资源都应该是在src文件夹中的，然后像普通的模块那样去引入，如

import logo from './logo.svg'

放在其他位置会导致最终打包后的路径错误。