第一关：react 初识

起源发展

• 起源于Facebook的内部项目
• 2013年5月开源

与传统MVC关系

• 轻量级的视图层库
• react不是完整的MVC框架，可以认为是MVC中的V就是view

特性

1. 声明式设计
2. 高效，虚拟dom见到了与dom的交互
3. 灵活，可以与其他库或框架配合
4. JSX，JavaScript 语法的扩展
5. 组件，react构建组件可以使代码更容易复用，更好地用在大项目中
6. 单向响应数据流，减少了重复代码

开始

create-react-app

$ npm install -g cteate-react-app

创建项目

$ cteate-react-app your-app  // 注意命名方式

不想全局安装，可以使用npx

• 好处：
  1. 将上面两步合二为一
  2. 直接安装最新版本create-react-app
• 缺点：
  • 时间较长

安装内容

• react：react 的顶级库
• react-dom：react有很多运行环境，app端的react-native，web端的react-dom
• react-scripts：包含运行和打包react应用程序的所有脚本和配置

各个项目文件结构作用

• README.md 项目介绍
• package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
• package-lock 上线锁定版本信息
• gitignore 这个是git的选择性上传的配置文件
• src 源码目录 这个目录里边放的是我们开放的源代码
  • index.js 项目的入口文件
• public 公共文件，里边有公用模板和图标等一些东西
  • index.html : 首页的文件
  • favicon.ico : 网站或者项目的图标
  • mainifest.json ：移动端配置文件

成功创建标识

image.png

npm安装失败

• 切换淘宝镜像
  1. npm instrall nrm
  2. nrm ls
  3. nrm use taobao
• 删除node_modules及package-lock.json 然后重新执行npm install 命令
• 删除node_modules及package-lock.json 的并清除npm缓存 npm cache clean --force 之后再执行 npm install 命令

命令

启动项目：
npm start

打包项目：
npm run build