React脚手架及CRA脚手架的使用

React

1.使用：
- 不能直接在浏览器运行，因为有组件系统和jsx
- 解决方法：webpack解析组件系统、JSX
2.React脚手架
- CRA - react官方推荐使用
- 国内：蚂蚁金服：
  - Dva - 守望先锋
  - Umi - 乌木
3.React框架的目的
- 高效实现用户输入数据快速展示在界面上
4.React解决的前端问题
- 高效实现服务端诗句渲染到页面上
5.React特征
- 函数式编程
- 回归JS【偏原生】

CRA脚手架

全称：Create-React-App

1.安装：
- 全局安装：$ npm i create-react-app -g
- 局部安装：$ npx create-react-app
2.创建项目：$ create-react-app your-app 注意命名方式
- 创建过程会依次安装以下三个包：
  - react: react的顶级库
  - react-dom: 因为react有很多的运行环境，比如app端的react-native, 我们要在web上运行就使用react-dom
  - react-scripts: 包含运行和打包react应用程序的所有脚本及配置
3.启动：
- npm start // 开发环境下运行
- npm run build // 生产环境打包
- npm test // 测试环境下运行
- npm run eject // 配置文件抽离
4.生成目录结构

├── README.md 使用方法的文档
├── node_modules 所有的依赖安装的目录
├── yarn-lock.json 锁定安装时的包的版本号,保证团队的依赖能保证一致。
├── package.json 项目依赖配置记录文件、记录项目脚本命令
├── public 静态公共目录（生产环境）不会被webpack编译
|-- config 项目webpack配置文件
|-- scripts 项目wepback脚本命令执行文件
└── src 开发用的源代码目录
- index.js 项目入口文件
- index.css 项目全局样式
- App.js 构建了一个App组件，是项目最大的组件【类似根组件】
- App.css 是App组件的样式文件
- App.test.js 是App组件测试文件
- logo.svg 初始项目的界面logo
- serverWorker 内部文件，我们不操作
5.npm安装失败
- 切换为npm镜像为淘宝镜像
- 使用yarn，如果本来使用yarn还要失败，还得把yarn的源切换到国内
```
yarn config set registry https://registry.npm.taobao.org // 配置yarn镜像源yarn config list // 查看yarn 镜像列表
```
- 如果还没有办法解决，请删除node_modules及yarn-lock.json然后重新执行cnpm install命令
- 再不能解决就删除node_modules及yarn-lock.json的同时清除npm缓存npm cache clean --force之后再执行npm install命令
- 环境变量问题
- react-scripts 版本过高问题（降低版本 react-script@2.1.8）
上述解决方案均未成功，则
- 在其他可以成功安装React的设备上将目录文件拷贝过来，注意不要拷贝node_modules
  - 拷贝过来之后，$ cnpm i
6.启动失败请参考：解决react安装CRA启动spawn cmd ENOENT报错问题

React脚手架及CRA脚手架的使用相关推荐

[react] Mern和Yeoman脚手架有什么区别？
[react] Mern和Yeoman脚手架有什么区别? MERN是一种脚手架工具,可使用Mongo,Express,React和Nodejs轻松构建同构应用 Yeoman也是脚手架工具,它是基于No ...
React学习笔记三脚手架生成的index.js内容简介
React脚手架生成的index.js内容简介 import React from 'react'; import ReactDOM from 'react-dom'; import App from ...
React使用TS模板脚手架报错：声明了“ React”，但从未读取其值
报错提示声明了" React",但从未读取其值. 错误原因因为是使用的基于TS的react模板脚手架,因此在安装依赖的时候,必须安装带有@types/xxx的文件. 解决办法 ...
React多页面应用脚手架-v1.3.0
react-multi-page-app是一个基于react和webpack的多页面应用架构,通过编译生成对应目录结构清晰的静态页面,实现多页面便捷开发维护.1.3.0 版本对项目整体做了一个全面的升 ...
Vue或React多页应用脚手架
https://github.com/zhujiasheng/vue-multipage https://github.com/MeCKodo/vue-multipage 转载于:https://ww ...
React P68 npm运行脚手架启动项目后显示‘无法访问此网站’
将代码: const proxy = require('http-proxy-middleware')module.exports = function(app){app.use(proxy('/ap ...
React入门---react脚手架
React是Facebook研发的一款前端框架(MVC框架:侧重于view层操作),目前在行业内广泛使用.为了让框架的体积变得更轻量级,设计者们把其定义为"渐进式"框架,也就是: ...
从搭建脚手架到在npm上发布react组件
从搭建脚手架到在npm上发布react组件最近公司给公司里架设了私有的npm仓库,相应地也需要一个用来发布react组件用的脚手架,在这个过程中又又又又复习了一下webpack,在这里分享下脚手架搭 ...
this指向、数据双向流、传递参数、JSX中循环、React中样式、路由、引入资源的其它方式、create-react-app脚手架、事件处理、获取数据、UI框架推荐、pc桌面应用electronjs
改变this指向的几种方式: //1.使用箭头函数代替原始函数写法:getState=()=>{}//2.在函数调用时给函数名加bind(this)方法:(bind中第一个参数表示修改this指 ...

React脚手架及CRA脚手架的使用

React

CRA脚手架

React脚手架及CRA脚手架的使用相关推荐

最新文章

热门文章