服务器上面安装nodejs react

1、nvm管理nodejs

2、修改端口

/node_modules/react-scripts/scripts/start.js

javascript 复制代码
// 这是start.js部分源码
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';

// 将3000修改自己需要的端口号
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 9527;
const HOST = process.env.HOST || '0.0.0.0';

3、

下面是一个简单的步骤来开始使用 React:

  1. 确保你的计算机上已安装 Node.js。你可以在命令行中输入 node -v 来检查是否已安装。

  2. 打开命令行工具,并进入你想要创建项目的目录。

  3. 运行以下命令来创建一个新的 React 项目:

    bash 复制代码
    npx create-react-app my-app

    这将使用 Create React App 工具来快速生成一个基本的 React 项目结构。

  4. 进入新创建的项目目录:

    bash 复制代码
    cd my-app
  5. 启动开发服务器:

    bash 复制代码
    npm start

    这将启动一个本地开发服务器,并在默认浏览器中打开项目。

现在你已经成功创建了一个 React 项目,可以开始编写代码了。你可以在 src 目录中找到 App.js 文件,这是应用程序的主要组件。你可以编辑该文件并查看实时更新的效果。

React 的核心概念之一是组件。一个组件是一个独立的、可重用的代码块,用于构建用户界面。你可以创建自己的组件,并在需要的地方使用它们。

例如,你可以创建一个简单的 Hello 组件,在 src 目录下创建一个新文件 Hello.js,并添加以下代码:

jsx 复制代码
import React from 'react';

function Hello() {
  return <h1>Hello, React!</h1>;
}

export default Hello;

然后,在 App.js 中使用这个组件:

jsx 复制代码
import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}

export default App;

保存文件后,你将在浏览器中看到更新后的界面,显示 "Hello, React!"。

note

1 Installing the environment has wasted a lot of my time.

相关推荐
新中地GIS开发老师28 分钟前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang35 分钟前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_40 分钟前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含43 分钟前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端44 分钟前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友1 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
子兮曰2 小时前
npm workspace 深度解析:与 pnpm workspace 和 Lerna 的全面对比
前端·javascript·npm
颜酱2 小时前
用搬家公司的例子来入门webpack
前端·javascript·webpack