1、nvm管理nodejs
2、修改端口
/node_modules/react-scripts/scripts/start.js
// 这是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:
-
确保你的计算机上已安装 Node.js。你可以在命令行中输入
node -v
来检查是否已安装。 -
打开命令行工具,并进入你想要创建项目的目录。
-
运行以下命令来创建一个新的 React 项目:
npx create-react-app my-app
这将使用 Create React App 工具来快速生成一个基本的 React 项目结构。
-
进入新创建的项目目录:
cd my-app
-
启动开发服务器:
npm start
这将启动一个本地开发服务器,并在默认浏览器中打开项目。
现在你已经成功创建了一个 React 项目,可以开始编写代码了。你可以在 src
目录中找到 App.js
文件,这是应用程序的主要组件。你可以编辑该文件并查看实时更新的效果。
React 的核心概念之一是组件。一个组件是一个独立的、可重用的代码块,用于构建用户界面。你可以创建自己的组件,并在需要的地方使用它们。
例如,你可以创建一个简单的 Hello 组件,在 src
目录下创建一个新文件 Hello.js
,并添加以下代码:
import React from 'react';
function Hello() {
return <h1>Hello, React!</h1>;
}
export default Hello;
然后,在 App.js
中使用这个组件:
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 windows 安装 nodejs
nvm for windows download adress
要在 Windows 上使用 NVM (Node Version Manager) 管理 Node.js 版本,你首先需要确保安装了 NVM for Windows。一旦安装了 NVM for Windows,你就可以轻松切换 Node.js 的版本,以支持不同的项目,包括使用 React 的项目。
支持 React 的 Node.js 版本
React 本身对 Node.js 的版本要求不是特别严格。通常,使用 Node.js 的 LTS (长期支持) 版本是一个好主意,因为它们提供了稳定性和较长时间的支持。截至我最后更新的时间(2023年4月),Node.js 的最新 LTS 版本是 16.x 和 14.x。任何这些版本或更高版本都应该很好地支持 React 和其他现代 JavaScript 库或框架。
使用 NVM 安装 Node.js
-
安装 NVM for Windows:
- 如果你还没有安装 NVM for Windows,请访问 NVM for Windows 的 GitHub 页面下载并安装它。
-
打开命令提示符或 PowerShell:
- 安装完 NVM for Windows 后,打开命令提示符或 PowerShell。
-
列出可用的 Node.js 版本:
- 执行以下命令来查看所有可安装的 Node.js 版本:
nvm list available
- 执行以下命令来查看所有可安装的 Node.js 版本:
-
安装 Node.js:
- 根据你的需求选择一个版本安装。例如,要安装 Node.js 的最新 LTS 版本,可以使用:
nvm install 16.13.0
- 你可以替换
16.13.0
为你选择的任何版本号。
- 根据你的需求选择一个版本安装。例如,要安装 Node.js 的最新 LTS 版本,可以使用:
-
使用指定的 Node.js 版本:
- 安装完所需的 Node.js 版本后,使用以下命令来切换到该版本:
nvm use 16.13.0
- 安装完所需的 Node.js 版本后,使用以下命令来切换到该版本:
-
验证 Node.js 版本:
- 验证当前使用的 Node.js 版本,确保切换成功:
node -v
- 验证当前使用的 Node.js 版本,确保切换成功:
这样,你就可以使用 NVM 管理多个 Node.js 版本,为不同的项目选择最合适的版本。如果你打算使用最新的 React 功能,建议使用 Node.js 的最新 LTS 版本以确保最佳的兼容性和性能。
2 淘宝镜像
npm config set registry https://registry.npmmirror.com