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

投稿日: 2022-10-25 2022-10-25
タグ: Development, javascript, React

序章

通常、 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

このコマンドは、リモートからVite実行可能ファイルを実行します npm リポジトリ。 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 "[email protected]" 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/.

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

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

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

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

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

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

yarn run dev --host

The --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

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

開ける 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 ファイル。

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

nano src/App.jsx

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

/src/App.jsx

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

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

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

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

yarn run dev --host

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

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

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

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

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

コンポーネントの作成

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

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

mkdir src/components

次に、という新しいファイルを作成します Welcome.jsx 中 src/components/ コマンドを使用したディレクトリ：

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>
    </>
  );
}

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

The div クラス名が wrapper CSSでこのセクションをターゲットにすることができます。 The 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での画像の追加は、アプリ開発の一般的なユースケースです。

と呼ばれる新しいディレクトリを作成します img 下 src/ 次のコマンドを使用してディレクトリを作成します。

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にインポートします。

関数本体内の他の行は、新しいを作成します <img> タグを付けてリンクする src インポートしたばかりの画像コンポーネントの属性。 The width と height 小道具は、対応する画像属性を200ピクセルに設定します。

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

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

CSSの追加

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

と呼ばれる新しいディレクトリを作成します css 下 src/ 次のコマンドを使用してディレクトリを作成します。

mkdir src/css

次に、という新しいCSSファイルを作成します main.css 下 src/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. また、フォントファミリと背景色も設定します。

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

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

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

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

次に、から新しいCSSファイルを参照します Welcome.jsx 成分。を開きます 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

これらすべての変更後、次のWebサイトにアクセスしてください。 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アプリを作成しました。あなたは新しいReactアプリを足場にしました yarn create vite 指図。ボイラープレートコードを削除した後、カスタムイメージ、CSSファイルを追加し、タイトルバーを変更してコンポーネントを作成しました。最後に、を使用して最適化されたバンドルを作成しました yarn run build コマンド、展開の準備ができました。

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

getdocs

13036