create-react-app を使用して React 開発環境を構築する詳細な手順

今回は、create-react-appを使用してReact開発環境を構築する方法について、create-react-appを使用してReact開発環境を構築する際の注意事項について詳しく説明します。 . ここで実際のケースを見てみましょう。

一般的に使用されるスキャフォールディング

1. react-boilerplate

2. react-redux-starter-kit

3. create-react-app (gitで最もフォローされている)

作成を使用する-react-app は React 開発環境を素早く構築します

create-react-app は Facebook から来ています。このコマンドを使用すると、設定なしで React 開発環境を素早く構築できます。

create-react-appで自動作成されるプロジェクトはWebpack + ES6をベースとしています。

次のコマンドを実行しますプロジェクトを作成します:

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

ヒント:

npmの使用が非常に遅い場合は、デフォルトのnpm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org

の代わりにタオバオのカスタマイズされたcnpm (gzip圧縮サポート)コマンドラインツールを使用できます。 less のコンパイル方法

1. 設定ファイルを公開します

npm run eject

2. less-loader とless

npm install less-loader less --save-dev

をインストールします

webpack.config.dev.js と webpack を変更します.config- prod.js 設定ファイル

test: /\.css$/ 改为 /\.(css|less)$/

このテストで用途を見つけ、ローダーを追加

{
  loader: require.resolve('less-loader') // compiles Less to CSS
}

OK、コンパイルされていない状態でプロジェクトを再実行します

プロジェクト構造

srcディレクトリ

src独自のコードを保存するには、src ルート ディレクトリ内のファイルのみが webpack によってコンパイルされるため、ファイルは src ルート ディレクトリに配置する必要があります。そうしないと、ファイルは認識されません。

パブリックディレクトリ

パブリックディレクトリ内のファイルのみがpublic/index.htmlによって参照されます

ヒント: publicおよびsrcの下にあるindex.htmlファイルは存在する必要があり、名前を変更できません

一般的なコマンド

1 起動コマンド

npm start

2 コンパイルおよびパッケージ化コマンド。本番環境でコードをコンパイルし、ビルド ディレクトリに配置してコードを正しくパッケージ化し、最適化、圧縮し、ハッシュを使用してファイル名を変更します

npm run build

3. ファイル変更後のテスト

npm test

4. webpck の設定コマンドは公開されています。元々スキャフォールディングでは設定項目は表示されず、このコマンドを実行する前に変更する必要があります (これは単一のコマンドであり、一度構造化されると元に戻すことはできません)。

npm run eject

5.

set HTTPS=true&&npm start

6. オンライン コンパイル

これは、create-react-app の大きなハイライトです。これにより、アプリケーションはオンラインの実稼働環境で実行されるコードを欺瞞して変換できます。コンパイルされたファイルは非常に小さく、ファイル名も変わります。ハッシュ値があるので便利です キャッシュもしますし、サーバーも提供してくれるのでオンライン制作環境と同様の効果をローカルで見ることができ、とても便利です。

たった 1 行のコマンド:

npm run build

7.api 開発

package.json ファイルに構成項目を追加するだけです。

"proxy": http://localhost:3001/,

8.ajax?

フェッチの代わりに

npm install whatwg-fetch

import 'whatwg-fetch'
fetch('/power-mnjy-mobile/intf/h5/user/login?mobile=13000000001&pwd=a111111&ignoreCsrfToken=true')
  .then(res => res.json())
  .then((data) => {
   this.setState({ value:data });
  });

デバッグツール反応開発者ツール（https://github.com/facebook/react-devtools）

Chromeに拡張機能反応開発者ツールを追加し、ブラウザを再起動することを忘れないでください（再起動、再起動、重要なことを言います） 3 回)、反応オプションが Chrome の開発ツールに表示されます。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

AngularJSを使用してタブ切り替えを実装する方法

Koa2を使用してWeChat QRコードスキャン決済を開発する方法

以上がcreate-react-app を使用して React 開発環境を構築する詳細な手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。