React入門1.5: 環境搭建 [本地版本-番外篇]

2 年 ago
科, 颖
3 minutes

首先

我希望通过对React的多次文章总结，既作为我个人的复习，又作为备忘录的意义，来整理React相关的文章。

本文的目标是什么?

这次作为额外篇，我们将进行在本地环境下搭建React应用的开发环境。

系列清单

    1. React入门1：环境搭建 [在线版]

 

    1. React入门1.5：环境搭建 [本地版-番外篇] (本次)

 

    1. React入门2：棋盘的创建

 

    1. React入门3：实现互动功能

 

    1. React入门4：重构 [提升组件篇]

 

    1. React入门5：重构 [互动功能篇]

 

    1. React入门6：实现手番

 

    1. React入门7：判断游戏胜负

 

    1. React入门8：实现文本功能

 

    1. React入门9：时光旅行（1）

 

    1. React入门10：时光旅行（2）

 

    React入门11：时光旅行（3）

建立环境

    オンラインエディタ CodeSandbox を使った方法はコチラから

 

这次我们将介绍在本地环境中创建 React 项目的两种方法。

    • 方法A: 手動

 

    • ファイルの作成とコマンド操作によって、プロジェクトを自力で作成していきます。

 

    • 方法B: 自動

 

    1つのコマンドを実行することで、公式が提供するプロジェクトのひな型を作成します。

特点。

在A方法中，需要自己完成多个步骤，例如创建文件和操作命令，所以可能需要一些时间。但是，通过目录可以很容易地查看工作量并且并不是很多。通过这种方法，可以用最小的文件数来构建项目。

在B方法中，你只需要运行一个命令就能创建项目的目录。因此，你可以轻松地搭建开发环境。另外，它还有一个好处就是官方提供支持。但缺点是，会创建一些不必要的文件，因此整理项目会有些麻烦。

哪个更好呢？

在我的個人觀點中，我認為最好的方法是先以方法A來開發，同時學習React項目的結構，待熟悉一定程度後再轉向方法B。

A 的方式

请移动到您想要存放项目的目录，并按照以下步骤进行操作。为了方便说明，在这里我们将使用 sample_a 文件夹作为操作示例。

创建配置文件

在终端中，使用以下命令创建 package.json 文件。也可以通过操作资源管理器来创建文本文件。

npm init -y

package.json是一个用于管理项目配置和依赖关系列表的文件。根据这个文件，将进行包的安装。

目前的目录结构如下所示。新创建的项目将以(new)标注。

sample_a               # プロジェクト全体の管理フォルダ
- package.json         # (new) 設定ファイル

编辑配置文件

让我们使用您喜欢的编辑器将 package.json 文件更改为以下内容。

{
  "name": "react-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
    },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

引入与React相关的包。

以下是要安装的软件包。

パッケージ機能reactReact ライブラリのエントリポイントreact-domReactにおける仮想DOMの提供react-scriptswebpackとbabelの内部的動作

请使用以下命令安装这些软件包。由于需要一些时间，请在此期间继续下一步骤。

npm install react react-dom react-scripts

我們將對新添加的文件夾和文件進行說明。

    • node_modules フォルダ

 

    • プロジェクトにおいて依存関係のパッケージがインストールされる場所です。このフォルダには、プロジェクトが依存する外部のパッケージやモジュールが格納され、プロジェクトの実行やビルドに必要なコードやリソースが含まれています。通常、このフォルダは手動で管理する必要はなく、package.json および package-lock.json ファイルに基づいて、自動的にパッケージがインストールされます。

 

    • package-lock.json ファイル

 

    プロジェクトにおいて依存関係のバージョンを確定するためのものです。具体的には、プロジェクトにインストールされた各パッケージの正確なバージョン、およびその依存関係を保存します。

安装完成后的目录结构如下所示。

sample_a               # プロジェクト全体の管理フォルダ
- package.json         # 設定ファイル
- package-lock.json    # (new) パッケージの記録ファイル
- node_modules         # (new) パッケージの管理フォルダ(中身は省略)

创建文件

请按照以下方式创建一个public文件夹和一个src文件夹。关于每个文件夹的详情将在后面进行说明。

sample_a               # プロジェクト全体の管理フォルダ
- package.json         # 設定ファイル
- package-lock.json    # パッケージの記録ファイル
- node_modules         # パッケージの管理フォルダ(中身は省略)
- public               # (new) 後述
- src                  # (new) 後述

公共文件夹

这是用来存放静态资产（如图像、字体、外部脚本等）的地方。

index.html 文档

让我们在public文件夹中创建一个名为index.html的文件，内容如下。

<!DOCTYPE html>
<html lang="ja">

  <head>
    <!-- 文書の文字エンコーディングをUTF-8に指定 -->
    <meta charset="UTF-8">
    <!-- ページのタイトルを指定 -->
    <title>React練習</title>
  </head>

  <body>
    <!-- Reactアプリケーションが描画されるルート要素の定義 -->
    <div id="root"></div>
  </body>

</html>

请关注位于元素下的

元素。这个

元素的id值为root。稍后，我们将通过JavaScript获取这个元素，并使用React来实现程序。

现在的目录结构如下所示。

sample_a               # プロジェクト全体の管理フォルダ
- package.json         # 設定ファイル
- package-lock.json    # パッケージの記録ファイル
- node_modules         # パッケージの管理フォルダ(中身は省略)
- public               # 静的アセットの管理フォルダ
  - index.html         # (new) Webページの主要コンテンツ
- src                  # 後述

源文件夹

这是存放React应用程序源代码的位置。在这里保存组件、样式、图片等文件。

index.js 文件

在src文件夹中，创建一个名为index.js的文件。该文件将成为React应用程序的入口点（程序的启动位置）。

// ReactおよびReactDOMをインポート
import React from 'react';
import ReactDOM from 'react-dom/client';

// Appコンポーネントを'./App'からインポート
import App from './App';

// ルート要素を特定のDOM要素に関連付ける
const root = ReactDOM.createRoot(document.getElementById('root'));

// ルート要素にReactコンポーネントを描画する
root.render(
  // React.StrictModeコンポーネントでアプリケーションをラップする
  <React.StrictMode>
    {/* Appコンポーネントを描画 */}
    <App />
  </React.StrictMode>
);

当查看root.render()的参数时，我们可以确切地看到与JavaScript有些不同，它以类似HTML的方式进行编写。这种语法被称为React特有的JSX语法。

简要概述如下：通过查找位于index.html中的

元素（id=root），然后实现后续操作中所述的App.js文件中的App()组件。

App.js 文件

我们将在 src 文件夹中创建一个名为 App.js 的文件，内容如下。在这个文件中，我们将编写 App 组件。

// Appコンポーネントの定義
function App() {
  return (
    <div className="App">
      <h1>Hello, world!</h1>
    </div>
  );
}

// Appコンポーネントを他のファイルで利用できるようにエクスポート
export default App;

你可以确认在这里，组件App()的return语句中也有JSX语法。

通过最后的 “export default App;”，这个文件在被导入时，设置返回组件 App()。

项目创建已经完成。最终目录结构如下所示。

sample_a               # プロジェクト全体の管理フォルダ
- package.json         # 設定ファイル
- package-lock.json    # パッケージの記録ファイル
- node_modules         # パッケージの管理フォルダ(中身は省略)
- public               # 静的アセットの管理フォルダ
  - index.html         # Webページの主要コンテンツ
- src                  # ソースコード管理フォルダ
  - index.js           # (new) エントリポイント
  - App.js             # (new) コンポーネント

B方法

首先，请将当前目录切换到您想创建项目的目录中。
在终端中运行以下命令，将会为您创建一个React项目。

npx create-react-app プロジェクト名

项目名称可以使用任意字符串进行创建，但不能包含大写字母。这里以示例命名为sample_b。处理命令后，将在当前目录下创建一个名为sample_b的文件夹。下面是该文件夹的内容示例。

sample_b               # プロジェクト全体の管理フォルダ
- package.json         # 設定ファイル
- package-lock.json    # パッケージの記録ファイル
- README.md            # 
- .gitignore           # 
- .git                 # 
- node_modules         # パッケージの管理フォルダ(中身は省略)
- public               # 静的アセットの管理フォルダ
  - index.html         # Webページの主要コンテンツ
  - favicon.ico        # 
  - logo192.png        # 
  - logo512.png        # 
  - manifest.json      # 
  - robots.txt         # 
- src                  # ソースコード管理フォルダ
  - index.js           # エントリポイント
  - index.css          # 
  - App.js             # コンポーネント
  - App.css            # 
  - App.test.js        # 
  - reportWebVitals.js # 
  - setupTests.js      #

确认行动

让我们分别在A方法中的sample_a目录和B方法中的sample_b目录中打开终端并执行以下命令。

npm start

如果能够确认到以下这样的输出，那么就算是成功了。浏览器会自动启动，并且可以确认每种方法的操作结果。

Compiled successfully!

You can now view プロジェクト名 in the browser.

  Local:            http:// 省略
  On Your Network:  http:// 省略

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

方法A的执行结果

你可以确认页面上显示了如下内容：“你好，世界！”

image.png

B 方法的执行结果

您可以在以下页面上看到React标志以顺时针旋转的方式。

output_video.gif

最后

这次，我们将总结关于在本地环境中进行环境构建的外传篇。在主要系列中，我们总结了有关React官方教程的内容。如果方便的话，请从系列列表中进行确认。

bannerAds