今回は、create-react-appを使用してReact開発環境を構築する方法について、create-react-appを使用してReact開発環境を構築する際の注意事項について詳しく説明します。 . ここで実際のケースを見てみましょう。
一般的に使用されるスキャフォールディング
react-boilerplate
react-redux-starter-kit
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
npm install less-loader less --save-dev
test: /\.css$/ 改为 /\.(css|less)$/
{ loader: require.resolve('less-loader') // compiles Less to CSS }
プロジェクト構造
srcディレクトリ
src独自のコードを保存するには、src ルート ディレクトリ内のファイルのみが webpack によってコンパイルされるため、ファイルは src ルート ディレクトリに配置する必要があります。そうしないと、ファイルは認識されません。パブリックディレクトリ
パブリックディレクトリ内のファイルのみがpublic/index.htmlによって参照されますヒント: publicおよびsrcの下にあるindex.htmlファイルは存在する必要があり、名前を変更できません一般的なコマンド
1 起動コマンドnpm start
npm run build
npm test
npm run eject
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 }); });
Chromeに拡張機能反応開発者ツールを追加し、ブラウザを再起動することを忘れないでください(再起動、再起動、重要なことを言います) 3 回)、反応オプションが Chrome の開発ツールに表示されます。
この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
AngularJSを使用してタブ切り替えを実装する方法Koa2を使用してWeChat QRコードスキャン決済を開発する方法以上がcreate-react-app を使用して React 開発環境を構築する詳細な手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。