ViteでReactプロジェクトを設定する方法

著者はCode.orgを選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

通常、 Create React App を使用して新しいプロジェクトを作成できますが、140MBを超える依存関係をインストールするのに時間がかかる場合があります。 Vite は、31 MBの依存関係を使用する軽量ツールであり、新しいプロジェクトを開始する時間を節約できます。 Viteは、JavaScriptファイルへのリンクにブラウザーネイティブES（ ECMAScript ）モジュールも使用します。これは、ファイルが変更されるたびにバンドル全体を再構築することはありません。これらの違いにより、Viteを使用してReactアプリを作成、更新、構築する際のエクスペリエンスが向上します。

このチュートリアルでは、Viteツールを使用して新しいReactアプリの足場を作成します。新しいコンポーネント、CSS、およびイメージファイルを使用して基本的なアプリを作成し、展開用に最適化されたバンドルを準備します。

前提条件

このチュートリアルに従うには、次のものが必要です。

Node.jsバージョン12.2.0+がマシンにインストールされています。 Node.jsの最新バージョンは、Node.jsのインストール方法を使用してインストールできます。
マシンにインストールされているYarnパッケージマネージャーバージョン1.22.0+と、Yarnワークフローに精通していること。 Node.js用のYarnPackageManagerをインストールして使用する方法のステップ1でYarnをインストールします。
HTML、CSS、および最新のJavaScriptに精通していること。また、Reactで使用されている最新のJSを知るのにも役立ちます。
Reactシリーズのコーディング方法で学ぶことができるReactの基礎知識。
コンピューターと同じWifiネットワークに接続された携帯電話で、モバイルからアプリをプレビューします。

ステップ1—Viteプロジェクトを作成する

このステップでは、コマンドラインからViteツールを使用して新しいReactプロジェクトを作成します。 yarnパッケージマネージャーを使用して、スクリプトをインストールして実行します。

ターミナルで次のコマンドを実行して、新しいViteプロジェクトの足場を作成します。

yarn create vite

このコマンドは、リモートnpmリポジトリからVite実行可能ファイルを実行します。 Reactローカル開発環境の足場となるために必要なツールを構成します。最後に、プロジェクト設定と言語タイプのコマンドラインメニューが開きます。

スクリプトが終了すると、プロジェクト名を入力するように求められます。

Outputyarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vite@2.9.0" with binaries:
      - create-vite
      - cva
? Project name: » vite-project

プロジェクト名を入力します（このチュートリアルでは、例の名前としてdigital-ocean-viteを使用します）。

digital-ocean-vite

プロジェクト名を入力すると、Viteはフレームワークを選択するように求めます。

Output? Select a framework: » - Use arrow-keys. Return to submit.
    vanilla
    vue
>   react
    preact
    lit
    svelte

Viteを使用すると、Reactだけでなく、さまざまな種類のプロジェクトをブートストラップできます。現在、React、 Preact 、 Vue 、 Lit 、 Svelte 、および vanillaJavaScriptプロジェクトをサポートしています。

キーボードの矢印キーを使用して、reactを選択します。

Reactフレームワークを選択した後、Viteは言語タイプを選択するように促します。 JavaScriptまたはTypeScriptを使用してプロジェクトで作業できます。

矢印キーを使用してreactを選択します。

Output? Select a variant: » - Use arrow-keys. Return to submit.
>   react
    react-ts

フレームワークを設定すると、プロジェクトがスキャフォールディングされたという出力が表示されます。次に、ViteはYarnを使用して依存関係をインストールするように指示します。

OutputDone:
Scaffolding project in path\to\digital-ocean-vite...

Done. Now run:

  cd digital-ocean-vite
  yarn
  yarn dev

Done in 129.89s.

指示に従ってプロジェクトフォルダに移動します。

cd digital-ocean-vite

次に、yarnコマンドを使用して、プロジェクトの依存関係をインストールします。

yarn

すべての依存関係をインストールした後、依存関係のインストールにかかった時間が表示されます。

Outputsuccess Saved lockfile.
Done in 43.26s.

これで、Viteを使用して新しいReactプロジェクトをセットアップし、ReactとViteに必要なパッケージをインストールしました。

次に、開発サーバーを起動してアプリケーションをテストします。

ステップ2—開発サーバーを起動する

このステップでは、開発サーバーを起動して、すべてが機能していることを確認します。

digital-ocean-viteフォルダー内から、次のコマンドを使用して開発サーバーを実行します。

yarn run dev

このコマンドは、viteコマンドのエイリアスです。プロジェクトを開発モードで実行します。

次の出力が表示されます。

Output vite v2.9.1 dev server running at:
  > Local: http://localhost:3000/
  > Network: use `--host` to expose
  ready in 910ms.

次に、ブラウザを開いてhttp://localhost:3000/にアクセスします。

ポート3000で実行されている標準のReactプロジェクトが表示されます。

このアプリが実行されていることを確認すると、ReactwithViteが正常にインストールされています。次に、携帯電話からアプリをプレビューします。

ステップ3—携帯電話からアプリをプレビューする

Viteは、デフォルトでは開発アプリケーションをネットワークに公開しません。このステップでは、アプリをローカルネットワークに公開して、携帯電話からプレビューします。

ローカルネットワークでアプリを実行するには、最初に現在のサーバーを停止する必要があります。ターミナルで、CTRL+Cを使用して、現在実行中の開発サーバーを終了します。

次に、次のコマンドを使用してプロジェクトを実行します。

yarn run dev --host

--hostフラグは、アプリをローカルネットワークに公開するようにViteに指示します。

ターミナルに次の出力が表示されます。

Outputvite v2.9.1 dev server running at:
  > Network:  `http://ip_address:3000`
  > Network:  `http://ip_address:3000`
  > Local:    http://localhost:3000/
  > Network:  http://network_address:3000/
  ready in 477ms.

これらは、コンピュータネットワークまたはルーターに固有のローカルIPアドレスです。

携帯電話でブラウザを開き、上記のIPアドレスのいずれかを入力して、携帯電話からViteアプリのプレビューを表示します。

これで、開発環境でアプリを実行し、動作することを確認しました。

次のステップでは、Viteに付属のボイラープレートコードを削除します。

ステップ4—デフォルトのボイラープレートを取り外す

この手順では、Viteプロジェクトの定型ファイルをsrc/ディレクトリから削除します。これにより、新しいアプリケーションをセットアップできるようになります。また、現在のアプリのデフォルトのプロジェクト構造にも慣れることができます。

次のコマンドを使用して、src/ディレクトリの内容を表示します。

ls src/

出力には、使用可能なすべてのファイルが一覧表示されます。

OutputApp.css
App.jsx
favicon.svg
index.css
logo.svg
main.jsx

rmコマンドを使用して、単一のファイルを削除します。

rm src/App.css

main.jsxを除くすべてのファイルをsrc/ディレクトリから削除します。

ls src/コマンドを再度実行して、残りのファイルを確認します。

ls src/

これで、ディレクトリにはmain.jsxファイルのみが含まれます。

Outputmain.jsx

他のすべてのファイルを削除したので、main.jsx内の削除されたCSSファイルへの参照を削除する必要があります。

次のコマンドで編集するには、main.jsxを開きます。

nano src/main.jsx

強調表示された行を削除して、CSSファイルへの参照のリンクを解除します。

/src/main.jsx

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import "./index.css"

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

main.jsxファイルを保存して閉じます。

次のコマンドを使用して、src/ディレクトリの下にApp.jsxという名前の新しいファイルを作成します。

nano src/App.jsx

次のコードをApp.jsxファイルに追加します。

/src/App.jsx

export default function App() {
  return (
    <>
      <div>Hello World</div>
    </>
  );
}

このコードは、Appと呼ばれる新しい機能的なReactコンポーネントを作成します。 export defaultプレフィックスは、JavaScriptにこの関数をデフォルトのエクスポートとしてエクスポートするように指示します。関数本体には、「HelloWorld」テキストを含む<div>が含まれています。

App.jsxファイルを保存して閉じます。

次のコマンドを使用して、開発サーバーを再度実行します。

yarn run dev --host

次に、ブラウザでhttp://localhost:3000を開いて、「HelloWorld」テキストを表示する空白のページを表示します。

この手順では、Viteプロジェクトからいくつかのデフォルトファイルを削除しました。次に、新しいコンポーネント、CSSファイル、画像ファイルを使用して基本的なアプリを作成します。

ステップ5—基本的なアプリを作成する

このステップでは、基本的なアプリを作成して、コンポーネントを作成し、CSSファイルを追加し、画像にリンクします。

次のサブセクションでは、Reactアプリの新しいコンポーネントを作成します。

コンポーネントの作成

新しいコンポーネントを作成すると、プロジェクトにモジュール性が追加されます。すべてのコンポーネントをcomponentsディレクトリに追加して、整理された状態に保ちます。

次のコマンドを使用して、src/内にcomponentsという名前の新しいディレクトリを作成します。

mkdir src/components

次に、次のコマンドを使用して、src/components/ディレクトリ内にWelcome.jsxという名前の新しいファイルを作成します。

nano src/components/Welcome.jsx

Welcome.jsxファイルに次のコードを追加します。

/src/components/Welcome.jsx

export default function Welcome() {
  return (
    <>
      <div className="wrapper">
        <h1>Welcome To My App</h1>
        <p>This is going to be the coolest app in the world!</p>
      </div>
    </>
  );
}

上記のコードは、Welcomeと呼ばれる新しい機能的なReactコンポーネントを作成します。 export defaultプレフィックスは、JavaScriptにこの関数をデフォルトのエクスポートとしてエクスポートするように指示します。

クラス名がwrapperのdivタグを使用すると、CSSでこのセクションをターゲットにできます。 h1およびpタグは、画面にメッセージを表示します。

ファイルを保存して閉じます。

次に、App.jsxファイルでこの新しいコンポーネントを参照します。

次のコマンドでApp.jsxを開きます。

nano src/App.jsx

App.jsxの内容を、強調表示されたコードで更新します。

/src/App.jsx

import Welcome from "./components/Welcome"

export default function App() {
  return (
    <>
      <Welcome />
    </>
  )
}

このコード行は、Welcome.jsxをアプリにインポートし、新しいコンポーネントを関数本体にリンクします。終了したら、ファイルを保存して閉じます。

次のサブセクションでは、アプリに画像を追加します。

画像の追加

Reactでの画像の追加は、アプリ開発の一般的なユースケースです。

次のコマンドを使用して、src/ディレクトリの下にimgという名前の新しいディレクトリを作成します。

mkdir src/img

次のコマンドを使用して、src/imgディレクトリに移動します。

cd src/img

このサミーの画像をsrc/imgにダウンロードします。

wgetで画像をダウンロードします。

wget https://html.sammy-codes.com/images/small-profile.jpeg

次のコマンドで画像の名前を変更します。

mv small-profile.jpeg sammy.jpeg

このコマンドは、イメージファイルの名前をsmall-profile.jpegからsammy.jpegに変更します。これにより、後で参照しやすくなります。

次のコマンドを使用してルートディレクトリに戻ります。

cd ../../

次に、Welcome.jsxファイルを更新してこの画像にリンクします。ファイルを開きます。

nano src/components/Welcome.jsx

強調表示された行を追加して、Welcome.jsxファイルを更新します。

/src/components/Welcome.jsx

import Sammy from "../img/sammy.jpeg"

export default function Welcome() {
  return (
    <>
      <div className="wrapper">
        <h1>Welcome To My App</h1>
        <p>This is going to be the coolest app in the world!</p>
        <img src={Sammy} alt="Sammy Image" width={200} height={200} />
      </div>
    </>
  )
}

最初の行は、画像をモジュールとしてReactにインポートします。

関数本体内のもう1つの行は、新しい<img>タグを作成し、src属性をインポートしたばかりの画像コンポーネントにリンクします。 widthおよびheightプロップは、対応する画像属性を200ピクセルに設定します。

Welcome.jsxファイルを保存して閉じます。

次に、CSSをプロジェクトに追加します。

CSSの追加

このサブセクションでは、カスタムCSSファイルをプロジェクトに追加してアプリのスタイルを設定します。

次のコマンドを使用して、src/ディレクトリの下にcssという名前の新しいディレクトリを作成します。

mkdir src/css

次に、次のコマンドを使用して、src/cssの下にmain.cssという新しいCSSファイルを作成します。

nano src/css/main.css

main.cssファイルに次のコードを追加します。

/src/css/main.css

body {
  display: grid;
  place-items: center;
  background-color: #b4a7d6;
  font-family: Arial, Helvetica, sans-serif;
}

.wrapper {
  background-color: #fff9e6;
  padding: 20px;
  border-radius: 10px;
}

h1 {
  color: #8873be;
}

上記のCSSでは、グリッド表示を設定し、bodyの中央にアイテムを配置します。また、フォントファミリと背景色も設定します。

.wrapperクラスは、Welcome.jsxファイルのラッパーdivを選択します。このクラスのスタイルは次のようになります。

背景色を設定します。
20ピクセルのパディングを追加します。
10ピクセルの丸い角を追加します。

h1セレクターは、HTMLでタグをターゲットにし、その色を紫の色合いに設定します。

終了したら、main.cssファイルを保存して閉じます。

次に、Welcome.jsxコンポーネントから新しいCSSファイルを参照します。 Welcome.jsxファイルを開きます。

nano src/components/Welcome.jsx

強調表示された行でファイルの内容を更新します。

/src/components/Welcome.jsx

import Sammy from "../img/sammy.png"
import "../css/main.css"

export default function Welcome() {
  return (
    <>
      <div className="wrapper">
        <h1>Welcome To My App</h1>
        <p>This is going to be the coolest app in the world!</p>
        <img src={Sammy} alt="Sammy Image" width={200} height={200} />
      </div>
    </>
  )
}

この行は、CSSファイルをモジュールとしてコンポーネントにインポートします。

終了したら、Welcome.jsxファイルを保存して閉じます。

次のサブセクションでは、アプリのアプリタイトルバーを変更します。

アプリのタイトルバーの変更

デフォルトでは、Viteアプリはブラウザウィンドウのタイトルバーに ViteAppというテキストを表示します。このステップでは、わかりやすいタイトルに変更します。

ルートディレクトリでindex.htmlを開きます。

nano index.html

<title>タグを強調表示されたテキストに変更します。

/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Cool App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

このテキストは、デフォルトの ViteAppタイトルバーをカスタムアプリのタイトルに置き換えます。

index.htmlファイルを保存して閉じます。

開発サーバーを再実行する必要がある場合は、次のコマンドを実行します。

yarn run dev --host

これらすべての変更が完了したら、http://localhost:3000にアクセスしてアプリを表示します。アプリの新しいバージョンが表示されます。

これで、画像を追加し、スタイルを変更し、洗練されたUIを作成しました。次の最後のステップでは、展開用に最適化されたアプリバンドルを構築します。

ステップ6—本番環境向けの構築

このステップでは、サーバーにデプロイする準備ができている最適化されたアプリバンドルを構築します。ビルドを作成するには、ターミナルで次のコマンドを実行します。

yarn run build

このコマンドは、本番用にサーバーに展開できる縮小されたソースファイルを含む新しいdistフォルダーを作成します。

次の出力が表示されます。

Outputvite v2.9.1 building for production...
✓ 33 modules transformed.
dist/assets/pencil.4e765d86.png   66.46 KiB
dist/index.html                   0.45 KiB
dist/assets/index.e3291b10.css    0.18 KiB / gzip: 0.16 KiB
dist/assets/index.14619c6f.js     130.65 KiB / gzip: 42.34 KiB
Done in 2.50s.

これで、distフォルダーの内容をサーバーにオンラインで展開できます。 ApacheまたはNginxサーバーを使用している場合は、コンテンツを手動でアップロードできます。アプリプラットフォームを使用してビルドスクリプトを実行し、ビルドファイルを自動的に生成することもできます。 ReactアプリをDigitalOceanのアプリプラットフォームにデプロイするには、ReactアプリケーションをDigitalOceanアプリプラットフォームにデプロイする方法に従ってください。

結論

このチュートリアルでは、Viteツールを使用して新しいReactアプリを作成しました。 yarn create viteコマンドを使用して、新しいReactアプリをスキャフォールディングしました。ボイラープレートコードを削除した後、カスタムイメージ、CSSファイルを追加し、タイトルバーを変更してコンポーネントを作成しました。最後に、yarn run buildコマンドを使用して最適化されたバンドルを作成し、デプロイする準備をしました。

Viteで構築されたReactアプリができたので、 React.jsシリーズのコーディング方法でReactを使用して他に何ができるかを確認し、他のReactチュートリアルを調べてください。