ホームページ > ウェブフロントエンド > jsチュートリアル > create-react-app を使用して React 開発環境を構築する詳細な手順

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

php中世界最好的语言
リリース: 2018-05-29 11:52:13
オリジナル
1655 人が閲覧しました

今回は、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート