create-react-appとは何ですか

create-react-app は、FaceBook の React チームによって作成された React シングルページ アプリケーションを構築するための公式のスキャフォールディング ツールであり、Webpack 自体を統合し、一連の組み込みローダーとデフォルトの npm スクリプトで構成されています。ゼロ構成で React アプリケーションを開発できます。

推奨事項: "react ビデオ チュートリアル "

Create React App は、公式にサポートされている React シングルページの作成です申請手続き方法。構成不要の最新のビルド セットアップを提供します。

クイック スタート

npx create-react-app my-app
cd my-app
npm start

(npx は npm 5.2 以降に由来します。npm の古いバージョンについては手順を確認してください)

次に、http://localhost:3000/ を開いて表示します。あなたのアプリケーション。

実稼働環境にデプロイする準備ができたら、npm run build を使用して圧縮バンドルを作成します。

npm start

今すぐ始めましょう

Webpack や Babel などのツールをインストールしたり設定したりする必要はありません。これらは事前に構成されて非表示になっているため、コードに集中できます。

プロジェクトを作成するだけです。

アプリケーションの作成

ローカル開発マシン上に Node >= 6 が必要です (サーバー上には必要ありません)。 nvm (macOS/Linux) または nvm-windows を使用して、プロジェクト間でノードのバージョンを簡単に切り替えることができます。

新しいアプリを作成するには、次のいずれかの方法を選択できます:

npx
npx create-react-app my-app
(npx 来自 npm 5.2+ 或更高版本, 查看 npm 旧版本的说明)
npm
npm init react-app my-app
npm init <initializer> 在 npm 6+ 中可用
Yarn
yarn create react-app my-app
yarn create 在 Yarn 0.25+ 中可用

Output

これらのコマンドのいずれかを実行すると、my-app という名前の新しいアプリが作成されます。現在のディレクトリの目次。そのディレクトリでは、初期プロジェクト構造が生成され、依存関係がインストールされます。

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

構成や複雑なフォルダー構造はなく、アプリケーションのビルドに必要なファイルのみが存在します。インストールが完了したら、プロジェクト ディレクトリを開くことができます:

cd my-app
Scripts

新しく作成したプロジェクトで、いくつかの組み込みコマンドを実行できます:

npm start 或 yarn start

アプリケーションを開発モードで実行します。 http://localhost:3000 を開いてブラウザで表示します。

コードを変更すると、ページは自動的に再読み込みされます。コンソールにビルド エラーと lint 警告が表示されます。

Build errors
npm test 或 yarn test

テスト ウォッチャーを対話モードで実行します。デフォルトでは、最後のコミット以降に変更されたファイルに関連するテストが実行されます。

テストについて詳しくはこちらをご覧ください。

npm run build 或 yarn build

実稼働環境アプリケーションをビルド ディレクトリにビルドします。 React を実稼働モードに正しくパッケージ化し、最適なパフォーマンスが得られるようにビルドを最適化します。

ビルドは圧縮され、ハッシュがファイル名に含まれます。

これで、アプリケーションをデプロイする準備が整いました。

以上がcreate-react-appとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。