如何快速新建react项目?下面给大家介绍一下快速新建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更新后可能会导致以前的项目跑不起来哦,如有这种情况发生,更新或者重装一下依赖 即可解决
(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,并自带热更新),命令运行成功效果如下:
项目打开后的效果:
注意:
create-react-app 快速脚手架搭建的项目,其默认配置文件都是隐藏的,如果要自定义,运行npm run eject。
单向操作不可逆,npm run eject命令暴露项目的配置,可以自由配置项目所需的依赖,不使用的版本零配置即可开发。
create-react-app刚生产项目后的package.json和目录结构如下:
运行npm run eject命令后的package.json和目录结构如下:
更多React相关技术文章,请访问 React答疑 栏目进行学习!!