开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

创建React App:如何获取最终端口dev-server在

创建React App时，可以通过以下步骤获取最终端口dev-server在：

首先，确保你已经安装了Node.js和npm（Node.js的包管理器）。
打开命令行终端，并进入你想要创建React App的目录。
运行以下命令来创建一个新的React App：

npx create-react-app my-app

这将使用create-react-app工具创建一个名为my-app的新项目。

进入新创建的项目目录：

cd my-app

在项目目录中，运行以下命令来启动开发服务器：

npm start

这将启动一个本地开发服务器，并在默认端口（通常是3000）上运行你的React App。

在命令行终端中，你将看到类似以下的输出：

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.100:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

在这个输出中，你可以看到本地访问的URL（通常是http://localhost:3000）。这就是dev-server的最终端口。

请注意，如果端口3000已经被其他应用程序占用，dev-server将会尝试使用其他可用的端口。在这种情况下，你将在命令行终端中看到类似以下的输出：

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3001
  On Your Network:  http://192.168.1.100:3001

Note that the development build is not optimized.
To create a production build, use npm run build.

在这个输出中，你可以看到新的端口号（例如http://localhost:3001）。

总结起来，通过运行npm start命令启动React App的开发服务器，你可以在命令行终端中找到dev-server的最终端口。

相关搜索:在React App中获取损坏的图像如何为React App创建防弹构建脚本？在monorepo代码共享中创建React App + Typescript 如何为自定义构建创建React App 如何在react原生App上获取推送通知？如何使用文件app在iPhone上查看最终编辑的html文件？Create-react-app在更新后创建不带组件的App.js 如何解决在react js中创建app时出现的错误如何删除React App的符号和名称或“使用create-react-app创建的网站”？在react中下载和创建app的时间问题如何创建create-react-app供应商捆绑包为什么在Gitlab CI Runner中创建React App构建失败？如何使用Create-React-App --template typescript获取.env变量？如何在创建React App SPA中有选择地呈现代码？如何使用react-app-link toRoute({render})创建保护路由在创建React App模板的测试脚本中的'it‘函数是什么？create-react-app运行问题，即使在刚刚创建之后也是如此如何阻止用户查看托管在google app engine上的react app staging环境？在使用create-react-app创建的项目中，如何将代码转换为javascript？iOS 10消息扩展app:如何获取此函数创建的MSSticker？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

在React 中，如何创建refs？

在 React 中，可以通过以下几种方式来创建 ref： 1：使用 React.createRef() 方法：在类组件中，可以使用 React.createRef() 方法来创建 ref 对象。...通常，在组件的构造函数中将 ref 赋值给类的实例属性。...3：使用 React.useRef() Hook：在函数组件中，可以使用 React.useRef() Hook 来创建一个 ref 对象，并将其赋值给一个变量。...无论使用哪种方式，创建的 ref 对象都可以通过 .current 属性来访问引用的组件或 DOM 元素。...需要注意的是，在组件挂载完成后访问 ref，以确保 ref.current 的值不为 null 或 undefined。

1931 0

5-4 使用 webpack-dev-server 实现请求转发

, { Component } from 'react'; import ReactDom from 'react-dom'; import axios from 'axios'; class App...我们关闭之前的服务，新建一个文件：server/api/hello.json，进入 server 使用 3000 端口重新开启服务。...然后我们使用 dev-server 开启服务：npm run dev-server ?...image.png 可以看到，请求的是 3600 端口下的接口，但是我们这里的 dev-server 仅提供了页面资源，并没有接口资源，接口资源在线上（这里用 3000 端口代替）。...跨域有的人会想，那这样做其实和在源码中通过配置去写也是一样的呀，只要最终达到以下效果就可以了： axios.get('http://127.0.0.1:3600/api/hello.json').then

2.5K2 0

5-5 webapck-dev-server 解决单页应用路由问题

本节主要介绍 webpack-dev-server 如何解决 spa 遇到的路由问题。 2...., Fragment } from 'react'; import ReactDom from 'react-dom'; import { BrowserRouter, Route } from 'react-router-dom.../list.jsx"; class App extends Component { render() { return( ) } } ReactDom.render(<App...路由匹配 npm run dev-server 后，如下： ?

8532 0

create-react-app初探

通过添加参数生成ts支持: npx create-react-app my-app --typescript# oryarn create react-app my-app --typescript...可以看到生成的项目中的 package.json包含很多命令： react-scripts start启动开发模式下的一个dev-server，并支持代码修改时的 HotReload react-scripts...因为 create-react-appmy-app之后通过模版生成的项目中入口脚本被放置在src/index.js，而入口html被放置在public/index.html，所以需要对这两个文件进行检查...react-dev-utils/browsersHelper是一个浏览器支持的帮助utils，因为在 react-scripts v2之后必须要提供一个browser list支持列表，不过我们可以在...id=45616 扫码关注 IMWeb前端社区公众号，获取最新前端好文微博、掘金、Github、知乎可搜索 IMWeb 或 IMWeb团队关注我们。点击阅读原文获取更多参考资料

7592 0

正确的Webpack配置姿势，快速启动各式框架！

一般来说，在Angular中我们将是启动.bootstrap()的文件，在Vue中则是new Vue()的位置，在React中则是ReactDOM.render()或者是React.render()的启动文件...如果你看过生成的bundle.js代码就会发现，Webpack将所有的模块打包一起，每个模块添加标记id，通过这样一个id去获取所需模块的代码。...loader链式地按照先后顺序进行编译，从后往前，最终需要返回javascript。...常用配置： devServer.contentBase: 告诉服务器从哪里提供内容 devServer.port(CLI): 指定要监听请求的端口号 devServer.host(CLI): 指定使用一个.../app/bootstrap.js'] // 入口文件},output: {path: path.resolve(__dirname, 'app/entry'), // 编译后文件publicPath:

1.5K3 0

create-react-app初探

通过3种方式快速创建一个React SPA应用: npm init with initializer (npm 6.1+) npx with generator (npm 5.2+) yarn create...通过添加参数生成ts支持: npx create-react-app my-app --typescript # or yarn create react-app my-app --typescript...可以看到生成的项目中的package.json包含很多命令： react-scripts start启动开发模式下的一个dev-server，并支持代码修改时的Hot Reload react-scripts...因为create-react-app my-app之后通过模版生成的项目中入口脚本被放置在src/index.js，而入口html被放置在public/index.html，所以需要对这两个文件进行检查...react-dev-utils/browsersHelper是一个浏览器支持的帮助utils，因为在react-scripts v2之后必须要提供一个browser list支持列表，不过我们可以在package.json

1.3K1 0

webpack配置React开发环境(上)

index.html 此演示向您演示如何加载第三方插件。...--hot --inline: 还添加了webpack/hot/dev-server条目。...'] }, include: path.join(__dirname, '.') }] } }; // App.js import React, { Component...} from 'react'; export default class App extends Component { render() { return ( Hello...App from '.

1.6K13 0

ViteConf 2022回顾：Vite是如何诞生的？

除了 vue-cli，create-react-app（React官方脚手架）也使用了相似的配置来处理。值得一提的是，parcel 是第一个提出零配置概念的构建工具。...所以，主流的解决方案，比如 Next.js、create-react-app、vue-cli 都是基于 webpack 的，因为用户更注重热更新的开发体验。...@vue/dev-server 于是，在2019年，尤雨溪创建了 @vue/dev-server，它能够进行转化，并且使用原生 ESM 的 import 语法来加载 Vue 的 SFC 组件。...在调研中发现，@web/dev-server 也是一个 bundless 的 dev你server。所以，当时的想法就是创建一个支持原生 ESM 热更新的 dev server。...最终，在 2021 年 2 月 16日，Vite 2.0 正式发布。组建团队尤雨溪的时间和精力被分散到了 Vite 和 Vue 两个项目中，仍然需要确保 Vue 可以正常迭代。

6612 0

5-10~11 webpack 性能优化（2）

简介本节主要介绍如何利用 dll 相关技术来提高打包效率。 2....普通打包首先我们直接使用 dev 命令打包，(这里暂不使用 dev-server ) npm run dev 我们多打几次看看，最终耗时我这边大概是 3500ms 左右。 ?...4.3 dll-plugin 和 dllreferenceplugin dll-plugin 是在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle...我们运行一下 npm run dev-server，看一下页面是否 okay： ? image.png 页面运行正常，且打包时间大大缩短 5....在 vue-cli 的某次 pr 中，尤雨溪提到vue-cli/pull/1002 不在维护 dll。并且在一次 commit中删除了对 dll 的支持。 ?

1.3K1 0

uni-app如何解决在for循环里调用异步请求获取数据顺序混乱问题？

先前有一次做uni-app的js接口对接时，遇到过这样的情况，在for循环里，调用一个异步请求时，返回来的值顺序是乱的，因此，在以下的代码里，push到数组里的值，每次的顺序可能都是不一样的，造成这样一个原因...，是for循环是单线程的，异步请求是多线程的，f往往在for循环结束了，异步请求还没有结束。...that.list = res.datas.class_list; for(var i=0;i<that.list.length;i++){ 在uni-app

4.6K2 0

9102年：手写一个React脚手架【优化极致版】

出口(output) output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。...我们认为这种语言扩展是有很必要的，因为这可以使开发人员创建出更准确的依赖关系图。...来获取代码的依赖） webpack做的就是分析代码。转换代码，编译代码，输出代码最终形成打包后的代码这些都是webpack的一些基础知识，对于理解webpack的工作机制很有帮助。...插件实例在获取到 compiler 对象后，就可以通过 compiler.plugin(事件名称, 回调函数) 监听到 Webpack 广播出来的事件。...下面正式开始开发环境的配置：入口设置：设置APP，几个入口文件，即会最终分割成几个chunk 在入口中配置 vendor，可以code spliting ，将这些公共的复用代码最终抽取成一个

9571 0

如火热链接到css,用于在Webpack中启用热式样装入器以同步css的配置

我试图在Webpack中启用热样式装入器，但是我找不到正确的配置。...这里是我的webpack.config.js：用于在Webpack中启用热式样装入器以同步css的配置 const webpack = require(‘webpack’); const path =...TransferWebpackPlugin = require(‘transfer-webpack-plugin’); const config = { entry: [ ‘webpack/hot/dev-server...’, ‘webpack/hot/only-dev-server’, path.join(__dirname, ‘/src/app/app.js’), ], resolve: { extensions...“^4.4.5”, “react-tap-event-plugin”: “^1.0.0”, “redux”: “^3.4.0” } } 但无论我如何配置它，我不能让热同步工作(为的CSS，对于.js文件它工作得很好

9152 0

【NPM库】- 0x03 - Express

require("path"); const http = require('http'); const express = require("express"); /** * 监听主机 * 监听端口...*/ const hostname = "localhost"; const port = 3000; /** * 创建 app */ const app = express(); const...listeningApp = http.createServer(app); /** * 静态文件托管 */ // 1....Express 会自动在配置的静态目录查找文件。存放静态文件的目录名不会出现在 URL 中。...：proxy https://webpack.js.org/configuration/dev-server/#devserverproxy

9383 0

webpack 热更新（实施同步刷新）

，接下来我附加上我的实现代码：需要几个文件： 1、package.json文件在package.json文件中为scripts添加,方便使用命令: 最终package.json文件如下 "scripts...是这么配置的，很简单， app.js文件 import React from 'react' import { render } from 'react-dom' import { Router, Route...package.json 2. npm init -yes 可以创建默认的package.json 现在我们的项目已经创建好了,接下来我们来添加依赖包及插件（1）局部安装Webpack,...HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: ['webpack/hot/dev-server...---- 2017-11加 webpack最近更新版在在这里

8093 0

React 测试驱动教程

创建第一个 React 组件： # src/main.js import React, { Component } from 'react'; import { render } from 'react-dom...我们还定义了 3000 端口，使得更像是 Rails 开发的体验。最后，在 webpack 配置文件中添加一个 resolve 标记，使进口文件看起来更直观。...因为我们没有在适当的位置创建一个根组件。...在组件渲染时给评论列表一些 style，然后我们就可以知道 shallow render 是如何处理这些样式的了。...在下一次的文章中，我将花更多的时间在特殊场景的测试，还有如何测试 Redux，我更喜欢 flux 的实现。虽然我只使用 React 开发了数月，但我已经爱上它了。

4.6K2 0

从零开始学VUE之Webpack(搭建本地服务器并分离开发和生产配置)

/dist,让他为我门编译过后的文件提供服务 port:端口 inline:页面实时刷新 historyApiFallback:在SPA页面中,依赖H5的history模式执行命令安装 D:\zhangyugen.../src/main.js', // 配置目标位置 output: { // path 只能写绝对路径不能写相对路径但是不要直接写死,需要动态获取文件位置.../src/js/App.vue 166 bytes {0} [built] [4] multi (webpack)-dev-server/client?...启动成功,默认运行在8080端口,可以通过http://localhost:8080/访问运行结果 ?.../src/js/App.vue 166 bytes {0} [built] [4] multi (webpack)-dev-server/client?

2.4K2 0

webpack3.x文件配置

大纲： 1、创建package.json文件 2、创建.babelrc文件 3、创建webpack.config文件目前3个文件即可,下面具体介绍： ---- 一、基础配置 1、首先全局安装...webpack 的基础配置， npm i webpack -g 在本地如果没有package.json 文件，可以执行初始化操作 npm init 2、创建package.json 文件...: path.resolve(__dirname, '你的入口文件路劲地址 + "/app.js"),//项目的入口文件 app.js vendor: ['vue', 'vue-router...open: true, //:在默认浏览器打开url(webpack-dev-server版本> 2.0) port: "9000",//页面端口 compress: true...--hot --inline还添加了webpack/hot/dev-server条目。 --public：覆盖--inline客户机模式下使用的主机和端口（对VM或Docker有用）。

8532 0

更骚的create-react-app开发环境配置craco

如果想要无 eject 重写 CRA 配置，目前成熟的是下面这几种方式通过 CRA 官方支持的 --scripts-version 参数，创建项目时使用自己重写过的 react-scripts 包使用...react-app-rewired + customize-cra 组合覆盖配置使用 craco 覆盖配置第二种方式相对第三种略复杂一些，我自己很有体会并且我们注意到最新的AntDesign4 官方也开始推荐...配置步骤首先，使用 create-react-app 创建一个项目，这里我们命名为 my-project npx create-react-app my-project 进入项目目录，安装基本依赖 yarn...resolve: { alias: { 'react-dom': '@hot-loader/react-dom', }, }, }; step2：注入引用App.js import...import React from 'react' import { hot } from 'react-hot-loader' const App = () => Hello World!

8K5 4

iOS 模拟器调试大法了解一下?

配置代理我们在调试的时候，需要把模拟器的网络请求代理到我们的 dev-server。这里大力推荐使用强大的 Whistle配合 Proxifier来实现。...首先安装 Whitle，运行 w2 start，访问 http://127.0.0.1:8899，配置好 dev-server 的代理。...首先添加一条 Action 规则代理到本地 8899端口：然后新建一个规则，把 Simulator;"Xcode Server Builder”; "MobileSafari”;“com.apple.WebKit.Networking...可以在 APP 中直接打断点、走单步调试等等，从此跟 eruda 等手动打 log 的调试器说拜拜~ 首先我们需要客户端同学给模拟器打一个 .app包，把包拖到模拟器安装。...id=26701 扫码关注 IMWeb前端社区公众号，获取最新前端好文微博、掘金、Github、知乎可搜索 IMWeb 或 IMWeb团队关注我们。点击阅读原文获取更多参考资料

2.2K1 0

Webpack学习总结

# 安装到项目目录 npm install --save-dev webpack 2.3 创建目录文件夹创建两个文件夹：app 和 public，app文件夹存放原始数据和编写的JavaScript...中的地址 # webpack非全局安装的情况，后同 node_modules/.bin/webpack app/main.js public/bundle.js 3.3 通过配置文件使用创建...} ] } ] } }; 注：注意此处对同一个文件引入多个loader的方法在app...} } ] } ] } }; 在app...目录下创建 index.tmpl.html文件模板（包含title等必须元素），编译过程中插件会自动添加所依赖的 css、js、favicon 等文件，并生成最终的html页面 <!

2.6K6 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭