mcpField
G
Getting Started with Create React App

Getting Started with Create React App

ローカル
github.com/myzhibie開発ツール085 週間前に更新

Getting Started with Create React App について

Create React App で作成された React プロジェクトです。README には標準の開発、テスト、ビルド、eject の手順が記載されていますが、MCP サーバーの機能は説明されていません。

主な機能

  1. 01開発サーバーの起動
  2. 02インタラクティブなテスト実行
  3. 03本番用ビルドの作成
  4. 04eject によるツール設定のカスタマイズ

活用シーン

  1. 01React アプリのローカル実行
  2. 02テストのインタラクティブな実行
  3. 03本番用ビルドの生成
  4. 04webpack や Babel などの設定変更

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

インストール方法は未掲載です

このサーバーのパッケージやリモートエンドポイントはまだ取得できていません。プロジェクトの README の手順に従ってください。

リポジトリ

ツール

ツール一覧はまだ取得されていません

ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。

詳細

Create React App を使った開発の開始

このプロジェクトは Create React App で作成されています。

使用可能なスクリプト

プロジェクトディレクトリで、次のコマンドを実行できます。

npm start

アプリを開発モードで起動します。
ブラウザーで http://localhost:3000 を開くと、アプリを表示できます。

変更を加えると、ページが再読み込みされます。
コンソールに lint エラーが表示されることもあります。

npm test

テストランナーをインタラクティブなウォッチモードで起動します。
詳しくは、テストの実行のセクションをご覧ください。

npm run build

アプリを本番環境用にビルドし、build フォルダーに出力します。
本番モードの React バンドルを適切に作成し、最高のパフォーマンスが得られるよう最適化します。

ビルドは圧縮され、ファイル名にはハッシュが含まれます。
これで、アプリをデプロイする準備ができました!

詳しくは、デプロイのセクションをご覧ください。

npm run eject

注意:これは一方向の操作です。一度 eject すると、元に戻すことはできません!

ビルドツールや設定の選択に満足できない場合は、いつでも eject を実行できます。このコマンドを実行すると、プロジェクトから単一のビルド依存関係が削除されます。

代わりに、すべての設定ファイルと推移的依存関係(webpack、Babel、ESLint など)がプロジェクトにコピーされ、それらを完全に制御できるようになります。eject 以外のコマンドは引き続き動作しますが、コピーされたスクリプトを参照するようになるため、必要に応じて調整できます。この時点からは、自分で管理する必要があります。

eject を使う必要はありません。厳選された機能セットは、小規模から中規模のデプロイに適しているため、この機能を使う義務を感じる必要はありません。ただし、必要になったときにカスタマイズできなければ、このツールは役に立たないことも理解しています。

さらに詳しく

詳しくは、Create React App のドキュメントをご覧ください。

React を学ぶには、React のドキュメントをご覧ください。

コード分割

このセクションは、こちらに移動しました:https://facebook.github.io/create-react-app/docs/code-splitting

バンドルサイズの分析

このセクションは、こちらに移動しました:https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

プログレッシブウェブアプリの作成

このセクションは、こちらに移動しました:https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

高度な設定

このセクションは、こちらに移動しました:https://facebook.github.io/create-react-app/docs/advanced-configuration

デプロイ

このセクションは、こちらに移動しました:https://facebook.github.io/create-react-app/docs/deployment

npm run build で圧縮に失敗する

このセクションは、こちらに移動しました:https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。