初始化react脚⼿架

一、react脚⼿架介绍

脚⼿架: ⽤来帮助程序员快速创建⼀个基于xxx库的模板项⽬

包含了所有需要的配置（语法检查、 jsx编译、 devServer…）
下载好了所有相关的依赖
可以直接运⾏⼀个简单效果

react提供了⼀个⽤于创建react项⽬的脚⼿架库: create-react-app
项⽬的整体技术架构为: react + webpack + es6 + eslint
使⽤脚⼿架开发的项⽬的特点: 模块化, 组件化, ⼯程化

二、创建项⽬并启动

确保本机已安装⾼本版的 Node.js 以及 npm
全局安装：

npm i -g create-react-app

创建项目：

create-react-app hello-react

进入项目：

cd hello-react

启动项目：

npm start

脚手架文件介绍

public ---- 静态资源文件夹
favicon.icon ------ 网站页签图标
index.html -------- 主页面
logo192.png ------- logo图
logo512.png ------- logo图
manifest.json ----- 应用加壳的配置文件
robots.txt -------- 爬虫协议文件

src ---- 源码文件夹
App.css -------- App组件的样式
App.js --------- App组件
App.test.js ---- 用于给App做测试
index.css ------ 样式
index.js ------- 入口文件
logo.svg ------- logo图
reportWebVitals.js--- 页面性能分析文件(需要web-vitals库的支持)
setupTests.js---- 组件单元测试的文件(需要jest-dom库的支持)

组件化编码流程

拆分组件: 拆分界⾯,抽取组件
实现静态组件: 使⽤组件实现静态⻚⾯效果
实现动态组件
i. 动态显示初始化数据
  a. 数据类型
  b. 数据名称
  c. 保存在哪个组件?
ii. 交互(从绑定事件监听开始)

其他介绍

项目创建以后webpack相关配置文件默认是隐藏在了node_modules文件夹下的react-scripts下可以通过以下命令将webpack配置文件暴露出来。

npm run eject
或
yarn eject

这时候打开根目录会发现多了config和scripts，就可以修改自己所需要的了
注意：如果运行npm run eject报错，出错的原因应该是仓库里面代码没有提交，如下提交一下

十二、React学习笔记整理（脚手架创建项目）