4 创建第一个React应用之安装Node.js和npm

在上一章中，我们介绍了React的基本概念及其优点，为了能够快速构建我们的第一个React应用，我们需要安装一些必要的工具。在本章中，我们将会详细讲解如何安装Node.js和npm（Node Package Manager），这两者是开发React应用所必需的环境。

什么是Node.js？

Node.js 是一个基于Chrome V8引擎的JavaScript运行时，可以帮助我们在服务器端执行JavaScript代码。它允许我们使用JavaScript构建网络应用，而不仅限于浏览器。Node.js 提供了许多功能，包括处理HTTP请求、文件处理等，使得JavaScript能够在服务器端运行。

什么是npm？

npm 是Node.js的包管理器，使得开发者能够轻松地下载、安装、管理和分享JavaScript库和工具。在React开发中，我们将会依赖npm来安装React及其相关的依赖包。

安装Node.js和npm

步骤如下：

1. 下载Node.js

前往 Node.js官网 下载适合你操作系统的Node.js安装包。我们推荐选择LTS（长期支持）版本，因为它更稳定且适合大多数应用。

2. 安装Node.js

• Windows: 双击下载的.msi文件，按照提示完成安装。请确保在安装过程中选择了 Add to PATH 的选项。
• macOS: 你可以使用下载的.pkg文件进行安装，也可以通过Homebrew来安装。使用命令如下：

  brew install node

• Linux: 你可以通过包管理器直接安装，比如：

  sudo apt install nodejs npm

3. 验证安装

安装完成后，打开终端（或命令提示符），可以使用以下命令检查是否成功安装Node.js和npm：

node -v
npm -v

如果安装成功，你应该会看到Node.js和npm的版本号。

4. 了解npm基本命令

在安装完成后，我们需要熟悉一些基本的npm命令，以便后续使用：

• npm init: 初始化一个新的Node.js项目，创建一个package.json文件。
• npm install <package-name>: 安装一个依赖包。例如，安装React：

  npm install react

• npm uninstall <package-name>: 卸载一个依赖包。
• npm update: 更新项目中已安装的所有包。

实际案例：创建一个简单的Node.js应用

下面我们通过一个简单的Node.js应用来演示如何使用npm来管理依赖。

1. 初始化项目
   在你的工作目录中打开终端，运行以下命令来创建新项目：

   mkdir my-react-app
   cd my-react-app
   npm init -y

   上述命令创建了一个名为my-react-app的文件夹并在其中初始化了一个新的Node.js项目，-y参数表示使用默认设置来生成package.json文件。

2. 安装Express（示例包）
   在项目目录中，安装Express库（一个Web框架）：

   npm install express

   你可以在package.json中查看到已经添加的依赖项。

3. 创建简单的服务器
   在项目根目录中创建一个 index.js 文件，输入以下代码：

   const express = require('express');
   const app = express();
   const port = 3000;
   
   app.get('/', (req, res) => {
       res.send('Hello World!');
   });
   
   app.listen(port, () => {
       console.log(`App running at http://localhost:${port}`);
   });

   运行该服务器：

   node index.js

   打开浏览器访问 http://localhost:3000，你应该可以看到 “Hello World!” 的消息。

结论

在本章中，我们安装了Node.js和npm，并了解了如何使用npm管理依赖包。掌握了这些基础工具之后，你将能够开始创建自己的React应用，并处理库的安装与管理。在下一章中，我们将进一步介绍如何使用这些工具创建我们的第一个React应用。请继续关注！