快速创建一个react项目
创建一个react项目有三种方式:1.create-react-app 快速脚手架(简单,类似于 vue-cli 工具)2.webpack一步一步构建3. 第三方脚手架(generator-react-webpack,需要yeoman的支持)这里主要介绍利用create-react-app 快速脚手架 创建一个react项...
创建一个react项目有三种方式:
1. create-react-app 快速脚手架(简单,类似于 vue-cli 工具)
2. webpack一步一步构建
3. 第三方脚手架(generator-react-webpack,需要yeoman的支持)
这里主要介绍利用 create-react-app 快速脚手架 创建一个react项目:
注意:create-react-app 要求node版本至少在 8.0.0 及以上,如果您的node版本较低,请先更新: 使用 n模块 更新node
node更新后可能会导致以前的项目跑不起来哦,如有这种情况发生,更新或者重装一下依赖 即可解决
注意,n模块只支持更新mac系统上的node版本,如果时windows,只能下载node,覆盖安装
(1)npm install -g create-react-app 全局安装
(2)create-react-app 项目名称 新建并对react项目进行命名(注:项目名称不能有大写)==>> 请先进入到项目要存放的位置
(3)cd 项目名称 通过命令进入文件夹内部,准备运行项目
(4)npm start 运行项目
为了提高速度,最好使用 cnpm 或者 yarn 哦!
创建成功后如下图所示:
运行 npm start 命令,启动开发服务器后,在地址栏中输入 http://localhost:3000/ 就能看到我们的项目了。(项目会自动打开,默认端口是3000,并自带热更新),命令运行成功效果如下:
项目打开后的效果:
其他构建项目的方式请参考:https://www.cnblogs.com/cina33blogs/p/9115294.html
注意:
create-react-app 快速脚手架搭建的项目,其默认配置文件都是隐藏的,如果要自定义,运行npm run eject。
单向操作不可逆,npm run eject命令暴露项目的配置,可以自由配置项目所需的依赖,不使用的版本零配置即可开发。
create-react-app刚生产项目后的package.json和目录结构如下:
运行npm run eject命令后的package.json和目录结构如下:
参考文章:https://www.jianshu.com/p/c6040430b18d
注意:运行npm run eject命令可能会报如下错误:
报错原因:
create-react-app 脚手架添加.gitgnore文件,但是却没有本地仓库。
解决办法:
cd project
git init // 当前目录新建代码库
git add . // 添加当前目录所有文件到暂存区
git commit -m 'Saving before ejecting' // 提交暂存区到仓库区
npm run eject
注意:在webstorm里面运行以上的命令可能不成功,可以在cmd命令行中运行
参考文章:https://www.cnblogs.com/feng3037/p/10179959.html
文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!
对博客文章的参考,若原文章博主介意,请联系删除!请原谅
更多推荐
所有评论(0)