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

相关推荐
晚霞的不甘2 分钟前
Flutter for OpenHarmony3D DNA 螺旋可视化:用 Canvas 构建沉浸式分子模型
前端·数据库·经验分享·flutter·3d·前端框架
摘星编程1 小时前
React Native + OpenHarmony:Stepper步进器组件
javascript·react native·react.js
●VON1 小时前
React Native for OpenHarmony:简易计算器应用的开发与跨平台适配实践
javascript·react native·react.js
摘星编程8 小时前
OpenHarmony + RN:Placeholder文本占位
javascript·react native·react.js
a1117768 小时前
医院挂号预约系统(开源 Fastapi+vue2)
前端·vue.js·python·html5·fastapi
0思必得09 小时前
[Web自动化] Selenium处理iframe和frame
前端·爬虫·python·selenium·自动化·web自动化
摘星编程9 小时前
React Native鸿蒙:Loading加载动画效果
react native·react.js·harmonyos
行走的陀螺仪11 小时前
uni-app + Vue3编辑页/新增页面给列表页传参
前端·vue.js·uni-app
摘星编程11 小时前
React Native + OpenHarmony:Spinner旋转加载器
javascript·react native·react.js
We་ct11 小时前
LeetCode 205. 同构字符串:解题思路+代码优化全解析
前端·算法·leetcode·typescript