访问react项目html文件,如何访问已启动的react项目

5f8a2cba9d176287593eeacded0f38b4.png

如何访问已启动的react项目

1、运行react项目都会开启一个终端窗口,只需要打开窗口,查看项目的运行地址即可。

44ed49d4d03cdee1d28c558429d9740d.png

上面这个项目的地址是http://localhost:3000/ ,打开浏览器输入这个地址就可以访问这个项目了。

2、也可以直接访问浏览器 http://localhost:3000/ 进行访问,因为react项目默认使用的是3000端口。

知识补充:

为什么是3000端口?

npm start后执行的是react-scripts start"scripts": {

"start": "react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test",

"eject": "react-scripts eject"

},

react-scripts位于node_modules\react-scripts\bin\react-scripts.js,

2b860fbca33064249cad2f8c32d0cf38.png

当我们启动服务器,DEFAULT_PORT的默认值是3000,我们访问的就是默认端口3000,这就是我们查看端口3000的原因。

我们也可以更改为其他端口号。

更多React相关技术文章,请访问React答疑栏目进行学习!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何使用vite搭建一个React项目? 首先,确保你已经在电脑上安装了最新的Node.js版本和npm包管理工具。然后,按照以下步骤: 1. 创建一个新的React项目文件夹,并进入到该文件夹内。 2. 在该文件夹内运行命令行工具,并输入以下命令来初始化一个新的npm项目: ``` npm init -y ``` 该命令会快速创建一个新的npm包,并使用默认设置。 3. 接下来,安装vite的构建工具,输入以下命令: ``` npm install vite --save-dev ``` 这个命令会安装vite的构建工具,并将其添加到你的npm项目中,作为开发依赖。 4. 通过以下命令安装ReactReact DOM: ``` npm install react react-dom --save ``` 这个命令会安装ReactReact DOM,并将它们添加到你的npm项目中。 5. 创建一个新的index.html文件,输入以下代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React App</title> </head> <body> <div id="root"></div> <script type="module" src="/src/index.jsx"></script> </body> </html> ``` 6. 在/src文件夹下创建一个名为index.jsx的文件,并输入以下代码: ```jsx import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <React.StrictMode> <div>Hello, World!</div> </React.StrictMode>, document.getElementById('root') ); ``` 7. 最后,在命令行输入以下指令来启动vite服务器,打开浏览器访问 http://localhost:3000 ,页面应该呈现出“Hello, World!”的内容: ``` npx vite ``` 到此为止,你已经成功地使用vite搭建了一个新的React项目

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值