快速新建html,如何快速新建react项目？

如何快速新建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答疑 栏目进行学习！！