ホームページ  >  記事  >  ウェブフロントエンド  >  Vite で React を段階的にセットアップする

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

Patricia Arquette
Patricia Arquetteオリジナル
2024-10-09 14:33:02887ブラウズ

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 アプリケーションをインストールする方法を学習できました

ありがとう

以上がVite で React を段階的にセットアップするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。