起源发展
- 起源于Facebook的内部项目
- 2013年5月开源
与传统MVC关系
- 轻量级的视图层库
- react不是完整的MVC框架,可以认为是MVC中的V就是view
特性
- 声明式设计
- 高效,虚拟dom见到了与dom的交互
- 灵活,可以与其他库或框架配合
- JSX,JavaScript 语法的扩展
- 组件,react构建组件可以使代码更容易复用,更好地用在大项目中
- 单向响应数据流,减少了重复代码
开始
create-react-app
$ npm install -g cteate-react-app
创建项目
$ cteate-react-app your-app // 注意命名方式
不想全局安装,可以使用npx
- 好处:
- 将上面两步合二为一
- 直接安装最新版本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 源码目录 这个目录里边放的是我们开放的源代码
-
public 公共文件,里边有公用模板和图标等一些东西
-
index.html : 首页的文件
-
favicon.ico : 网站或者项目的图标
-
mainifest.json :移动端配置文件
成功创建标识
npm安装失败
- 切换淘宝镜像
- npm instrall nrm
- nrm ls
- 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