「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > Vite で React を段階的にセットアップする

Vite で React を段階的にセットアップする

2024 年 11 月 8 日に公開
ブラウズ:893

Vite は、特に React、Vue などの JavaScript ベースのアプリケーションに対して、高速かつ効率的な開発エクスペリエンスを提供するように設計された最新の ビルド ツールです。

Vite 自体は、最小限の構成による開発速度と、開発プロセス中の読み込み時間の短縮に重点を置いています。ロールアップ

による最適化により、本番環境のビルド時間も通常より速くなります。

このチュートリアルでは、Vite で Reactjs をインストールする方法を段階的に学習します

ステップ 1
お持ちのターミナル アプリケーションを開きます。ここでは cmder を使用し、アプリケーションをインストールするフォルダーに移動します

Setup React With Vite Step-by-Step

ステップ 2
インストールプロセスを実行するには、「yarn」または「npm」、
を使用できます。 ターミナルに次のコマンド
を入力します。

##NPM
npm create vite@latest

##YARN
yarn create vite

毛糸を使用しています。

上記のコマンドを実行すると、次の画像に示すように、作成するアプリケーションの名前を入力するように求められます

Setup React With Vite Step-by-Step

ステップ 3
リストが表示されます。矢印キーを使用してリストを上下に移動し、Enter をクリックして希望のオプションを選択します。
このステップでは、React

を選択します。

Setup React With Vite Step-by-Step

ステップ 3
選択できる 5 つのオプションが表示されます。
に移動して選択します。 ここでは Typescript SWC を選択します

Setup React With Vite Step-by-Step

それだけです。これで Vite プロジェクトが完成しました
Setup React With Vite Step-by-Step

ステップ 4
ステップ 3 の最終結果で指示されているように、作成したアプリケーション フォルダーに入るように求められ、その後、指示されたコマンド
を実行します。

### masuk ke folder aplikasi anda
cd react-vite

### install dependencies
yarn install

Setup React With Vite Step-by-Step

ステップ 5
ステップ 4 のすべてのプロセスが成功したら、アプリケーションを実行するには、次のコマンドを実行する必要があります

### npm 
npm run dev

### yarn
yarn dev

Setup React With Vite Step-by-Step

アプリケーションが正常に実行された後、ターミナルに表示されるリンクに従ってアプリケーションにアクセスできます

Setup React With Vite Step-by-Step


結論
ほら、それはまったく難しいことではなく、プロセス全体が完了するまでにそれほど時間はかかりません。

これで、Vitejs を使用して ReactJS アプリケーションをインストールする方法を学習できました

ありがとう

リリースステートメント この記事は次の場所に転載されています: https://dev.to/ramadhan002/setup-react-with-vite-step-by-step-48mi?1 侵害がある場合は、[email protected] に連絡して削除してください。
最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3