React 教程 - 如何为 reactJs 应用程序启动节点服务器？

Posted 2023-02-25

【中文标题】React 教程 - 如何为 reactJs 应用程序启动节点服务器？

【英文标题】：React tutorial - how do I start the node server for a reactJs application?

【发布时间】：2016-06-15 23:58:03

【问题描述】：

我刚刚开始 react.js 教程，我已经下载了文件，然后它提到：

“通过在浏览器中打开 http://localhost:3000 来跟踪您的进度（在启动服务器之后）。”

我知道这听起来可能很愚蠢，（请耐心等待，因为我是 React 的初学者）但是在这种情况下如何启动服务器？

谢谢。

马克

【问题讨论】：

取决于您使用的语言：github.com/reactjs/react-tutorial

如何链接到回购/教程？？

【参考方案1】：

很有可能它是来自项目根目录的npm start。

正确打包的模块将在package.json 中配置一些node scripts。习惯上使用start 作为运行开发环境的脚本，尽管有些可能使用build、dev 或其他名称。

【讨论】：

基本上我来自创意背景，12 年前进入前端设计和开发领域，因此在 html5 CSS3 和一些 javascript 和 jquery 方面有商业经验。在过去的 3 年中，我对 UX 战略和创意的更深入方面产生了兴趣，我喜欢跟上新兴技术，因此我正在学习创建网络应用程序与 react.js 以及该领域 Web 组件的理论和未来实现。

所以来自前端设计和开发方面，目前我正在尝试如何创建文件夹结构，并基本上使用 react.js 在node.js 服务器与 HTML 和 CSS 相结合，从技术上讲，这些语言如何在开发和生产级别上协同工作以创建成品，或者至少是进一步开发的原型。

很高兴看到一个使用示例项目概述整个过程的教程，通过使用 node 和 react 教授构建前端原型的典型过程到这个过程之间的转移。

是的，有很多习语不能很好地传达给初学者。如果您有任何问题，我会帮助管理一个非常友好的 React 开发者社区，join.reactiflux.com

好的，谢谢卡尔。刚刚加入。我将继续我正在编写的教程，如果我有任何进一步的问题，请在这里或那里提出。谢谢。

【参考方案2】：

听起来您正在关注official React tutorial，在这种情况下，启动各种包含的服务器实现的说明是here。

【讨论】：

谢谢瑞克，现在明白了 :-)

【参考方案3】：

我使用 Node 来运行服务器。我遵循的步骤是：

我从运行服务器部分下载了 zip 包 here

我打开了链接：http://localhost:3000/

我打开了 Node.js 命令提示符并导航到下载的 压缩项目。来自节点示例here：

只需键入示例中的命令： 首先 npm install 然后 节点服务器.js。

请看下面的屏幕截图：

当我刷新 localhost 网页时，我看到以下内容：

【讨论】：

谢谢格洛丽亚，太好了。 :-)

【参考方案4】：

您可以运行以下任一命令来为您的 ReactJS 应用程序启动节点服务器：

npm 运行脚本start npm 运行start npm start

上述所有命令都是等效的，但人们更喜欢第三个，因为它是在键盘上键入的最短的。

这些命令中的start 参数映射到任何 ReactJS 应用程序的package.json 文件中的scripts 配置下的start 键。这是我的 hello-world 应用程序的示例 package.json 文件：

  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  ,
  "devDependencies": 
    "react-scripts": "0.9.5"
  ,
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  

可以看到react-scripts start写在start键前面。因此，当我们在控制台上运行npm start 命令时，react-scripts start 命令将被触发。

【参考方案5】：

这里是官方安装过程：link，官方推荐tutorials

# install react cli
npm install -g create-react-app

# create app
create-react-app my-react-app-name

# go to project folder
cd my-react-app-name

# install dependencies
npm install

# start live server
npm start

输出：

$ You can now view my-react-app-name in the browser.

$ Local:            http://localhost:3000/
$ On Your Network:  http://192.168.0.105:3000/

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

【讨论】：

谢谢。这对逐步设置很有帮助