• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

如何快速新建react项目?

react 搞代码 4年前 (2021-12-28) 46次浏览 已收录 0个评论

如何快速新建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 项目名称 通过命令进入来源gaodai#ma#com搞*!代#%^码网文件夹内部,准备运行项目

(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相关技术文章,请访问gaodaima搞代码网进行学习!!

以上就是如何快速新建react项目?的详细内容,更多请关注gaodaima搞代码网其它相关文章!


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:如何快速新建react项目?

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址