react脚手架

3.1使用 create-react-app 创建react 应用

3.1.1react 脚手架

1.xxx 脚手架: 用来帮助程序员快速创建一个基于xxx 库的模板项目

(1)包含了所有需要的配置(语法检査、jsx编译、devServer…)

(2)下载好了所有相关的依赖

(3)可以直接运行一个简单效果

2.react 提供了一个用于创建react 项目的脚手架库: create-react-app

3.项目的整体技术架构为:react+webpack+ es6 +eslint

4.使用脚手架开发的项目的特点: 模块化、 组件化 工程化

3.1.2.创建项目并启动

第一步，全局安装:npm install -g create-react-app
第二步，切换到想创项目的目录，使用命令:create-react-app hello-react

这里hello-react为项目名称，尽量不要用中文和特殊字符

第三步，进入项目文件夹:cd hello-react
第四步，启动项目:npm start
最终运行完毕如下：

注意：之前下载过npm和node，今天在创建项目时发现出错，一直卡住，不能继续安装，查找多种原因后发现，是因为淘宝镜像过期了，于是进行更新，之后可以正常创建项目。这里参考了下面文章：(https://blog.csdn.net/weixin_52992693/article/details/135784406)

3.1.3.react 脚手架项目结构

创建完的项目目录如下：

1.node_modules为依赖存在位置
2.public------静态资源文件夹

1. favicon.icon------网站页签图标
2. index.html------ 主页面 (只有一个html文件)
   index.html中代码注说明：
3. logo192.png------logo图
4. logo512.png------logo 图
5. manifest.json------应用加亮的配置文件
6. robots.txt------ 爬虫协议文件

3.src------源码文件夹

1. App.css------App 组件的样式
2. App.js ------函数定义的App 组件
3. App.test.js ------ 用于给 App 做测试
4. index.css— 样式
5. index.js ------ 入口文件
6. logo.svg------ logo图
7. reportWebVitals.js---------页面性能分析文件(需要 web-vitals 库的支持)
8. setupTest.js------做应用的整体测试，或模块的测试（需要jest-dom库的支持）
   加粗文件的执行顺序：首先是index.js,然后是index.html(该文件不能改名字)，两者由webpack调用。index.js中引入了App组件