React脚手架---CRA
React脚手架—CRA
create-react-app【CRA】
React官网提供的脚手架(快速构建一个项目)
全局安装create-react-app
$ npm install -g create-react-app
如果不想全局安装,可以直接使用npx
$ npx create-react-app your-app 也可以实现相同的效果
创建一个项目
$ create-react-app your-app 注意命名方式Creating a new React app in /dir/your-app.Installing packages. This might take a couple of minutes. 安装过程较慢,可以推荐使用yarn
Installing react, react-dom, and react-scripts...
这需要等待一段时间,这个过程实际上会安装三个东西
- react: react的顶级库
- react-dom: 因为react有很多的运行环境,比如app端的react-native, 我们要在web上运行就使用react-dom
- react-scripts: 包含运行和打包react应用程序的所有脚本及配置
出现下面的界面,表示创建项目成功:
Success! Created your-app at /dir/your-app
Inside that directory, you can run several commands:npm start // 开发环境下运行Starts the development server.npm run build // 生产环境打包Bundles the app into static files for production.npm test // 测试环境下运行Starts the test runner.npm run eject // 配置文件抽离// webpack配置放在了node_modules/react-scripts里面 Removes this tool and copies build dependencies, configuration filesand scripts into the app directory. If you do this, you can’t go back!We suggest that you begin by typing:cd your-appnpm startHappy hacking!
根据上面的提示,通过cd your-app
命令进入目录并运行npm start
即可运行项目。
生成项目的目录结构如下:
├── 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 内部文件,我们不操作
常见问题:
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 应用级脚手架
- dva
- umi
React脚手架---CRA相关推荐
- React脚手架及CRA脚手架的使用
React 1.使用: 不能直接在浏览器运行,因为有组件系统和jsx 解决方法:webpack解析组件系统.JSX 2.React脚手架 CRA - react官方推荐使用 国内:蚂蚁金服: Dva ...
- React学习笔记3:React脚手架
使用create-react-app创建react应用 react脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置(语法检查.jsx编译.devServe ...
- React脚手架搭建及目录结构介绍
react脚手架(create-react-app)搭建 npm install -g create-react-app create-react-app todolist (文件夹名) npm st ...
- 基于React脚手架集成Cesium
基于React脚手架集成Cesium 文章目录 基于React脚手架集成Cesium 1. 安装环境 2. 创建项目 3. 引入Cesium 4. 修改文件 5. 参考链接 1. 安装环境 安装Nod ...
- react 引用本地js_从零配置webpack 4+react脚手架(二)
前言: 你可能也注意到了,html文件中的关于js的引用是我们手动写的,那假如我们改了输出路径或打包编译之后的文件名,那我们岂不是还要手动去修改html文件中的引用?我们怎么做到,像create-re ...
- react 文件 md5_从零配置webpack 4+react脚手架(二)
前言: 你可能也注意到了,html文件中的关于js的引用是我们手动写的,那假如我们改了输出路径或打包编译之后的文件名,那我们岂不是还要手动去修改html文件中的引用?我们怎么做到,像create-re ...
- react打包后图片丢失_React系列四 - React脚手架
一. 认识脚手架 1.1. 前端工程的复杂化 如果我们只是开发几个小的demo程序,那么永远不需要考虑一些复杂的问题: 比如目录结构如何组织划分: 比如如何管理文件之间的相互依赖: 比如如何管理第三方 ...
- 偶然发现一个大佬写的 React 脚手架,叫Moderate, 用起来很方便
发现一个大佬写的 React 脚手架,叫Moderate, 用起来很方便 Moderate,意思为适中的,适度的,用这个作为代号,主要取决于他的本名"中用",其一以贯之的想法就是中 ...
- React脚手架学习笔记
一.前端工程的复杂化 如果我们只是开发几个小的demo程序,那么永远不需要考虑一些复杂的问题: 比如目录结构如何组织划分: 比如如何管理文件之间的相互依赖: 比如如何管理第三方模块的依赖: 比如项目发 ...
- 【Recat 应用】之 React 脚手架
Visual Studio Code 安装 React 插件 ES7 React/Redux/GraphQL/React-Native snippets 插件 使用 create-react-app ...
最新文章
- android tomcat乱码问题,Tomcat在处理GET和POST请求时产生的乱码问题
- stm32采集脉冲信号_STM32 TIM 编码器模式采集编码器信号
- Qt Creator编辑MIME类型
- 猎鹰spacex_SpaceX:简单,美观的界面是未来
- 北科大计算机顺德,北京科技大学顺德研究生院2020考研预调剂信息
- 程序员的系统桌面应该是什么样的
- mysql添加字段语句_mysql增加字段 mysql数据库更新字段语句
- 无人机倾斜摄影在矿山测量测绘中有哪些应用
- Excel “不能在隐藏工作簿中编辑宏,请选定“取消窗口隐藏”命令以显示工作簿”
- POJ 2856 Y2K Accounting Bug【简单暴力】
- Google Earth Engine(GEE)——注册GEE被拒绝,官网的回复给出答案
- Android 个人中心界面实现
- 圆柱体的表面积 C++
- Unity Dotween常用方法详解
- DSA算法实现数字签名--java实现
- 电子书 http://my.unix-center.net/~Simon_fu/?page_id=724
- 3G/4G路由器方案之外置硬件看门狗设计
- Java如何删除文件夹和子文件夹
- dup, dup2, 重定向恢复
- 斯坦福计算机系课程内容,斯坦福计算机本科课程有哪些?