服务器上面安装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.

相关推荐
辻戋1 小时前
从零实现React Scheduler调度器
前端·react.js·前端框架
徐同保1 小时前
使用yarn@4.6.0装包,项目是react+vite搭建的,项目无法启动,报错:
前端·react.js·前端框架
Qrun2 小时前
Windows11安装nvm管理node多版本
前端·vscode·react.js·ajax·npm·html5
中国lanwp2 小时前
全局 npm config 与多环境配置
前端·npm·node.js
JELEE.3 小时前
Django登录注册完整代码(图片、邮箱验证、加密)
前端·javascript·后端·python·django·bootstrap·jquery
TeleostNaCl5 小时前
解决 Chrome 无法访问网页但无痕模式下可以访问该网页 的问题
前端·网络·chrome·windows·经验分享
前端大卫6 小时前
为什么 React 中的 key 不能用索引?
前端
你的人类朋友6 小时前
【Node】手动归还主线程控制权:解决 Node.js 阻塞的一个思路
前端·后端·node.js
小李小李不讲道理8 小时前
「Ant Design 组件库探索」五:Tabs组件
前端·react.js·ant design
毕设十刻8 小时前
基于Vue的学分预警系统98k51(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js