react | 从零开始：使用 Create React App 创建你的第一个 React 项目

1.react 脚手架

1. xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
   1. 包含了所有需要的配置（语法检查、jsx编译、devServer...）
   2. 下载好了所有相关的依赖
   3. 可以直接运行一个简单效果
2. react提供了一个用于创建react项目的脚手架库: create-react-app
3. 项目的整体技术架构为: react + webpack + es6 + eslint
4. 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

2. 创建项目并启动

第一步，全局安装：

npm i -g create-react-app

第二步，切换到想创项目的目录，使用命令：

create-react-app react-first

第三步，cd到对应项目目录，运行

npm start

3.运行效果

4.项目目录分析

文件/目录	用途
package.json	项目配置 & 依赖管理
public/index.html	HTML 模板，React 挂载点
src/index.js	JS 入口，渲染根组件
src/App.js	根组件（UI 入口）
src/*.css	样式文件
public/manifest.json	PWA 配置
src/reportWebVitals.js	性能监控
build/	生产构建输出目录

1. package.json

• 作用：定义项目元信息、依赖包、脚本命令等。
• 关键字段 ：
  • "dependencies"：生产依赖（如 react, react-dom）
  • "devDependencies"：开发依赖（如 @testing-library/react, web-vitals）
  • "scripts"：常用命令
    • start → 启动开发服务器（http://localhost:3000）
    • build → 打包生产代码到 build/ 目录
    • test → 运行单元测试
    • eject → 弹出配置（不推荐，不可逆）

2. public/index.html

• 作用：应用的 HTML 模板（单页应用的入口 HTML）。
• 关键点 ：
  • 包含 <div id="root"></div>，React 渲染的挂载点。
  • 使用 %PUBLIC_URL% 占位符（如 <link rel="icon" href="%PUBLIC_URL%/favicon.ico">），构建时会被替换为正确路径。

3. public/manifest.json

• 作用：PWA（渐进式 Web 应用）配置文件，用于离线缓存、添加到主屏幕等。
• 可通过 serviceWorkerRegistration 控制是否启用 PWA。

4. public/robots.txt

• 作用：告诉搜索引擎爬虫哪些页面可以抓取（默认允许全部）。

---

src/ 目录（核心源码）

1. src/index.js

• 作用：JavaScript 入口文件。
• 功能 ：
  • 引入 React 和 ReactDOM
  • 获取 #root DOM 节点
  • 渲染 <App /> 组件
  • （可选）注册 Service Worker（PWA）

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
reportWebVitals(); // 性能监控

2. src/App.js

• 作用：根组件（顶层 UI 组件）。
• 默认包含一个简单示例 UI，你可以在此构建整个应用的布局或路由。

3. src/App.css

• 作用 ：App.js 对应的样式文件。
• CRA 支持 CSS、CSS Modules、Sass 等（需安装 node-sass 或 sass）。

4. src/index.css

• 作用：全局样式（如重置样式、字体、body 样式等）。
• 在 index.js 中被引入。

5. src/logo.svg

• 作用：示例图片资源（React 官方 logo），演示如何导入静态资源。

6. src/reportWebVitals.js

• 作用：集成 Web Vitals 性能指标（如 FID、CLS、LCP）。
• 可用于监控真实用户性能体验，可连接 Google Analytics 等。

7. src/setupTests.js

• 作用：测试环境的全局设置（如 Jest 配置）。
• 默认引入 @testing-library/jest-dom，提供额外的断言方法（如 toBeInTheDocument()）。

---

其他重要文件（可能隐藏或后期生成）

.gitignore

• 忽略 node_modules/、build/、.env.local 等无需提交的文件。

README.md

• 项目说明文档，包含 CRA 的使用指南、可用脚本、部署建议等。

node_modules/

• 所有依赖包（由 npm install 或 yarn install 安装）。

build/（运行 npm run build 后生成）

• 生产环境打包后的静态文件（HTML、JS、CSS、图片等），可直接部署到服务器。