CRA 非推奨後に React アプリケーションを作成する方法

開発者の皆さん、こんにちは！ ?

私は最近プロジェクトに取り組んでいて、React チームが 2 年前に create-react-app (CRA) を非推奨にしたことを知りました。 ?当然のことながら、これにより、JavaScript ベースの React アプリケーションをセットアップする別の方法について考えるようになりました。

React の公式ドキュメントをチェックしたところ、現在は Next.js や Gatsby などのフルスタック フレームワークに焦点を当てていることがわかりました。これらはエンドツーエンドのアプリケーションを構築する場合には最適ですが、単純な JSX ベースのプロジェクトだけを必要とする場合には過剰になる可能性があります。 ?️

始める前に - CRA は何をしますか? - Create React App (CRA) は、新しい React プロジェクトのセットアップを自動化する強力なパッケージです。必要なすべての構成を処理し、必要な依存関係をインストールして、構成不要のバンドラーを提供します。これにより、開発者はツールや構成の複雑なセットアップを気にせずにアプリケーションの構築を開始できます。

CRA は非推奨になったので、純粋な JSX アプリをセットアップするにはどうすればよいでしょうか? ?
ここでは、React ライブラリを使用してクライアントベースのアプリケーションを作成するための 2 つの一般的な選択肢 (Vite と Webpack) を共有します。以下のセクションでは、これらのツールを比較し、それぞれのセットアップ手順を説明します。飛び込んでみましょう！ ?‍♂️

⚡ Vite 対 Webpack ?

バイト

長所:

- 即時ホットモジュール交換 (HMR) を備えた高速開発サーバー。
-最新の JavaScript 機能の組み込みサポート。
-開始するには最小限の設定が必要です。

短所:

- 新しいツールであるため、Webpack に比べてコミュニティ サポートが少ない可能性があります。

ウェブパック

長所:

- 高度に構成可能で、複雑なビルド設定に柔軟に対応します。
-広範なプラグイン エコシステムとコミュニティ サポート。
-多くの大規模アプリケーションでの実績があります。

短所:

- 初期構成はより複雑で時間がかかる場合があります。
-Vite と比較してビルド時間が遅い
-Vite を使用した React アプリのセットアップ

新しい Vite プロジェクトを作成します:

1.ターミナルで Vite コマンドを実行します

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

2.開発サーバーを起動します:

npm run dev

Vite 構成:

Vite には、すぐに使用できる最小限の構成が必要です。デフォルトのセットアップは、ほとんどの React プロジェクトで機能するはずです。
必要に応じて、vite.config.js をカスタマイズできます。

Webpack を使用した React アプリのセットアップ

1.プロジェクトを初期化します:

mkdir my-react-app
cd my-react-app
npm init -y
npm install react react-dom
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react

2.プロジェクト構造の作成:

 1. Create a src folder and add index.js and App.js files.
 2. Create a public folder and add an index.html file.

3. Webpack の構成:

• webpack.config.js ファイルを作成します。

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

4.バベル構成:

• .babelrc ファイルを作成します。

npm run dev

5.開発サーバーを起動します:

npx webpack サーブ

結論
Vite と Webpack はどちらも、CRA なしで React アプリケーションをセットアップする強力な方法を提供します。 Vite は、より高速かつシンプルなセットアップを提供し、中規模のプロジェクトや急速な開発に最適です。一方、Webpack は広範な構成可能性と堅牢なエコシステムを提供し、より複雑なプロジェクトに適しています。

プロジェクトの要件と好みに最適なツールを選択してください。コーディングを楽しんでください!

以上がCRA 非推奨後に React アプリケーションを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。