超级详细！Ract配置和运行教程（vscode + nodeJS + npm +yarn）

大家好，欢迎来到IT知识分享网。

3D-APP安装教程

为了让学生手动操作，结果网上教程写的不怎么滴，写的好又要付费，只能自己写了！！！（专业领域：计算机视觉，数字孪生，web小白！路过大佬请指教！）

本教程包括：Ract.js node.js npm yarn简介；安装方法；一个Ract案例运行过程。
有其他问题或者需要案例代码可以给我留言。

Ract框架

react官网

https://react.docschina.org/docs/getting-started.html

简介：

React（也被称为 React.js 或 ReactJS）是一个用于构建用户界面的 JavaScript 库。它由 Facebook 团队开发和维护，并且已经成为构建现代 Web 应用程序的流行选择之一。

React 的主要特点包括：

1. 组件化开发：React 的核心思想是将 UI 拆分为独立的、可复用的组件。每个组件都有自己的状态（state）和属性（props），并且可以根据这些状态和属性来渲染相应的界面。
2. 虚拟 DOM：React 使用虚拟 DOM（Virtual DOM）来高效地更新和渲染界面。虚拟 DOM 是一个轻量级的 JavaScript 对象，表示真实 DOM 的副本，并且只在需要更新时才会进行操作，从而提高了性能。
3. 单向数据流：React 采用了单向数据流的模型，数据从父组件向子组件传递，并且子组件不能直接修改父组件的数据。这种数据流的模型可以使应用的状态更加可控，容易追踪数据的变化。
4. 生命周期方法：React 组件具有一系列的生命周期方法，例如 componentDidMount、componentWillUnmount 等，可以在不同的阶段执行相应的代码逻辑，方便处理副作用、数据获取、组件更新等操作。
5. 使用 JSX 进行模板编写：React 提供了 JSX 语法，对于构建 UI 组件来说更加直观和易读。JSX 允许你在 JavaScript 代码中以类似 XML 的方式编写 HTML 模板。

React 广泛应用于构建 Web 应用程序和移动应用程序（使用 React Native）。它的兴起促使了许多配套工具和库的发展，形成了强大的 React 生态系统，使开发者可以更高效地构建现代、交互式的用户界面。

安装过程

一、过程概述

安装组件主要包括：VSCode + nodeJS (node, npm, yarn)

编译过程主要包括：依赖包安装，运行

二、 VScode

1. 简介

Visual Studio Code（简称为 VS Code）是一款由 Microsoft 开发的免费、开源的代码编辑器。它被广泛用于 Web 开发和其他编程任务，并且得到了许多开发者的喜爱和推崇。

以下是一些 VS Code 的特点和功能：

1. 轻量级但功能强大：VS Code 是一个轻量级的编辑器，具有丰富的功能。它提供了代码高亮、智能感知、调试支持、Git 版本控制集成、插件扩展等常用的编辑器功能，并且可以根据个人需求进行定制。
2. 跨平台支持：VS Code 可以在多个操作系统上运行，包括 Windows、macOS 和 Linux。这使得开发者可以在不同的环境中保持一致的开发体验。
3. 内置终端：VS Code 内置了一个集成终端，可以在编辑器中直接执行命令和运行脚本，避免切换窗口的麻烦。
4. 丰富的扩展生态系统：VS Code 提供了广泛的插件和扩展，使开发者能够根据自己的需求来扩展和定制编辑器。这些插件可以增加语言支持、主题样式、调试工具、项目管理等功能。
5. 强大的调试支持：VS Code 集成了调试功能，支持多种编程语言和调试器。它提供了代码断点、变量查看、单步调试等常用的调试功能，帮助开发者快速发现和解决问题。
6. 智能感知和提示：VS Code 提供了智能代码补全、语法检查、错误提示等功能，可以提高开发效率和代码质量。
7. 版本控制集成：VS Code 内置了 Git 版本控制集成，可以直接在编辑器中进行代码提交、拉取和管理分支等操作。

总体而言，Visual Studio Code 是一款功能丰富、易于使用的跨平台代码编辑器，为开发者提供了许多便捷的工具和功能来提高开发效率和舒适度。

目前所有的开发几乎都可以使用vscode来完成哦！

2. 安装

以下是在 Windows、macOS 和 Linux 上安装 Visual Studio Code（VS Code）的一般步骤：

（1）Windows（本案例使用）：

1. 打开 VS Code 的官方网站：https://code.visualstudio.com/。
2. 下载适用于 Windows 的 VS Code 安装程序（.exe 文件）。
3. 双击下载的安装程序文件。
4. 根据安装程序的指示，选择安装选项并完成安装。

（2）macOS：

1. 打开 VS Code 的官方网站：https://code.visualstudio.com/。
2. 下载适用于 macOS 的 VS Code 安装程序（.dmg 文件）。
3. 双击下载的安装程序文件。
4. 将 Visual Studio Code 图标拖动到 “Applications” 文件夹中。

（3）Linux

（不同的 Linux 发行版可能有不同的安装方法。以下是通用的方法）：

1. 打开 VS Code 的官方网站：https://code.visualstudio.com/。
2. 根据你的 Linux 发行版，选择适合你系统的安装包（deb 或 rpm 文件），并下载该文件。
3. 使用包管理器或命令行工具来安装下载的包。例如，在 Ubuntu 上，你可以使用以下命令进行安装：

   sudo dpkg -i <package-file-name>.deb 

   或在 Fedora 上，可以使用以下命令：

   sudo dnf install <package-file-name>.rpm 

以上是一般的安装步骤，具体可能会因操作系统版本和设置而有所不同。请始终参考官方文档和指南，以获得最准确的安装说明。

安装完成后，你可以在计算机的应用程序列表中找到并启动 Visual Studio Code。

三、NodeJS（Node.js + npm + yarm）

1. Node.js

(1) 简介

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，用于在服务器端运行 JavaScript。它允许开发者使用 JavaScript 编写服务器端应用程序，从而实现前后端代码的统一化。

以下是 Node.js 的一些特点和功能：

1. 非阻塞式 I/O：Node.js 基于事件驱动和非阻塞式 I/O 模型，使得它能够高效处理大量并发请求。这意味着它可以在一个线程中同时处理多个请求，而不会因为某个请求的阻塞导致整个程序被阻塞。
2. 轻量和高性能：Node.js 的设计目标之一是提供轻量级且高性能的运行环境。它的模块化架构和异步模型可以使得应用程序具有快速响应和高吞吐量的特点。
3. 服务器端开发：Node.js 主要用于构建服务器端应用程序。它提供了许多用于处理 HTTP 请求、文件系统操作、数据库访问等常见任务的内置模块。
4. NPM 包管理器：Node.js 配套的 NPM（Node Package Manager）是一个强大的包管理工具，提供了各种开源模块和库，可以方便地在你的应用程序中引入、管理和共享代码。
5. 跨平台支持：Node.js 可以在多个操作系统上运行，包括 Windows、macOS 和 Linux，使得开发者可以在不同的环境中保持一致的开发体验。

Node.js 的使用场景广泛，常用于构建 Web 服务器、实时应用程序、命令行工具以及后端 API 服务等。它已经成为一个活跃的开发社区，并且有大量的开源模块和工具可供使用。

(2) 安装 Node.js

注意：以下步骤适用于 Windows、macOS 和 Linux 操作系统。目前能支持React.js最高是v16 node-v16.20.1-x64.msi ，现在Node.JS最新版本是v18。不要下载错误了！

• 访问 Node.js 的官方网站（https://nodejs.org/）。
• 下载适合你操作系统的稳定版 Node.js 安装程序。
• 双击下载的安装文件，并按照向导进行安装。
• 完成安装后，可在终端（命令提示符）或终端窗口中使用 node -v 命令验证 Node.js 是否正确安装。此命令将显示安装的 Node.js 版本。

特别注意！

在实际运行中有两种选择：

1. 不设置系统变量，不使用全局模式，在vscode的超级终端里面直接运行，这样所有的文件都会直接下载到所在的目录，比较适合从0开始搭建项目，或者适用于简单跑一下别人的案例，若需要开发多个项目则不推荐使用。安装后保证在终端输入node -v npm -v yarn -v能够正确显示版本号就可以了。如果显示不了，则修改环境变量。Windows系统的同学请使用修改环境变量的方式，Linux/Mac系统的一键操作可能会比较流畅不存在什么问题。
2. 设置系统环境变量，使用全局安装模式。全局安装模式的好处在于一劳永逸，安装一次以后所有Node.js项目都可以使用公用包，坏处就是大家都用一种版本不同众口难调哦~此外，Windows系统的同学建议使用这种方法。（建议Windows同学服用）

2. NPM

（1）简介

NPM（全称为 Node Package Manager）是一个用于管理和共享 JavaScript 代码包（包括库、工具、框架等）的默认包管理器。它是 Node.js 安装的一部分，并且自动随着 Node.js 的安装一起被安装。

以下是 NPM 的一些主要功能和特点：

1. 包管理：NPM 允许你方便地下载、安装、更新和删除 JavaScript 代码包。你可以通过 NPM 在项目中引入其他开发者编写的模块，便于复用和共享代码。
2. 依赖管理：NPM 能够自动解析和管理项目所需的依赖关系。你可以在项目的 package.json 文件中列出项目依赖的模块及其版本要求，然后使用 NPM 来安装指定版本的依赖。
3. 版本控制：NPM 具有强大的版本控制功能。每个模块都有自己的版本号，并且可以根据 semver（语义化版本）规范进行版本管理。这使得你可以精确地指定所需的模块版本，以确保代码的可靠性和稳定性。
4. 脚本运行：NPM 允许你在项目中定义和运行脚本命令。通过在 package.json 文件的 “scripts” 字段中配置脚本命令，你可以轻松地运行自定义的构建、测试、部署脚本等。
5. 模块发布：NPM 提供了一个开放的平台，允许开发者将自己编写的 JavaScript 模块发布到 NPM 的包仓库中，供其他开发者下载和使用。

通过 NPM，开发者可以轻松地管理项目的依赖、共享和发布自己的代码包，提高开发效率并促进代码复用。

要使用 NPM，在安装了 Node.js 的情况下，你可以在终端中使用 npm 命令来执行各种 NPM 相关的操作，如安装依赖、更新包、运行脚本等。同时，项目中会生成一个名为 package.json 的文件，其中包含了项目的元数据、依赖信息和脚本配置等内容。

（2）安装 NPM

（Node.js 默认会一起安装 NPM）：

1. 在终端（命令提示符）或终端窗口中，使用 npm -v 命令验证 NPM 是否成功安装。此命令将显示安装的 NPM 版本。
2. 如果没有成功，请设置环境变量。以下为Window系统环境变量设置的参考方法
   • 设置缓存目录和全局目录（非必要）

     在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，不方便管理且占用C盘空间。可以自己在任意喜欢的地方建立缓存目录并且设置它。

     npm config set prefix "D:\nodejs\node_global"[自定义目录] npm config set cache "D:\nodejs\node_cache"[自定义目录] 

   ​ 如果搞错了，就在C盘用户下面找到一个叫做.npmrc的文件，删掉重来，或者用Nodepad自己手动改。

   • 设置系统变量
     • 在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”， 值为*“D:\Program Files\nodejs\node_modules[你自己的路径]”*，并再PATH中添加%NODE_PATH%
     • 在编辑用户变量里的Path，将其中默认的C:\Users\用户名\AppData\Roaming\npm改成D:\nodejs\node_global【自己global路径】，如果第一步没有修改全局目录，则不用做。
     • 再测试一下npm -v 有没得成功。没有成功看看D:\Program Files\nodejs\有没有，正常情况安装NodeJS会自动写入这个路径，没有就再折腾一下环境变量，直到成功为止。

3. YARN

（1）简介

Yarn 是一个包管理器，用于管理项目的依赖项（dependencies）。类似于 npm，Yarn 提供了一种方便的方式来下载、安装、更新和移除项目所需的软件包。

Yarn 相对于 npm，具有以下特点：

1. 快速速度：Yarn 使用并行下载的方式来加速包的安装过程，并且具有本地缓存功能，可以更快地获取已经下载过的包。
2. 确定性版本控制：Yarn 可以生成 yarn.lock 文件来确保每个开发者都使用相同的软件包版本，以避免因为不同的包版本导致的问题。
3. 增强的安装过程：Yarn 支持交互式的界面，可以清晰地展示正在进行的安装过程，并提供更详细的错误提示信息。
4. 更好的网络稳定性：当网络连接不稳定时，Yarn 会自动重试失败的请求，并且有更好的错误处理机制。

要使用 Yarn，你需要先安装 Yarn 工具。你可以在 Yarn 的官方网站上找到适合你操作系统的安装包，然后按照步骤进行安装。安装完毕后，你可以在终端（Terminal）中使用 yarn 命令来操作你的项目。

例如，你可以使用 yarn init 命令初始化一个新的项目，使用 yarn add <package> 命令来安装一个包，使用 yarn start 命令启动你的项目等。

Yarn 对于 JavaScript 和前端开发非常流行，它提供了一种更好的包管理体验，并受到广大开发者的欢迎。

（2）安装 Yarn

可以直接从官网上下载，这里我们就直接用npm来安装yarn。

npm install -g yarn --registry=https://registry.npm.taobao.org 

后续使用yarn来下载管理包，可以修改一下源：

yarn config set registry https://registry.npm.taobao.org -g 

此外，也可以和 NPM安装一样，设置缓存目录和全局目录

yarn config set prefix D:\Program\nvm\yarn // 设置bin路径 yarn config set global-folder D:\Program\nvm\yarn\yarn_global // 设置全局安装路径 yarn config set cache-folder D:\Program\nvm\yarn\yarn_cache // 设置全局缓存路径 

下载好以后应该在D:\Program Files\nodejs\node_global里面，不用另外设置环境变量。运行一下 yarn -v能不能成功，成功不了就再折腾一下环境变量。

编译过程

在vscode里面 yarn start 如果显示错误，使用管理员权限打开vosde。在终端执行，（终端快捷键ctrl + `）

Set-ExecutionPolicy RemoteSigned 

再打

yarn start 

React App

就成功了！

Node 版本过高无法使用的解决方法：

在运行前命令行打：

set NODE_OPTIONS=–openssl-legacy-provider

或者修改package.jason文件

 "scripts": { "start": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts start ", "build": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" 

]