将 Vite 与 React 结合使用的初学者指南

導入

新しい React プロジェクトを開始する場合、適切なツールの選択はワークフローに大きな影響を与える可能性があります。 Webpack のようなツールは長年にわたって広く使用されてきましたが、Vite のような新しいオプションは、より高速で効率的な代替手段を提供します。

Evan You (Vue.js の作成者) によって開発された Vite は、超高速の開発環境を提供するように設計されています。これは、ネイティブ ES モジュール経由でファイルを提供し、最適化された開発サーバーを使用することによって行われます。これにより、サーバーの起動時間が短縮され、開発の応答性が向上します。

ユーザー インターフェイスを構築するための最も人気のあるライブラリの 1 つである React は、Vite とシームレスに連携します。コンポーネントベースのアーキテクチャは、動的なシングルページ アプリケーション (SPA) の開発に最適です。 Vite が React プロジェクトに最適な理由は次のとおりです:

• インスタントサーバー起動: 従来のバンドラーとは異なり、Vite の開発サーバーはファイルをネイティブ ES モジュールとして提供することでほぼ瞬時に起動し、開発中のバンドルを回避します。

• 高速ホット モジュール交換 (HMR): Vite の HMR は信じられないほど高速で、React コンポーネントの変更をほぼ瞬時に確認できるため、開発がスピードアップします。

• 最適化された本番ビルド: 本番環境では、Vite はロールアップを使用してバンドルを最適化します。これには、アプリの読み込み時間を短縮する自動コード分割などの機能が含まれています。

• 最新の開発サポート: Vite は、TypeScript、JSX、Sass などの CSS プリプロセッサなどの最新の JavaScript ツールとうまく連携し、すぐに使える最先端の開発エクスペリエンスを提供します。

このブログでは、Vite を使用して React プロジェクトをセットアップする手順を説明し、プロジェクトの構造を探索し、アセットを操作してアプリをデプロイする方法を示します。最後には、Vite が React 開発エクスペリエンスをどのように向上させることができるかがわかります。

ヴァイトとは何ですか？

Vite は、特に React などの JavaScript フレームワークを使用する場合の速度と効率を考慮して設計された最新のビルド ツールです。 Vue.js の作成者である Evan You によって開発された Vite は、高速かつ合理化された開発エクスペリエンスを提供する能力により際立っています。

Vite の主な機能

1. インスタントサーバー起動: Vite はネイティブ ES モジュール経由でファイルを提供するため、大規模なプロジェクトであっても開発サーバーをほぼ瞬時に起動できます。

2. 高速ホット モジュール交換 (HMR): Vite の HMR は非常に高速で、開発中に React コンポーネントをほぼ瞬時に更新できます。

3. 最適化されたビルド: Vite は本番ビルドにロールアップを使用し、コード分割やツリーシェイクなどの機能による効率的なバンドルを保証します。

4. 最新の JavaScript サポート: Vite には、TypeScript、JSX、Sass などの CSS プリプロセッサを含む、最新の JavaScript 機能のサポートが組み込まれています。

Vite 対 Webpack

Webpack は長年にわたって人気のある選択肢ですが、多くの場合複雑な構成が必要であり、バンドル プロセスにより開発中に時間がかかる可能性があります。対照的に、Vite はセットアップ プロセスを簡素化し、開発中のバンドルをスキップすることで、サーバーの起動時間と HMR の高速化につながります。 Vite の実稼働ビルドも Webpack と同様に高度に最適化されていますが、構成はより単純です。

React で Vite を使用する理由

1. 速度: Vite の迅速なサーバー起動と HMR により、長いバンドル プロセスを待たずに React アプリケーションの開発が容易になります。

2. シンプルさ: Vite の使いやすいセットアップにより、ビルド ツールの設定ではなく React コンポーネントの構築に集中できます。

3. 効率: Vite は、React アプリを迅速に開発できるだけでなく、最小限の労力で本番環境に向けて最適化することを保証します。

Vite は、Webpack のような従来のバンドラーに代わる、より現代的で効率的な代替手段を提供するため、速度とシンプルさを優先する React プロジェクトに最適です。

開発環境のセットアップ

React を使用して Vite を使用する前に、システムに Node.js と npm がインストールされていることを確認する必要があります。インストールしていない場合は、以下の手順に従って開始してください。

Node.js と npm のインストール

Node.js と npm をインストールするには、Node.js 公式 Web サイトにアクセスし、最新の安定バージョンをダウンロードします。インストールしたら、ターミナルで次のコマンドを実行してインストールを確認できます:

node -v
npm -v

これらのコマンドは、インストールされている Node.js と npm のバージョンを表示し、それらが正しく設定されていることを確認します。

新しい Vite プロジェクトの初期化

Node.js と npm の準備ができたら、Vite を使用して新しい React プロジェクトを作成できるようになります。 Vite には、新しいプロジェクトをすばやくセットアップするための簡単なコマンドが用意されています。ターミナルを開いて次のコマンドを実行します:

npm create vite@latest my-react-app --template react
cd my-react-app
npm install

• npm create vite@latest my-react-app --template react: このコマンドは、React テンプレートを使用して新しい Vite プロジェクトを初期化します。 my-react-app を目的のプロジェクト名に置き換えます。
• cd my-react-app: 新しく作成したプロジェクト ディレクトリに移動します。
• npm install: React プロジェクトに必要な依存関係をインストールします。

開発サーバーの実行

プロジェクトがセットアップされ、依存関係がインストールされたら、開発サーバーを起動できます。 Vite のサーバーは高速で、起動がいかに速いかがわかります:

npm run  dev

このコマンドを実行すると、Vite 開発サーバーが起動し、デフォルトの Web ブラウザで新しい React アプリケーションが開きます。 Vite の高速ホット モジュール交換 (HMR) 機能のおかげで、コードに変更を加えるとアプリケーションが自動的にリロードされます。

このコマンドを実行すると、Vite 開発サーバーが起動し、デフォルトの Web ブラウザで新しい React アプリケーションが開きます。 Vite の高速ホット モジュール交換 (HMR) 機能のおかげで、コードに変更を加えるとアプリケーションが自動的にリロードされます。

プロジェクトの構造を理解する

Vite は、シンプルで組織化されたプロジェクト構造を設定します。主要なファイルとフォルダーの概要を次に示します:

• Index.html: アプリケーションのエントリ ポイント。 Vite はスクリプトをこのファイルに挿入します。
• src/main.jsx: React アプリケーションが開始されるメインの JavaScript ファイル。通常、ルート コンポーネント (App.jsx) を DOM にレンダリングします。
• src/App.jsx: アプリケーションのメインの React コンポーネント。ここから UI の構築を開始できます。
• vite.config.js: ビルド プロセスをカスタマイズしたり、プラグインを追加したりできる Vite の構成ファイル。

この構造は最小限でありながら強力になるように設計されており、不必要に複雑にすることなく React アプリケーションの構築を開始するための強固な基盤を提供します。プロジェクトの成長に合わせて、構造を簡単に拡張およびカスタマイズできます。

プロジェクトの構造を理解する

Vite を使用して React プロジェクトを初期化すると、クリーンで最小限のプロジェクト構造が作成されます。この構造は、不要なファイルや複雑な構成によるオーバーヘッドを発生させずに、すぐに使い始められるように設計されています。セットアップを理解するために、Vite によって作成される主要なファイルとフォルダーを詳しく見てみましょう。

my-app
├── node_modules
├── src
├── .eslintrc.cjs
├── index.html
├── README.md
├── package.json
└── vite.config.js

主要なファイルとフォルダーの内訳

1. index.html: このファイルはアプリケーションのエントリ ポイントであり、ルート ディレクトリにあります。従来のバンドラーとは異なり、Vite は開発中にこの HTML ファイルを直接提供します。ここに React アプリケーションがマウントされ、Vite はアプリケーションをロードするために必要なスクリプトを挿入します。

2. src/: src フォルダーには、すべてのアプリケーション コードが含まれています。

3. main.jsx: これは React アプリのメイン エントリ ポイントです。 React をインポートし、ルート コンポーネント (App.jsx) をレンダリングし、index.html ファイルの #root 要素に添付します。

4. App.jsx: これはアプリケーションのルート コンポーネントであり、ここから UI の構築を開始します。プロジェクトの成長に応じて、このファイルを変更してコンポーネントを追加できます。

5. vite.config.js: このファイルには Vite の設定が含まれています。これにより、Vite の動作をカスタマイズしたり、プラグインを追加したり、ビルド プロセスを変更したりできますが、ほとんどの小規模プロジェクトでは、このファイルに触れる必要はないかもしれません。

キーファイル

1. Index.html : React アプリが挿入される HTML ファイル。単一の
   が含まれています。 React アプリがマウントされる id="root" 要素。

   
     
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Vite React App</title>
     
     
       <div id="root"></div>
       <script type="module" src="/src/main.jsx"></script>
     
   
   

   1. src/main.jsx React アプリケーションのメイン JavaScript エントリ ポイント。 App コンポーネントを、index.html の #root div にレンダリングします。

   import React from 'react';
   import ReactDOM from 'react-dom';
   import App from './App';
   
   ReactDOM.createRoot(document.getElementById('root')).render(
     <react.strictmode>
       <app></app>
     </react.strictmode>
   );
   

   1. src/App.jsx : React アプリのメインコンポーネント。ここから UI の構築を開始します。デフォルトでは、単純な React コンポーネントが含まれていますが、ニーズに合わせて変更できます。

   import React from 'react';
   
   function App() {
     return (
       <div>
         <h1 id="Welcome-to-Vite-React">Welcome to Vite + React!</h1>
       </div>
     );
   }
   
   export default App;
   

   App.jsx を変更して単純な React コンポーネントを作成する

   デフォルトの App.jsx コンポーネントを変更して、項目のリストを表示する単純な React コンポーネントを作成しましょう。
   

   import React from 'react';
   
   function App() {
     const items = ['Item 1', 'Item 2', 'Item 3'];
   
     return (
       <div>
         <h1 id="Simple-List-with-Vite-and-React">Simple List with Vite and React</h1>
         <ul>
           {items.map((item, index) => (
             <li key="{index}">{item}</li>
           ))}
         </ul>
       </div>
     );
   }
   
   export default App;
   

   この例では:

   • We define an array items with a few sample items.
   • We use the map() function to iterate over the items array and render each item as a list item (
   • ).

   This project structure offers flexibility and simplicity, allowing you to grow your application easily as you continue development.

   Working with Vite in a React Project

   Vite simplifies the process of working with assets, styles, and offers fast feedback during development through Hot Module Replacement (HMR). Let’s walk through how to handle these features in your Vite-React project.

   Importing and Using Assets (Images, Styles)

   Vite allows you to easily import assets such as images or CSS files directly into your React components, with the benefit of bundling them efficiently during the build.
   

   import React from 'react';
   import logo from './assets/logo.png'; // Importing an image
   
   function App() {
     return (
       <div>
         <img src="%7Blogo%7D" alt="App Logo">
         <h1 id="Welcome-to-Vite-React-App">Welcome to Vite React App!</h1>
       </div>
     );
   }
   
   export default App;
   

   In this example, Vite processes the logo.png image file and ensures it’s bundled efficiently when you build the project. During development, the image is served directly without bundling, contributing to faster reload times.
   

   import React from 'react';
   import './App.css'; // Importing a CSS file
   
   function App() {
     return (
       <div classname="app-container">
         <h1 id="Welcome-to-Vite-React-App">Welcome to Vite React App!</h1>
       </div>
     );
   }
   
   export default App;
   

   How Vite Handles Hot Module Replacement (HMR)

   One of Vite’s standout features is its fast Hot Module Replacement (HMR). HMR allows you to see changes in your application instantly without a full page reload. When you modify a file, Vite only updates the specific module that was changed, maintaining the application’s state.

   For example, if you update a React component:
   

   import React from 'react';
   
   function App() {
     return (
       <div>
         <h1 id="Welcome-to-the-updated-Vite-React-App">Welcome to the updated Vite React App!</h1> {/* Change the text */}
       </div>
     );
   }
   
   export default App;
   

   Upon saving the file, Vite’s HMR immediately updates the UI without a full page reload. This speeds up the development process significantly, especially when you are working on UI components or tweaking styles.

   Troubleshooting Common Issues

   While Vite generally offers a smooth development experience, you might still run into a few common issues when using it with React. Here are some of those issues and how to fix them, along with tips for optimizing performance and build times.

   1. Error: "Failed to resolve module"

      This is a common issue that occurs when Vite cannot resolve a module you’re trying to import, especially when dealing with third-party libraries or incorrect paths.
      Solution:

   • Double-check the import paths in your code. Ensure you are importing the correct file or module.
   • For third-party libraries, try reinstalling the dependencies:

     npm install
   

   • If the issue persists, clear Vite’s cache and restart the server
     

     rm -rf node_modules/.vite
     npm run dev
     

   1. Error: "React Refresh failed" Vite uses React Fast Refresh to enable Hot Module Replacement (HMR). Sometimes, this can fail, particularly when the React version is mismatched or there’s a configuration issue.

   Solution:

   • Make sure that you're using a supported version of React (17.x or later).

   • Ensure that @vitejs/plugin-react is correctly installed and added to your vite.config.js file:
     

   npm install @vitejs/plugin-react --save-dev
   

   In vite.config.js:
   

   import react from '@vitejs/plugin-react';
   
   export default {
     plugins: [react()],
   };
   

   • Restart your Vite development server after applying these fixes.

   1. Assets Not Loading After

      If assets like images, fonts, or other static files are not loading properly after building the app, it’s often due to incorrect asset paths.

   Solution:

   • Make sure that you're using relative paths for your assets. For example, use ./assets/logo.png instead of /assets/logo.png.

   • Check yourvite.config.js for the correct base path. If your app is deployed in a subdirectory, you may need to set the base option:
     

     export default {
     base: '/subdirectory/',
     };
     

   Following these troubleshooting steps should help you resolve common issues and ensure your Vite + React project runs smoothly.

   Conclusion

   In this guide, we walked through setting up a React project with Vite, explored its project structure, imported assets, and styles, and highlighted how Vite's fast Hot Module Replacement (HMR) enhances development. You’ve also learned some common troubleshooting tips and optimizations for build performance.

   Vite’s speed and simplicity make it a powerful tool, whether you’re working on small projects or scaling up to larger ones. As you continue to explore Vite, dive into its advanced features, such as plugins and environment-specific configurations, to make your development experience even better.

以上是将 Vite 与 React 结合使用的初学者指南的详细内容。更多信息请关注PHP中文网其他相关文章！