如何快速新建 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 和目录结构如下:
来源: http://www.css88.com/qa/react/15078.html