Jupyter AI

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

📅 发表日期: 2024年8月10日

分类: ⚛️React 入门

👁️阅读: --

在上一章中,我们介绍了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(长期支持)版本,因为它更稳定且适合大多数应用。

Node.js下载页面

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应用。请继续关注!

⚛️React 入门 (滚动鼠标查看)