菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
62
0

如何快速新建react项目?

原创
05/13 14:22
阅读数 1542

创建一个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 哦!

1.png

运行 npm start 命令,启动开发服务器后,在地址栏中输入 http://localhost:3000/ 就能看到我们的项目了。(项目会自动打开,默认端口是3000,并自带热更新),命令运行成功效果如下:

2.png

项目打开后的效果:

3.png

注意:

create-react-app 快速脚手架搭建的项目,其默认配置文件都是隐藏的,如果要自定义,运行npm run eject。

单向操作不可逆,npm run eject命令暴露项目的配置,可以自由配置项目所需的依赖,不使用的版本零配置即可开发。

create-react-app刚生产项目后的package.json和目录结构如下:

4.png

5.png

运行npm run eject命令后的package.json和目录结构如下:

6.png

7.png

8.png

发表评论

0/200
62 点赞
0 评论
收藏
为你推荐 换一批