yarn 安装react

原创

mob64ca12e58adb 2025-02-18 06:17:30 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12e58adb的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 Yarn 安装 React 的完整指南

在现代前端开发中，React 已成为非常受欢迎的库，用于构建用户界面。而 Yarn 是一个流行的 JavaScript 包管理工具，因其快速性与简易性受到开发者的青睐。在这篇文章中，我们将探讨如何使用 Yarn 安装 React，并提供详细的步骤和代码示例。

什么是 Yarn？

Yarn 是 Facebook 开发的一个 JavaScript 包管理工具，其特点是速度快、依赖管理清晰，还有离线模式等优势。Yarn 使用的是 lock 文件机制，可以确保不同的开发环境中依赖版本一致。

如何安装 Yarn

在使用 Yarn 之前，你需要确保你的开发环境中安装了 Node.js。可以通过以下命令来检查 Node.js 是否已安装：

node -v

如果未安装，可以从 [Node.js 官网]( 下载并安装最新版本。

安装完 Node.js 后，你可以通过 npm 安装 Yarn：

npm install --global yarn

创建新项目

使用 Yarn 创建新项目十分简单。你可以通过下面的命令创建一个新的文件夹并初始化一个新的 Yarn 项目：

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

此时，将会在 my-react-app 文件夹中生成一个 package.json 文件。

安装 React

现在，我们已经准备好安装 React 了。执行以下命令来安装 React 及其相关依赖：

yarn add react react-dom

这个命令将会安装 React 和 ReactDOM，并自动更新 package.json 和 yarn.lock 文件，以确保项目中所有的依赖版本一致。

创建基本的 React 组件

在我们的项目中创建一个简单的 React 组件，以展示 React 的使用。首先，我们需要在项目目录下创建一个新的文件夹来保存组件，例如 src：

mkdir src

然后，在 src 文件夹中创建一个名为 App.js 的文件，并添加如下代码：

import React from 'react';

const App = () => {
  return (
    <div>
      欢迎使用 React
      <p>这是一个使用 Yarn 安装的基本 React 应用。</p>
    </div>
  );
}

export default App;

接下来，我们需要用一个入口文件来渲染这个组件。在 src 文件夹中创建一个名为 index.js 的文件，代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

设置 HTML 文件

为了能够展示我们的 React 组件，我们需要一个简单的 HTML 文件。你可以在项目的根目录下创建一个 index.html 文件，内容如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的 React 应用</title>
</head>
<body>
    <div id="root"></div>
    <script src="./src/index.js"></script>
</body>
</html>

启动开发服务器

为了查看我们创建的 React 应用，可以使用 [webpack]( 或 [Parcel]( 等工具来构建和启动开发服务器。这里我们使用 parcel 来简化这个过程。首先，安装 Parcel：

yarn add --dev parcel

接下来，可以在 package.json 文件中添加一个新的脚本，方便启动服务器：

"scripts": {
  "start": "parcel index.html"
}

现在，我们可以通过以下命令启动开发服务器：

yarn start

访问 http://localhost:1234，你将看到 "欢迎使用 React" 的页面展示出来。

使用 Mermaid 绘制旅行图

在开发项目时，记录工作流程是很有帮助的。使用 Mermaid 的 journey 语法，我们可以绘制我们的 React 项目创建和运行的流程图：

journey
    title 创建并运行一个 React 应用
    section 环境准备
      安装 Node.js: 5: 用户
      安装 Yarn: 5: 用户
    section 创建项目
      创建新文件夹: 5: 用户
      初始化 Yarn 项目: 5: 用户
    section 安装依赖
      安装 React 和 ReactDOM: 4: 用户
    section 编写代码
      创建组件 App.js: 4: 用户
      创建入口文件 index.js: 4: 用户
      创建 HTML 文件: 4: 用户
    section 启动应用
      启动开发服务器: 5: 用户
      访问应用: 5: 用户