Custom Blog Content Maker
1.0.0
API からデータを取得して投稿として表示するためのシンプルな React アプリ このプロジェクトは、Create React App でブートストラップされました。
以下に、一般的なタスクの実行方法に関する情報を示します。
このガイドの最新版はここで見つけることができます。
<title>publicフォルダーの使用publicフォルダーを使用する場合.envへの開発環境変数の追加<meta>タグの生成npm start変更を検出しないnpm test macOS Sierra でハングするnpm run build終了が早すぎますnpm run buildが失敗するnpm run build縮小に失敗するCreate React App は 2 つのパッケージに分かれています。
create-react-app新しいプロジェクトを作成するために使用するグローバル コマンドライン ユーティリティです。react-scripts生成されたプロジェクト (これを含む) の開発依存関係です。 create-react-app自体を更新する必要はほとんどありません。すべてのセットアップをreact-scriptsに委任します。
create-react-app実行すると、常に最新バージョンのreact-scripts使用してプロジェクトが作成されるため、新しく作成されたアプリのすべての新機能と改善点が自動的に取得されます。
既存のプロジェクトを新しいバージョンのreact-scriptsに更新するには、変更ログを開き、現在使用しているバージョンを見つけて (不明な場合は、このフォルダー内のpackage.json確認してください)、新しいバージョンの移行手順を適用します。バージョン。
ほとんどの場合、 package.jsonでreact-scriptsバージョンを変更し、このフォルダーでnpm install実行するだけで十分ですが、潜在的な重大な変更については変更ログを参照することをお勧めします。
私たちは、 react-scripts問題なくアップグレードできるように、重大な変更を最小限に抑えることに取り組んでいます。
フィードバックはいつでもお待ちしております。
作成後、プロジェクトは次のようになります。
my-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
プロジェクトをビルドするには、これらのファイルが正確なファイル名で存在する必要があります。
public/index.htmlはページ テンプレートです。src/index.js JavaScript のエントリ ポイントです。他のファイルは削除したり名前を変更したりできます。
src内にサブディレクトリを作成することもできます。リビルドを高速化するために、 src内のファイルのみが Webpack によって処理されます。
JS および CSS ファイルはsrc内に置く必要があります。そうしないと、Webpack はそれらを認識できません。
public/index.htmlからは、 public内のファイルのみを使用できます。
JavaScript および HTML からアセットを使用する方法については、以下の手順をお読みください。
ただし、さらに最上位のディレクトリを作成することもできます。
これらは実稼働ビルドには含まれないため、ドキュメントなどに使用できます。
プロジェクト ディレクトリでは、次を実行できます。
npm startアプリを開発モードで実行します。
http://localhost:3000 を開いてブラウザで表示します。
編集を行うとページがリロードされます。
コンソールには lint エラーも表示されます。
npm testインタラクティブウォッチモードでテストランナーを起動します。
詳細については、テストの実行に関するセクションを参照してください。
npm run build実稼働用のアプリをbuildフォルダーにビルドします。
React を実稼働モードに正しくバンドルし、最高のパフォーマンスが得られるようにビルドを最適化します。
ビルドは縮小され、ファイル名にはハッシュが含まれます。
アプリをデプロイする準備ができました。
詳細については、展開に関するセクションを参照してください。
npm run eject注: これは一方向の操作です。一度ejectと、元に戻すことはできません。
ビルド ツールと構成の選択に満足できない場合は、いつでもejectことができます。このコマンドは、プロジェクトから単一のビルド依存関係を削除します。
代わりに、すべての構成ファイルと推移的な依存関係 (Webpack、Babel、ESLint など) がプロジェクトに直接コピーされるため、それらを完全に制御できます。 ejectを除くすべてのコマンドは引き続き機能しますが、コピーされたスクリプトを指すため、調整することができます。この時点では、あなたは一人です。
eject使用する必要はありません。厳選された機能セットは小規模および中規模の展開に適しており、この機能を使用する義務を感じる必要はありません。ただし、準備ができたときにカスタマイズできなければ、このツールは役に立たないことは理解しています。
デフォルトでは、生成されたプロジェクトは最新バージョンの React を使用します。
サポートされているブラウザの詳細については、React のドキュメントを参照してください。
このプロジェクトは、最新の JavaScript 標準のスーパーセットをサポートしています。
ES6 の構文機能に加えて、次の機能もサポートしています。
さまざまな提案段階について詳しくご覧ください。
実験的な提案は慎重に使用することをお勧めしますが、Facebook は製品コードでこれらの機能を頻繁に使用するため、将来これらの提案が変更された場合は codemod を提供する予定です。
プロジェクトにはいくつかの ES6 ポリフィルのみが含まれていることに注意してください。
object-assignを介したObject.assign() 。promiseによるPromise 。whatwg-fetch経由でfetch() 。ランタイム サポートが必要な他の ES6+ 機能 ( Array.from()やSymbolなど) を使用する場合は、適切なポリフィルを手動で含めているか、対象のブラウザがすでにポリフィルをサポートしていることを確認してください。
また、 for...ofや[...nonArrayValue]などの新しい構文機能を使用すると、Babel が ES6 ランタイム機能に依存するコードを出力するため、ポリフィルなしでは動作しない可能性があることにも注意してください。疑問がある場合は、Babel REPL を使用して、特定の構文がどのようにコンパイルされるかを確認してください。
お気に入りのテキスト エディターで構文の強調表示を設定するには、関連する Babel ドキュメント ページにアクセスし、指示に従ってください。最も人気のあるエディタのいくつかがカバーされています。
注: この機能は、
[email protected]以降で利用できます。
また、npm 3 以降でのみ動作します。
Sublime Text、Atom、Visual Studio Code などの一部のエディターは、ESLint のプラグインを提供します。
リンティングには必要ありません。ターミナルおよびブラウザ コンソールにリンター出力が表示されるはずです。ただし、lint の結果をエディターに直接表示したい場合は、追加の手順を実行できます。
最初にエディタ用の ESLint プラグインをインストールする必要があります。次に、 .eslintrcというファイルをプロジェクト ルートに追加します。
{
"extends" : "react-app"
}これで、エディターがリント警告を報告するようになります。
.eslintrcファイルをさらに編集したとしても、これらの変更はエディターの統合にのみ影響することに注意してください。ターミナルやブラウザ内の lint 出力には影響しません。これは、Create React App が、一般的な間違いを見つけるための最小限のルール セットを意図的に提供しているためです。
プロジェクトにコーディング スタイルを適用したい場合は、ESLint スタイル ルールの代わりに Prettier を使用することを検討してください。
この機能は現在、Visual Studio Code と WebStorm でのみサポートされています。
Visual Studio Code と WebStorm は、Create React App を使用したすぐに使えるデバッグをサポートしています。これにより、開発者はエディターを離れることなく React コードを作成してデバッグできるようになります。また最も重要なことは、ツール間を切り替える必要がないため、コンテキストの切り替えが最小限で継続的な開発ワークフローを実現できることです。
最新バージョンの VS Code と VS Code Chrome Debugger Extension がインストールされている必要があります。
次に、以下のブロックをlaunch.jsonファイルに追加し、アプリのルート ディレクトリの.vscodeフォルダー内に配置します。
{
"version" : " 0.2.0 " ,
"configurations" : [{
"name" : " Chrome " ,
"type" : " chrome " ,
"request" : " launch " ,
"url" : " http://localhost:3000 " ,
"webRoot" : " ${workspaceRoot}/src " ,
"sourceMapPathOverrides" : {
"webpack:///src/*" : " ${webRoot}/* "
}
}]
}注: HOST または PORT 環境変数を使用して調整を行った場合、URL は異なる場合があります。
npm startを実行してアプリを起動し、 F5を押すか緑色のデバッグ アイコンをクリックして VS Code でデバッグを開始します。コードの作成、ブレークポイントの設定、コードの変更、新しく変更されたコードのデバッグをすべてエディターから行うことができるようになりました。
VS コードのデバッグで問題がありますか?トラブルシューティング ガイドを参照してください。
WebStorm および JetBrains IDE Support Chrome 拡張機能をインストールする必要があります。
WebStorm メニューのRunでEdit Configurations...選択します。次に、 +をクリックしてJavaScript Debugを選択します。 http://localhost:3000 URL フィールドに貼り付け、構成を保存します。
注: HOST または PORT 環境変数を使用して調整を行った場合、URL は異なる場合があります。
npm start実行してアプリを起動し、macOS では^D押すか、Windows および Linux ではF9押すか、緑色のデバッグ アイコンをクリックして WebStorm でのデバッグを開始します。
同じ方法で、IntelliJ IDEA Ultimate、PhpStorm、PyCharm Pro、RubyMine でアプリケーションをデバッグできます。
Prettier は、JavaScript、CSS、JSON をサポートする独自のコード フォーマッタです。 Prettier を使用すると、作成したコードを自動的にフォーマットして、プロジェクト内のコード スタイルを確保できます。詳細については Prettier の GitHub ページを参照し、実際の動作を確認するにはこのページを参照してください。
git でコミットを行うたびにコードをフォーマットするには、次の依存関係をインストールする必要があります。
npm install --save husky lint-staged prettierあるいは、 yarn使用することもできます。
yarn add husky lint-staged prettierhusky使用すると、githook を npm スクリプトであるかのように簡単に使用できます。lint-stagedと、git 内のステージングされたファイルでスクリプトを実行できます。詳細については、lint ステージングに関するこのブログ投稿を参照してください。prettierは、コミット前に実行する JavaScript フォーマッタです。これで、プロジェクト ルートのpackage.jsonに数行を追加することで、すべてのファイルが正しくフォーマットされていることを確認できます。
次の行をscriptsセクションに追加します。
"scripts": {
+ "precommit": "lint-staged",
"start": "react-scripts start",
"build": "react-scripts build",次に、「lint-staged」フィールドをpackage.jsonに追加します。例:
"dependencies": {
// ...
},
+ "lint-staged": {
+ "src/**/*.{js,jsx,json,css}": [
+ "prettier --single-quote --write",
+ "git add"
+ ]
+ },
"scripts": {これで、コミットを行うたびに、Prettier は変更されたファイルを自動的にフォーマットします。 ./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx,json,css}"を実行して、プロジェクト全体を初めてフォーマットすることもできます。
次に、お気に入りのエディタに Prettier を統合することをお勧めします。 Prettier GitHub ページのエディターの統合に関するセクションをお読みください。
<title>ソース HTML ファイルは、生成されたプロジェクトのpublicフォルダーにあります。その中の<title>タグを編集して、タイトルを「React App」から他のものに変更できます。
通常、 publicフォルダー内のファイルを編集することはあまりないことに注意してください。たとえば、スタイルシートの追加は、HTML に触れることなく実行されます。
コンテンツに基づいてページ タイトルを動的に更新する必要がある場合は、ブラウザのdocument.title API を使用できます。 React コンポーネントからタイトルを変更する場合のより複雑なシナリオでは、サードパーティのライブラリである React Helmet を使用できます。
運用環境でアプリにカスタム サーバーを使用し、ブラウザに送信される前にタイトルを変更したい場合は、このセクションのアドバイスに従うことができます。あるいは、各ページを静的 HTML ファイルとして事前に構築してから、ここで説明する JavaScript バンドルをロードすることもできます。
生成されたプロジェクトには、依存関係として React と ReactDOM が含まれています。これには、Create React App が開発依存関係として使用する一連のスクリプトも含まれています。 npmを使用して他の依存関係 (React Router など) をインストールすることもできます。
npm install --save react-routerあるいは、 yarn使用することもできます。
yarn add react-routerこれは、 react-routerだけでなく、どのライブラリでも機能します。
このプロジェクトのセットアップは、Babel のおかげで ES6 モジュールをサポートしています。
require()とmodule.exports引き続き使用できますが、代わりにimportとexport使用することをお勧めします。
例えば：
Button.js import React , { Component } from 'react' ;
class Button extends Component {
render ( ) {
// ...
}
}
export default Button ; // Don’t forget to use export default!DangerButton.js import React , { Component } from 'react' ;
import Button from './Button' ; // Import a component from another file
class DangerButton extends Component {
render ( ) {
return < Button color = "red" /> ;
}
}
export default DangerButton ;デフォルトのエクスポートと名前付きエクスポートの違いに注意してください。それはよくある間違いの原因です。
モジュールが 1 つのもの (コンポーネントなど) のみをエクスポートする場合は、デフォルトのインポートとエクスポートを使用することをお勧めします。これは、 export default Button 、 import Button from './Button'得られるものです。
名前付きエクスポートは、複数の関数をエクスポートするユーティリティ モジュールに役立ちます。モジュールには、最大 1 つのデフォルト エクスポートと、必要な数の名前付きエクスポートを含めることができます。
ES6 モジュールの詳細については、以下をご覧ください。
ユーザーが使用する前にアプリ全体をダウンロードする代わりに、コード分割を使用すると、コードを小さなチャンクに分割して、オンデマンドでロードできるようになります。
このプロジェクト設定は、動的import()によるコード分割をサポートしています。その提案はステージ 3 にあります。 import()関数に似た形式は、モジュール名を引数として受け取り、常にモジュールの名前空間オブジェクトに解決されるPromiseを返します。
以下に例を示します。
moduleA.js const moduleA = 'Hello' ;
export { moduleA } ;App.js import React , { Component } from 'react' ;
class App extends Component {
handleClick = ( ) => {
import ( './moduleA' )
. then ( ( { moduleA } ) => {
// Use moduleA
} )
. catch ( err => {
// Handle failure
} ) ;
} ;
render ( ) {
return (
< div >
< button onClick = { this . handleClick } > Load </ button >
</ div >
) ;
}
}
export default App ;これにより、 moduleA.jsとそのすべての一意の依存関係が、ユーザーが [読み込み] ボタンをクリックした後にのみ読み込まれる別個のチャンクとして作成されます。
必要に応じて、 async / await構文と一緒に使用することもできます。
React Router を使用している場合は、React Router でコード分割を使用する方法についてのこのチュートリアルを確認してください。コンパニオン GitHub リポジトリはここで見つけることができます。
React ドキュメントの「コード分割」セクションも確認してください。
このプロジェクトのセットアップでは、すべてのアセットの処理に Webpack を使用します。 Webpack は、 importの概念を JavaScript を超えて「拡張」するカスタム方法を提供します。 JavaScript ファイルが CSS ファイルに依存していることを表現するには、 JavaScript ファイルから CSS をインポートする必要があります。
Button.css. Button {
padding : 20 px ;
}Button.js import React , { Component } from 'react' ;
import './Button.css' ; // Tell Webpack that Button.js uses these styles
class Button extends Component {
render ( ) {
// You can use them as regular CSS styles
return < div className = "Button" /> ;
}
}これは React には必須ではありませんが、多くの人がこの機能を便利だと感じています。このアプローチの利点については、こちらをご覧ください。ただし、これにより、Webpack 以外のビルド ツールや環境へのコードの移植性が低下することに注意する必要があります。
開発中、この方法で依存関係を表現すると、スタイルを編集しながらその場で再ロードできます。運用環境では、すべての CSS ファイルがビルド出力の単一の縮小された.cssファイルに連結されます。
Webpack 固有のセマンティクスの使用に懸念がある場合は、すべての CSS をsrc/index.cssに直接配置できます。引き続きsrc/index.jsからインポートされますが、後で別のビルド ツールに移行する場合は、いつでもそのインポートを削除できます。
このプロジェクトのセットアップでは CSS が縮小され、Autoprefixer を通じて自動的にベンダー プレフィックスが追加されるため、心配する必要はありません。
たとえば、これは次のとおりです。
. App {
display : flex;
flex-direction : row;
align-items : center;
}これは次のようになります:
. App {
display : -webkit-box;
display : -ms-flexbox;
display : flex;
-webkit-box-orient : horizontal;
-webkit-box-direction : normal;
-ms-flex-direction : row;
flex-direction : row;
-webkit-box-align : center;
-ms-flex-align : center;
align-items : center;
}何らかの理由で自動プレフィックスを無効にする必要がある場合は、このセクションに従ってください。
一般に、異なるコンポーネント間で同じ CSS クラスを再利用しないことをお勧めします。たとえば、 <AcceptButton>と<RejectButton>コンポーネントで.Button CSS クラスを使用する代わりに、 <AcceptButton>と<RejectButton>の両方がレンダリングできる (ただしレンダリングはできない) 独自の.Buttonスタイルを持つ<Button>コンポーネントを作成することをお勧めします。継承します）。
このルールに従うと、ミックスインやネストなどの機能がコンポーネントの構成に置き換えられるため、CSS プリプロセッサの有用性が低下することがよくあります。ただし、CSS プリプロセッサが価値がある場合は、CSS プリプロセッサを統合できます。このウォークスルーでは Sass を使用しますが、Less や別の代替手段を使用することもできます。
まず、Sass のコマンドライン インターフェイスをインストールしましょう。
npm install --save node-sass-chokidarあるいは、 yarn使用することもできます。
yarn add node-sass-chokidar次に、 package.jsonで、 scriptsに次の行を追加します。
"scripts": {
+ "build-css": "node-sass-chokidar src/ -o src/",
+ "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",注: 別のプリプロセッサを使用するには、プリプロセッサのドキュメントに従って
build-cssおよびwatch-cssコマンドを置き換えます。
これで、 src/App.css名前をsrc/App.scssに変更し、 npm run watch-css実行できるようになりました。ウォッチャーはsrcサブディレクトリ内のすべての Sass ファイルを検索し、その隣に対応する CSS ファイルを作成します (この例ではsrc/App.cssを上書きします)。 src/App.js引き続きsrc/App.cssをインポートするため、スタイルはアプリケーションの一部になります。これでsrc/App.scssを編集できるようになり、 src/App.cssが再生成されます。
Sass ファイル間で変数を共有するには、Sass インポートを使用できます。たとえば、 src/App.scssおよびその他のコンポーネント スタイル ファイルには@import "./shared.scss";変数定義付き。
相対パスを使用せずにファイルをインポートできるようにするには、 package.jsonのコマンドに--include-pathオプションを追加します。
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
これにより、次のようなインポートが可能になります
@import ' styles/_colors.scss ' ; // assuming a styles directory under src/
@import ' nprogress/nprogress ' ; // importing a css file from the nprogress node moduleこの時点で、ソース管理からすべての CSS ファイルを削除し、 src/**/*.css .gitignoreファイルに追加することをお勧めします。一般に、ビルド製品をソース管理の外に置いておくことをお勧めします。
最後のステップとして、 npm startを使用してwatch-css自動的に実行し、 npm run buildの一部としてbuild-css実行すると便利な場合があります。 &&演算子を使用すると、2 つのスクリプトを連続して実行できます。ただし、2 つのスクリプトを並行して実行するクロスプラットフォームの方法はないため、そのためのパッケージをインストールします。
npm install --save npm-run-allあるいは、 yarn使用することもできます。
yarn add npm-run-all次に、 startスクリプトとbuildスクリプトを変更して、CSS プリプロセッサ コマンドを含めることができます。
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
- "start": "react-scripts start",
- "build": "react-scripts build",
+ "start-js": "react-scripts start",
+ "start": "npm-run-all -p watch-css start-js",
+ "build-js": "react-scripts build",
+ "build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
} npm startとnpm run build実行すると、Sass ファイルもビルドされます。
なぜnode-sass-chokidarのか?
node-sass次の問題があることが報告されています。
node-sass --watch仮想マシンまたは Docker で使用すると、特定の状況でパフォーマンスの問題が発生することが報告されています。
無限スタイルのコンパイル #1939
node-sassディレクトリ #1891 内の新しいファイルの検出に問題があることが報告されています。
ここでは、これらの問題に対処するため、 node-sass-chokidar使用します。
Webpack では、画像やフォントなどの静的アセットの使用が CSS と同様に機能します。
ファイルを JavaScript モジュールに直接importできます。これにより、Webpack にそのファイルをバンドルに含めるように指示されます。 CSS インポートとは異なり、ファイルをインポートすると文字列値が得られます。この値は、コード内で参照できる最終パスです (たとえば、画像のsrc属性や PDF へのリンクのhrefとして)。
サーバーへのリクエストの数を減らすために、10,000 バイト未満のイメージをインポートすると、パスの代わりにデータ URI が返されます。これは、ファイル拡張子 bmp、gif、jpg、jpeg、および png に適用されます。 SVG ファイルは #1153 により除外されます。
以下に例を示します。
import React from 'react' ;
import logo from './logo.png' ; // Tell Webpack this JS file uses this image
console . log ( logo ) ; // /logo.84287d09.png
function Header ( ) {
// Import result is the URL of your image
return < img src = { logo } alt = "Logo" /> ;
}
export default Header ;これにより、プロジェクトのビルド時に Webpack がイメージをビルド フォルダーに正しく移動し、正しいパスが提供されるようになります。
これはCSSでも機能します:
. Logo {
background-image : url (. / logo.png);
} Webpack は、CSS 内のすべての相対モジュール参照 ( ./で始まる) を検索し、コンパイルされたバンドルの最終パスに置き換えます。タイプミスをしたり、重要なファイルを誤って削除した場合は、存在しない JavaScript モジュールをインポートした場合と同様に、コンパイル エラーが表示されます。コンパイルされたバンドルの最終的なファイル名は、Webpack によってコンテンツ ハッシュから生成されます。将来ファイルの内容が変更された場合、Webpack は本番環境でファイルに別の名前を付けるため、アセットの長期キャッシュについて心配する必要はありません。
これも Webpack のカスタム機能であることに注意してください。
React には必須ではありませんが、多くの人が楽しんでいます (React Native は画像に同様のメカニズムを使用しています)。
静的アセットを処理する別の方法については、次のセクションで説明します。
publicフォルダーの使用注: この機能は、
[email protected]以降で利用できます。
publicフォルダーには HTML ファイルが含まれているため、ページ タイトルを設定するなどの調整が可能です。コンパイルされたコードを含む<script>タグは、ビルド プロセス中に自動的に追加されます。
他のアセットをpublicフォルダーに追加することもできます。
通常は、代わりに JavaScript ファイルでアセットをimportことをお勧めします。たとえば、スタイルシートの追加と画像とフォントの追加に関するセクションを参照してください。このメカニズムには、次のような多くの利点があります。
ただし、モジュール システムの外部にアセットを追加するために使用できるエスケープ ハッチがあります。
ファイルをpublicフォルダーに置いた場合、そのファイルは Webpack によって処理されません。代わりに、そのままビルド フォルダーにコピーされます。 publicフォルダー内のアセットを参照するには、 PUBLIC_URLという特別な変数を使用する必要があります。
index.html内では、次のように使用できます。
< link rel =" shortcut icon " href =" %PUBLIC_URL%/favicon.ico " > %PUBLIC_URL%プレフィックスによってアクセスできるのは、 publicフォルダー内のファイルのみです。 srcまたはnode_modulesのファイルを使用する必要がある場合は、ファイルをそこにコピーして、このファイルをビルドの一部にする意図を明示的に指定する必要があります。
npm run build実行すると、Create React App は%PUBLIC_URL%正しい絶対パスに置き換えるため、クライアント側のルーティングを使用したり、ルート以外の URL でホストしたりしてもプロジェクトが機能します。
JavaScript コードでは、同様の目的でprocess.env.PUBLIC_URL使用できます。
render ( ) {
// Note: this is an escape hatch and should be used sparingly!
// Normally we recommend using `import` for getting asset URLs
// as described in “Adding Images and Fonts” above this section.
return < img src = { process . env . PUBLIC_URL + '/img/logo.png' } /> ;
}このアプローチの欠点に留意してください。
publicフォルダー内のファイルは後処理または縮小されません。publicフォルダーを使用する場合通常は、JavaScript からスタイルシート、画像、フォントをインポートすることをお勧めします。 publicフォルダーは、一般的ではない多くのケースの回避策として役立ちます。
manifest.webmanifestなどの特定の名前を持つファイルが必要です。pace.jsのような小さなスクリプトを含めたいと考えています。<script>タグとして含める以外に選択肢がありません。グローバル変数を宣言する<script>を追加する場合は、その使用方法に関する次のセクションも読む必要があることに注意してください。
グローバル変数を定義するスクリプトを HTML ファイルに含めて、コード内でこれらの変数の 1 つを使用しようとすると、リンターは変数の定義を認識できないためエラーを出します。
これを回避するには、次のようにwindowオブジェクトからグローバル変数を明示的に読み取ります。
const $ = window . $ ;これにより、タイプミスによるものではなく、意図的にグローバル変数を使用していることが明らかになります。
あるいは、 // eslint-disable-line後ろに追加することで、リンターに任意の行を強制的に無視させることもできます。
React Bootstrap を React と一緒に使用する必要はありませんが、Bootstrap を React アプリと統合するための人気のあるライブラリです。必要な場合は、次の手順に従って Create React App と統合できます。
npm から React Bootstrap と Bootstrap をインストールします。 React Bootstrap には Bootstrap CSS が含まれていないため、これもインストールする必要があります。
npm install --save react-bootstrap bootstrap@3あるいは、 yarn使用することもできます。
yarn add react-bootstrap bootstrap@3 Bootstrap CSS と、オプションで Bootstrap テーマ CSS をsrc/index.jsファイルの先頭にインポートします。
import 'bootstrap/dist/css/bootstrap.css' ;
import 'bootstrap/dist/css/bootstrap-theme.css' ;
// Put any other imports below so that CSS from your
// components takes precedence over default styles. src/App.jsファイルまたはカスタム コンポーネント ファイル内の必要な React Bootstrap コンポーネントをインポートします。
import { Navbar , Jumbotron , Button } from 'react-bootstrap' ;これで、render メソッドで定義されたコンポーネント階層内で、インポートされた React Bootstrap コンポーネントを使用する準備が整いました。 React Bootstrap を使用してやり直したApp.js例を次に示します。
場合によっては、Bootstrap (または同等のパッケージ) の視覚スタイルを微調整する必要があるかもしれません。
次のアプローチをお勧めします。
以下は、次の手順に従ってカスタマイズされたブートストラップを追加する例です。
Flow は、バグの少ないコードを作成するのに役立つ静的型チェッカーです。この概念に慣れていない場合は、JavaScript での静的型の使用に関するこの概要を確認してください。
最近のバージョンの Flow は、すぐに Create React App プロジェクトで動作します。
Create React App プロジェクトにフローを追加するには、次の手順に従います。
npm install --save flow-bin (またはyarn add flow-bin )を実行します。package.jsonのscriptsセクションに"flow": "flow"を追加します。npm run flow init (またはyarn flow init ) を実行して、ルート ディレクトリに.flowconfigファイルを作成します。// @flow入力チェックするファイル (たとえば、 src/App.js ) に追加します。これで、 npm run flow (またはyarn flow ) を実行して、ファイルの型エラーをチェックできるようになりました。オプションで、Nucride などの IDE を使用して、統合エクスペリエンスを向上させることができます。将来的には、Create React App にさらに緊密に統合する予定です。
Flow について詳しくは、そのドキュメントを参照してください。
「Create React App」では特定のルーティング ソリューションは規定していませんが、React Router が最も人気があります。
追加するには、次を実行します。
npm install --save react-router-domあるいは、 yarn使用することもできます。
yarn add react-router-domこれを試すには、 src/App.js内のコードをすべて削除し、Web サイト上のサンプルのいずれかに置き換えます。基本的な例は、始めるのに適した場所です。
アプリをデプロイする前に、クライアント側ルーティングをサポートするように運用サーバーを構成する必要がある場合があることに注意してください。
注: この機能は、
[email protected]以降で利用できます。
プロジェクトは、環境内で宣言された変数を、JS ファイル内でローカルに宣言されているかのように使用できます。デフォルトでは、 NODE_ENVが定義されており、 REACT_APP_で始まるその他の環境変数も設定されています。
環境変数はビルド時に埋め込まれます。 Create React App は静的な HTML/CSS/JS バンドルを生成するため、実行時にそれらを読み取ることはできません。実行時にこれらを読み取るには、ここで説明したように、HTML をサーバー上のメモリにロードし、実行時にプレースホルダーを置き換える必要があります。あるいは、変更するたびにサーバー上でアプリを再構築することもできます。
注:
REACT_APP_で始まるカスタム環境変数を作成する必要があります。NODE_ENV以外の他の変数は、同じ名前を持つ可能性のあるマシン上の秘密キーが誤って公開されることを避けるために無視されます。環境変数を変更するには、開発サーバーが実行中の場合は再起動する必要があります。
これらの環境変数はprocess.envで定義されます。たとえば、 REACT_APP_SECRET_CODEという名前の環境変数があると、JS ではprocess.env.REACT_APP_SECRET_CODEとして公開されます。
NODE_ENVと呼ばれる特別な組み込み環境変数もあります。 process.env.NODE_ENVから読み取ることができます。 npm start実行する場合は常に'development'と等しく、 npm test実行する場合は常に'test'と等しく、本番バンドルを作成するためにnpm run build実行する場合は常に'production'と等しくなります。 。 NODE_ENV手動でオーバーライドすることはできません。これにより、開発者が遅い開発ビルドを誤って運用環境にデプロイすることを防ぎます。
これらの環境変数は、プロジェクトがデプロイされている場所に基づいて条件付きで情報を表示したり、バージョン管理外にある機密データを使用したりする場合に役立ちます。
まず、環境変数を定義する必要があります。たとえば、 <form>内の環境で定義されたシークレットを使用したいとします。
render ( ) {
return (
< div >
< small > You are running this application in < b > { process . env . NODE_ENV } </ b > mode. </ small >
< form >
< input type = "hidden" defaultValue = { process . env . REACT_APP_SECRET_CODE } />
</ form >
</ div >
) ;
}ビルド中に、 process.env.REACT_APP_SECRET_CODE REACT_APP_SECRET_CODE環境変数の現在の値に置き換えられます。 NODE_ENV変数は自動的に設定されることに注意してください。
ブラウザーにアプリをロードして<input>を調べると、その値がabcdefに設定されていることがわかります。また、太字のテキストはnpm start使用するときに提供される環境を示しています。
< div >
< small > You are running this application in < b > development </ b > mode. </ small >
< form >
< input type =" hidden " value =" abcdef " />
</ form >
</ div >上記のフォームは、環境からREACT_APP_SECRET_CODEという変数を探しています。この値を使用するには、環境内で定義する必要があります。これは、シェルまたは.envファイルのいずれかで行う 2 つの方法を使用して実行できます。これらの両方の方法については、次のいくつかのセクションで説明します。
NODE_ENVにアクセスできると、条件付きでアクションを実行する場合にも役立ちます。
if ( process . env . NODE_ENV !== 'production' ) {
analytics . disable ( ) ;
} npm run buildを使用してアプリをコンパイルすると、縮小ステップによってこの条件が取り除かれ、結果として得られるバンドルは小さくなります。
注: この機能は、
[email protected]以降で利用できます。
public/index.htmlのREACT_APP_で始まる環境変数にアクセスすることもできます。例えば：
< title > %REACT_APP_WEBSITE_NAME% </ title >上記のセクションの注意事項が適用されることに注意してください。
NODE_ENVおよびPUBLIC_URL ) を除いて、変数名が機能するにはREACT_APP_で始まる必要があります。環境変数の定義は OS によって異なる場合があります。この方法は、シェル セッションが存続する間は一時的なものであることを知っておくことも重要です。
set " REACT_APP_SECRET_CODE = abcdef " && npm start(注: 末尾の空白を避けるために、変数の割り当てを引用符で囲む必要があります。)
( $ env: REACT_APP_SECRET_CODE = " abcdef " ) -and (npm start)REACT_APP_SECRET_CODE=abcdef npm start.envへの開発環境変数の追加注: この機能は、
[email protected]以降で利用できます。
永続的な環境変数を定義するには、プロジェクトのルートに.envというファイルを作成します。
REACT_APP_SECRET_CODE=abcdef
注:
REACT_APP_で始まるカスタム環境変数を作成する必要があります。NODE_ENV以外の他の変数は、同じ名前を持つ可能性のあるマシン上の秘密キーが誤って公開されることを避けるために無視されます。環境変数を変更するには、開発サーバーが実行中の場合は再起動する必要があります。
.envファイルはソース管理にチェックインする必要があります( .env*.localを除く)。
.envファイルを使用できますか?注: この機能は、
[email protected]以降で利用できます。
.env : デフォルト。.env.local : ローカルオーバーライド。このファイルは、テストを除くすべての環境にロードされます。.env.development 、 .env.test 、 .env.production : 環境固有の設定。.env.development.local 、 .env.test.local 、 .env.production.local : 環境固有の設定のローカル オーバーライド。左側のファイルは右側のファイルよりも優先されます。
npm start : .env.development.local 、 .env.development 、 .env.local 、 .envnpm run build : .env.production.local 、 .env.production 、 .env.local 、 .envnpm test ： .env.test.local 、 .env.test 、 .env （note .env.localがありません）これらの変数は、マシンが明示的に設定しない場合、デフォルトとして機能します。
詳細については、Dotenvドキュメントを参照してください。
注：開発用の環境変数を定義している場合、CIおよび/またはホスティングプラットフォームもこれらを定義する必要がある可能性が高いです。これを行う方法のドキュメントを参照してください。たとえば、Travis CIまたはHerokuのドキュメントを参照してください。
.env注：この機能は、
[email protected]以上で利用できます。
.envファイル（DotenV-Expandを使用）で使用するために、マシン上に既に変数を展開します。
たとえば、環境変数npm_package_version取得するには：
REACT_APP_VERSION=$npm_package_version
# also works:
# REACT_APP_VERSION=${npm_package_version}
または、現在の.envファイルにローカル変数を展開します。
DOMAIN=www.example.com
REACT_APP_FOO=$DOMAIN/foo
REACT_APP_BAR=$DOMAIN/bar
多くの人気のあるライブラリは、ドキュメントでデコレーターを使用しています。
Reactアプリの作成現時点では、Decoratorの構文をサポートしていません。
ただし、多くの場合、デコレータを使用せずにデコレーターベースのコードを簡単に書き換えることができます。
参照については、これら2つのスレッドを参照してください。
Create Reactアプリは、仕様が安定したステージに進むと、デコレーターサポートが追加されます。
Reactは、データフェッチへの特定のアプローチを処方しませんが、一般に、Axiosまたはブラウザが提供するfetch() APIなどのライブラリのいずれかを使用します。便利なことに、Create Reactアプリにはfetch()のポリフィルが含まれているため、ブラウザのサポートを心配することなく使用できます。
グローバルfetch機能により、Ajaxのリクエストを簡単に作成できます。これはURLを入力として受け取り、 Responseオブジェクトに解決するPromiseを返します。 fetchの詳細については、こちらをご覧ください。
このプロジェクトには、Promise/A+の完全な実装を提供するPromise Polyfillも含まれています。約束は、非同期操作の最終的な結果を表しています。こことこちらの約束に関する詳細情報を見つけることができます。 Axiosとfetch()両方がフードの下で約束を使用します。また、 async / await構文を使用して、コールバックネスティングを減らすこともできます。
React WebサイトのFAQエントリのReactコンポーネントからのAjaxリクエストの作成について詳しく知ることができます。
これらのチュートリアルは、 fetch()使用してアクセスするために別のポートで実行されているAPIバックエンドとアプリを統合するのに役立ちます。
このチュートリアルをご覧ください。コンパニオンGithubリポジトリはこちらをご覧ください。
このチュートリアルをご覧ください。コンパニオンGithubリポジトリはこちらをご覧ください。
注：この機能は、
[email protected]以上で利用できます。
多くの場合、人々はバックエンドの実装と同じホストからフロントエンドのReactアプリとポートを提供します。
たとえば、アプリが展開された後、制作セットアップは次のようになる場合があります。
/ - static server returns index.html with React app
/todos - static server returns index.html with React app
/api/todos - server handles any /api/* requests using the backend implementation
このようなセットアップは必要ありません。ただし、このようなセットアップがある場合は、開発中に別のホストやポートにリダイレクトすることを心配することなく、 fetch('/api/todos')などのリクエストを作成するのが便利です。
開発サーバーに、開発中のAPIサーバーへの不明なリクエストをプロキシに伝えるには、 package.jsonにproxyフィールドを追加します。たとえば
"proxy" : "http://localhost:4000" ,このように、開発中にfetch('/api/todos')と、開発サーバーは静的資産ではないことを認識し、 http://localhost:4000/api/todosへのリクエストをフォールバックとしてプロキシにします。開発サーバーは、 text/htmlがプロキシにヘッダーをAcceptことなくリクエストを送信しようとします。
便利なことに、これにより、CORSの問題や開発中のこのようなエラーメッセージが回避されます。
Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
proxy開発にのみ効果がある（ npm start ）、 /api/todosのようなURLが生産で正しいことを指していることを確認するのはあなた次第であることに留意してください。 /apiプレフィックスを使用する必要はありません。 text/html受け入れヘッダーを使用しない認識されていない要求は、指定されたproxyにリダイレクトされます。
proxyオプションは、HTTP、HTTPS、およびWebSocket接続をサポートしています。
proxyオプションが十分に柔軟性がない場合は、次のことができます。
proxyオプションを有効にすると、ホストチェックのより厳格なセットを選択します。これは、リモートホストにバックエンドを開いたままにしておくと、コンピューターがDNSの再配置攻撃に対して脆弱になるためです。この問題については、この記事とこの問題で説明しています。
これはlocalhostで開発するときに影響を与えるものではありませんが、ここに記載されているようにリモートで開発すると、 proxyオプションを有効にした後、ブラウザにこのエラーが表示されます。
無効なホストヘッダー
それを回避するために、プロジェクトのルートで.env.developmentというファイルでパブリック開発ホストを指定できます。
HOST=mypublicdevhost.com
今すぐ開発サーバーを再起動し、指定されたホストからアプリをロードすると、動作するはずです。
まだ問題が発生している場合、またはクラウドエディターのようなエキゾチックな環境を使用している場合は、 .env.development.localに行を追加して、ホストチェックを完全にバイパスできます。これは危険であり、悪意のあるWebサイトからマシンをリモートコード実行に公開することに注意してください。
# NOTE: THIS IS DANGEROUS!
# It exposes your machine to attacks from the websites you visit.
DANGEROUSLY_DISABLE_HOST_CHECK=true
このアプローチはお勧めしません。
注：この機能は、
[email protected]以上で利用できます。
proxyオプションが十分に柔軟でない場合は、次の形式（ package.json ）でオブジェクトを指定できます。
また、構成値http-proxy-middlewareまたはhttp-proxyサポートを指定することもできます。
{
// ...
"proxy" : {
"/api" : {
"target" : "<url>" ,
"ws" : true
// ...
}
}
// ...
}このパスに一致するすべての要求は、プロキシであり、例外はありません。これには、標準proxyオプションがプロキシではないtext/htmlのリクエストが含まれます。
複数のプロキシを指定する必要がある場合は、追加のエントリを指定することでそうすることができます。一致は正規表現であるため、複数のパスを一致させるためにregexpを使用できます。
{
// ...
"proxy" : {
// Matches any request starting with /api
"/api" : {
"target" : "<url_1>" ,
"ws" : true
// ...
} ,
// Matches any request starting with /foo
"/foo" : {
"target" : "<url_2>" ,
"ssl" : true ,
"pathRewrite" : {
"^/foo" : "/foo/beta"
}
// ...
} ,
// Matches /bar/abc.html but not /bar/sub/def.html
"/bar/[^/]*[.]html" : {
"target" : "<url_3>" ,
// ...
} ,
// Matches /baz/abc.html and /baz/sub/def.html
"/baz/.*/.*[.]html" : {
"target" : "<url_4>"
// ...
}
}
// ...
}Websocketプロキシをセットアップするとき、注意すべきいくつかの特別な考慮事項があります。
socket.ioのようなWebSocketエンジンを使用している場合は、プロキシターゲットとして使用できるsocket.ioサーバーを実行している必要があります。 Socket.ioは標準のWebSocketサーバーでは動作しません。具体的には、socket.ioがwebsocket.orgエコーテストで動作することを期待しないでください。
socket.ioサーバーのセットアップに利用できる優れたドキュメントがいくつかあります。
標準のWebSocketsは、標準のWebsocketサーバーとwebsocket.orgエコーテストで動作します。ブラウザにネイティブのWebSocketを使用して、サーバーにWSなどのライブラリを使用できます。
いずれにせよ、 package.jsonで手動でWebSocketリクエストをプロキシできます：
{
// ...
"proxy" : {
"/socket" : {
// Your compatible WebSocket server
"target" : "ws://<socket_url>" ,
// Tell http-proxy-middleware that this is a WebSocket proxy.
// Also allows you to proxy WebSocket requests without an additional HTTP request
// https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade
"ws" : true
// ...
}
}
// ...
} 注：この機能は、
[email protected]以上で利用できます。
devサーバーにHTTPSを介してページを提供する必要がある場合があります。これが役立つ可能性のある特定のケースの1つは、「プロキシ」機能を使用して、APIサーバーがそれ自体がHTTPSを提供しているときにAPIサーバーにプロキシ要求を使用する場合です。
これを行うには、 HTTPS環境変数をtrueに設定し、 npm startて通常どおり開発サーバーを起動します。
set HTTPS = true && npm start ( $ env: HTTPS = $true ) -and (npm start)（注：空白の欠如は意図的です。）
HTTPS=true npm startサーバーはセルフ署名証明書を使用するため、Webブラウザーはページにアクセスすると警告をほぼ間違いなく表示することに注意してください。
<meta>タグを生成しますCreate React Appはサーバーのレンダリングをサポートしていないため、 <meta>タグを動的にして現在のURLを反映する方法を疑問に思うかもしれません。これを解決するには、次のようにプレースホルダーをHTMLに追加することをお勧めします。
<!doctype html >
< html lang =" en " >
< head >
< meta property =" og:title " content =" __OG_TITLE__ " >
< meta property =" og:description " content =" __OG_DESCRIPTION__ " >次に、使用するバックエンドに関係なく、サーバーでは、 index.htmlメモリに読み取り、 __OG_TITLE__ 、 __OG_DESCRIPTION__ 、およびその他のプレースホルダーを現在のURLに応じて値で置き換えることができます。 HTMLに埋め込まれても安全になるように、補間された値を消毒して逃れるようにしてください！
ノードサーバーを使用する場合、クライアントとサーバーの間でルートマッチングロジックを共有することもできます。ただし、それを複製することも、簡単な場合にも正常に機能します。
静的ホスティングプロバイダーを使用してbuildをホストする場合は、React-SnapshotまたはReact-Snapを使用して、アプリケーションで各ルートまたは相対リンクのHTMLページを生成できます。これらのページは、JavaScriptバンドルがロードされたときに、シームレスにアクティブ、または「水分補給」になります。
また、これを静的ホスティング以外で使用し、ルートを生成してキャッシュするときにサーバーから圧力をかける機会もあります。
事前レンダリングの主な利点は、JavaScriptバンドルが正常にダウンロードされるかどうかに関係なく、HTMLペイロードを使用して各ページのコアコンテンツを取得することです。また、アプリケーションの各ルートが検索エンジンによってピックアップされる可能性も高くなります。
ゼロコンフィ分の事前レンダリング（スナップショットとも呼ばれます）の詳細については、こちらをご覧ください。
前のセクションと同様に、グローバル変数を注入するHTMLにプレースホルダーを残すことができます。
< ! doctype html >
< html lang = "en" >
< head >
< script >
window.SERVER_DATA = __SERVER_DATA__;
</ script >次に、サーバーで、応答を送信する直前に__SERVER_DATA__実際のデータのJSONに置き換えることができます。クライアントコードは、 window.SERVER_DATAを読み取って使用できます。 XSS攻撃に対してアプリを脆弱にするため、クライアントに送信する前にJSONをサニタイズしてください。
注：この機能は、
[email protected]以上で利用できます。
移行ガイドを読んで、古いプロジェクトで有効にする方法を学びましょう！
Create ReactアプリはJestをテストランナーとして使用します。この統合に備えるために、私たちはJestの大規模な刷新を行いました。
Jestはノードベースのランナーです。これは、テストが常に実際のブラウザではなくノード環境で実行されることを意味します。これにより、迅速な反復速度を有効にし、フレークネスを防ぐことができます。
JESTはJSDOMのおかげでwindowなどのブラウザグローバルを提供しますが、それらは実際のブラウザの動作の近似にすぎません。 JESTは、DOMの癖ではなく、ロジックとコンポーネントの単体テストに使用することを目的としています。
必要な場合は、ブラウザのエンドツーエンドテストに個別のツールを使用することをお勧めします。それらは、Create Reactアプリの範囲を超えています。
Jestは、次の人気のある命名規則のいずれかを含むテストファイルを探します。
__tests__フォルダーに.js接尾辞を備えたファイル。.test.js接尾辞を備えたファイル。.spec.js接尾辞を備えたファイル。 .test.js / .spec.jsファイル（または__tests__フォルダー）は、 srcトップレベルフォルダーの下の任意の深さに配置できます。
テストファイル（または__tests__フォルダー）をテストしているコードの隣に配置して、相対的なインポートが短くなるようにすることをお勧めします。たとえば、 App.test.jsとApp.js同じフォルダーにある場合、テストは長い相対パスの代わりにimport App from './App'必要があります。コロケーションは、大規模なプロジェクトでより迅速にテストを見つけるのに役立ちます。
npm test実行すると、JESTはウォッチモードで起動します。ファイルを保存するたびに、 npm startと同じように、テストが再実行されます。
ウォッチャーには、すべてのテストを実行する機能、または検索パターンに焦点を合わせる機能を備えたインタラクティブなコマンドラインインターフェイスが含まれています。このように設計されているため、開いたままにして迅速な再実行を楽しむことができます。 「Watch Usage」からコマンドを学ぶことができます。
デフォルトでは、 npm test実行すると、Jestは最後のコミット以降に変更されたファイルに関連するテストのみを実行します。これは、テストの数に関係なく、テストを速く実行するように設計された最適化です。ただし、テストに合格しないコードを頻繁にコミットしないことを前提としています。
Jestは、最後のコミット以降に変更されたファイルに関連するテストのみを実行したことを常に明示的に言及します。時計モードでa押して、Jestにすべてのテストを実行するように強制することもできます。
JESTは、常に継続的な統合サーバーですべてのテストを実行します。または、プロジェクトがGitまたはMercurialリポジトリ内にない場合。
テストを作成するには、テストの名前とそのコードを使用してit()またはtest() ）ブロックを追加します。オプションで、論理グループ化のためにdescribe()ブロックでそれらをラップすることもできますが、これは必須でも推奨されません。
JESTは、アサーションを作成するための組み込みのexpect()グローバル機能を提供します。基本的なテストは次のようになります：
import sum from './sum' ;
it ( 'sums numbers' , ( ) => {
expect ( sum ( 1 , 2 ) ) . toEqual ( 3 ) ;
expect ( sum ( 2 , 2 ) ) . toEqual ( 4 ) ;
} ) ; JESTでサポートされているすべてのexpect()マッチャーは、ここで広範囲に文書化されています。
jest.fn()使用してexpect(fn).toBeCalled() 「スパイ」または模擬関数を作成することもできます。
幅広いコンポーネントテスト技術があります。それらは、「煙検査」から、コンポーネントが投げずにレンダリングすることを検証するものから、浅いレンダリングとテストの一部を、コンポーネントのライフサイクルと状態の変化を完全にレンダリングおよびテストすることにまで及びます。
さまざまなプロジェクトは、コンポーネントの変化頻度とそれらに含まれるロジックの量に基づいて、さまざまなテストトレードオフを選択します。まだテスト戦略を決定していない場合は、コンポーネントの簡単な煙検査を作成することから始めることをお勧めします。
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import App from './App' ;
it ( 'renders without crashing' , ( ) => {
const div = document . createElement ( 'div' ) ;
ReactDOM . render ( < App /> , div ) ;
} ) ;このテストはコンポーネントをマウントし、レンダリング中にスローしなかったことを確認します。このようなテストは、ほとんど努力をせずに多くの価値を提供するため、出発点として優れています。これは、 src/App.test.jsにあるテストです。
コンポーネントの変更によって引き起こされるバグに遭遇すると、アプリケーションでテストする価値がある部分について、より深い洞察が得られます。これは、特定の予想出力または動作を主張するより具体的なテストを導入する良い時期かもしれません。
レンダリングする子供コンポーネントから単独でコンポーネントをテストしたい場合は、 shallow()レンダリングAPIを酵素から使用することをお勧めします。インストールするには、実行してください。
npm install --save enzyme enzyme-adapter-react-16 react-test-rendererまたは、 yarnを使用することもできます。
yarn add enzyme enzyme-adapter-react-16 react-test-renderer酵素3の時点では、使用しているReactのバージョンに対応するアダプターとともに、酵素をインストールする必要があります。 （上記の例は、React 16にアダプターを使用します。）
また、アダプターはグローバルセットアップファイルで構成する必要があります。
src/setupTests.js import { configure } from 'enzyme' ;
import Adapter from 'enzyme-adapter-react-16' ;
configure ( { adapter : new Adapter ( ) } ) ;注：
src/setupTests.js作成する前に「排出」することにした場合、結果のpackage.jsonファイルには参照が含まれないことに注意してください。ここを読んで、排出後にこれを追加する方法を学んでください。
これで、煙検査を書くことができます。
import React from 'react' ;
import { shallow } from 'enzyme' ;
import App from './App' ;
it ( 'renders without crashing' , ( ) => {
shallow ( < App /> ) ;
} ) ; ReactDOM.render()を使用した以前の煙検査とは異なり、このテストは<App>のみをレンダリングし、深くなりません。たとえば、 <App>それ自体がスローする<Button>をレンダリングしたとしても、このテストは渡されます。浅いレンダリングは孤立した単体テストに最適ですが、コンポーネントが正しく統合されるように、完全なレンダリングテストを作成することをお勧めします。 Enzymeはmount()で完全なレンダリングをサポートしており、状態の変更やコンポーネントライフサイクルのテストにも使用できます。
より多くのテスト技術については、酵素文書を読むことができます。 Enzyme Documentationは、AssertionにChaiとSinonを使用しますが、Jestはスパイに組み込みのexpect()とjest.fn()を提供するため、それらを使用する必要はありません。
以下は、特定の出力を主張する酵素文書の例を示します。
import React from 'react' ;
import { shallow } from 'enzyme' ;
import App from './App' ;
it ( 'renders welcome message' , ( ) => {
const wrapper = shallow ( < App /> ) ;
const welcome = < h2 > Welcome to React </ h2 > ;
// expect(wrapper.contains(welcome)).to.equal(true);
expect ( wrapper . contains ( welcome ) ) . toEqual ( true ) ;
} ) ;すべてのJestマッチャーは、ここで広範囲に文書化されています。
それにもかかわらず、以下に説明するように、必要に応じてチャイのようなサードパーティのアサーションライブラリを使用できます。
さらに、読みやすいマッチャーでテストを簡素化するのに役立つJEST-Enzymeが役立つ場合があります。上記containsコードは、Jest-enzymeでより簡単に記述できます。
expect ( wrapper ) . toContainReact ( welcome )これを有効にするには、 jest-enzymeをインストールします。
npm install --save jest-enzymeまたは、 yarnを使用することもできます。
yarn add jest-enzyme src/setupTests.jsでインポートして、すべてのテストでマッチャーを利用できるようにします。
import 'jest-enzyme' ; react-testing-library使用しますenzymeの代替またはコンパニオンとして、 react-testing-library使用を検討することができます。 react-testing-libraryエンドユーザーがコンポーネントを使用する方法に似た方法でReactコンポーネントをテストするためのライブラリです。ユニット、統合、および反応成分とアプリケーションのエンドツーエンドのテストに適しています。 DOMノードをより直接的に動作するため、Assertionsの改善のためにjest-domで使用することをお勧めします。
react-testing-libraryとjest-domをインストールするには、実行できます。
npm install --save react-testing-library jest-domまたは、 yarnを使用することもできます。
yarn add react-testing-library jest-dom enzymeと同様に、テストファイルのボイラープレートを避けるために、 src/setupTests.jsファイルを作成できます。
// react-testing-library renders your components to document.body,
// this will ensure they're removed after each test.
import 'react-testing-library/cleanup-after-each' ;
// this adds jest-dom's custom assertions
import 'jest-dom/extend-expect' ; <App />コンポーネントが「Welcome to React」をレンダリングすることをテストするためにreact-testing-libraryとjest-dom使用する例を示します。
import React from 'react' ;
import { render } from 'react-testing-library' ;
import App from './App' ;
it ( 'renders welcome message' , ( ) => {
const { getByText } = render ( < App /> ) ;
expect ( getByText ( 'Welcome to React' ) ) . toBeInTheDOM ( ) ;
} ) ;非同期相互作用のテストを容易にするだけでなく、 react-testing-libraryドキュメントと例からフォーム要素を選択するためにreact-testing-libraryによって提供されるユーティリティの詳細をご覧ください。
Assertions for Assertionsおよびjest.fn()にSpieにexpect()を使用することをお勧めします。それらに問題がある場合は、それらを冗談に対して提出してください。修正します。私たちは、たとえば、JSXとしてかなり印刷する反応要素をサポートするために、それらをより良くし続けるつもりです。
ただし、ChaiやSinonなどの他のライブラリに慣れている場合、またはポートしたい既存のコードを使用している場合は、次のように通常インポートできます。
import sinon from 'sinon' ;
import { expect } from 'chai' ;そして、あなたが通常するようにあなたのテストでそれらを使用します。
注：この機能は、
[email protected]以上で利用できます。
アプリがテストでモックする必要があるブラウザAPIを使用している場合、またはテストを実行する前にグローバルなセットアップが必要な場合は、 src/setupTests.jsプロジェクトに追加します。テストを実行する前に自動的に実行されます。
例えば：
src/setupTests.js const localStorageMock = {
getItem : jest . fn ( ) ,
setItem : jest . fn ( ) ,
clear : jest . fn ( )
} ;
global . localStorage = localStorageMock注：
src/setupTests.js作成する前に「排出」することにした場合、結果のpackage.jsonファイルはそれを参照しないため、Jestの構成でプロパティsetupTestFrameworkScriptFile手動で作成する必要があることに注意してください。次のようなもの：
"jest" : { // ... "setupTestFrameworkScriptFile" : "<rootDir>/src/setupTests.js" }
it() xit()に置き換えて、実行中からテストを一時的に除外できます。
同様に、 fit()使用すると、他のテストを実行せずに特定のテストに集中できます。
Jestには、ES6でうまく機能する統合されたカバレッジレポーターがあり、構成は必要ありません。
npm test -- --coverage （中央に注意--するために、このようなカバレッジレポートを含める：
テストはカバレッジではるかに遅く実行されるため、通常のワークフローとは別に実行することをお勧めします。
デフォルトのJestカバレッジ構成は、Package.jsonのJest構成に次のサポートされているキーを追加することにより、オーバーライデンにすることができます。
サポートされているオーバーライド：
collectCoverageFromcoverageReporterscoverageThresholdsnapshotSerializers例package.json：
{
"name" : " your-package " ,
"jest" : {
"collectCoverageFrom" : [
" src/**/*.{js,jsx} " ,
" !<rootDir>/node_modules/ " ,
" !<rootDir>/path/to/dir/ "
],
"coverageThreshold" : {
"global" : {
"branches" : 90 ,
"functions" : 90 ,
"lines" : 90 ,
"statements" : 90
}
},
"coverageReporters" : [ " text " ],
"snapshotSerializers" : [ " my-serializer-module " ]
}
}デフォルトでは、 npm testインタラクティブCLIでウォッチャーを実行します。ただし、 CIと呼ばれる環境変数を設定することにより、テストを1回実行し、プロセスを完了するように強制することができます。
npm run buildリンジターの警告はデフォルトで確認されません。 npm testと同様に、環境変数CI設定することにより、ビルドにライター警告チェックの実行を強制できます。警告が発生した場合、ビルドは失敗します。
人気のあるCIサーバーは、既に環境変数CIデフォルトで設定していますが、これを自分で行うこともできます。
.travis.ymlファイルをgitリポジトリに追加します。 language: node_js
node_js:
- 6
cache:
directories:
- node_modules
script:
- npm run build
- npm test
この記事に従って、Create React AppプロジェクトでCircleciをセットアップします。
set CI = true && npm test set CI = true && npm run build（注：空白の欠如は意図的です。）
( $ env: CI = $true ) -and (npm test)( $ env: CI = $true ) -and (npm run build)CI=true npm test CI=true npm run buildテストコマンドは、ウォッチャーを起動する代わりに、Jestにテストを1回実行するように強制されます。
開発中にこれを頻繁に行っている場合は、Watcherを最高の体験にし、より多くのワークフローに対応するために機能する方法を変えることにオープンにしたいので、ユースケースについてお知らせしてください。
ビルドコマンドは、リナー警告をチェックし、見つかった場合に失敗します。
デフォルトでは、生成されたプロジェクトのpackage.jsonは次のようになります。
"scripts" : {
"start" : "react-scripts start" ,
"build" : "react-scripts build" ,
"test" : "react-scripts test --env=jsdom"テストがJSDOMに依存しないことがわかっている場合、安全に削除できます--env=jsdom 、およびテストはより速く実行されます。
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
- "test": "react-scripts test --env=jsdom"
+ "test": "react-scripts test"あなたがあなたの決心をするのを助けるために、ここにJSDOMが必要なAPIのリストがあります：
windowやdocumentなどのブラウザグローバルReactDOM.render()TestUtils.renderIntoDocument() （上記のショートカット）mount()対照的に、次のAPIではJSDOMは必要ありません。
TestUtils.createRenderer() （浅いレンダリング）shallow()最後に、JSDOMはスナップショットテストにも必要ありません。
スナップショットテストは、コンポーネントのテキストスナップショットを自動的に生成し、ディスク上に保存するJESTの機能であるため、UI出力が変更された場合、コンポーネント出力に手動でアサーションを書くことなく通知されます。スナップショットテストの詳細をご覧ください。
Visual Studioコードを使用する場合、Create Reactアプリで動作するJEST拡張機能があります。これは、テキストエディターを使用しながら、多くのIDEのような機能を提供します。潜在的な失敗メッセージをインラインで潜在的な失敗した実行のステータスを表示し、ウォッチャーを自動的に開始および停止し、ワンクリックスナップショットの更新を提供します。
JESTテスト用のデバッガーをセットアップするには、さまざまな方法があります。 ChromeおよびVisual Studioコードでのデバッグについて説明します。
注：デバッグテストには、ノード8以降が必要です。
プロジェクトのpackage.jsonのscriptsセクションに以下を追加します
"scripts" : {
"test:debug" : " react-scripts --inspect-brk test --runInBand --env=jsdom "
} debugger;任意のテストと実行のステートメント：
$ npm run test:debugこれにより、JESTテストの実行が開始されますが、デバッガーがプロセスに添付できるように実行する前に一時停止します。
Chromeで以下を開きます
about:inspect
そのリンクを開いた後、Chrome開発者ツールが表示されます。 [プロセスのinspect選択すると、BreakpointがReactスクリプトの最初の行に設定されます（これは、開発者ツールを開く時間を与え、その時間がある前にJestが実行されるのを防ぐために行われます）。画面の右側の「再生」ボタンのように見えるボタンをクリックして、実行を続行します。 Jestがデバッガーステートメントを含むテストを実行すると、実行が一時停止し、現在のスコープを調べてスタックを呼び出すことができます。
注：-runinband CLIオプションにより、個々のテストの産卵プロセスではなく、同じプロセスでJestがテストを実行することを確認します。通常、Jestはプロセス間でテストの実行を並列化しますが、多くのプロセスを同時にデバッグすることは困難です。
Jestテストのデバッグは、Visual Studioコードのために箱から出してサポートされています。
次のlaunch.json構成ファイルを使用してください。
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug CRA Tests",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
"args": [
"test",
"--runInBand",
"--no-cache",
"--env=jsdom"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
通常、アプリでは、多くのUIコンポーネントがあり、それぞれに多くの異なる状態があります。たとえば、単純なボタンコンポーネントには次のような状態があります。
通常、サンプルアプリやいくつかの例を実行することなく、これらの状態を見るのは困難です。
Create React Appはデフォルトでこれのツールを含めていませんが、React（Source）またはReact StyleGuidist（ソース）のストーリーブックをプロジェクトに簡単に追加できます。これらは、コンポーネントを開発し、すべての状態をアプリから単独で確認できるサードパーティツールです。
ストーリーブックやスタイルガイドを静的アプリとして展開することもできます。これにより、チームの全員が、バックエンドサーバーを起動したり、アプリでアカウントを作成したりせずに、UIコンポーネントのさまざまな状態を表示および確認できます。
ストーリーブックは、React UIコンポーネントの開発環境です。コンポーネントライブラリを閲覧し、各コンポーネントのさまざまな状態を表示し、コンポーネントをインタラクティブに開発およびテストすることができます。
まず、次のNPMパッケージをグローバルにインストールします。
npm install -g @storybook/cli次に、アプリのディレクトリ内で次のコマンドを実行します。
getstorybookその後、画面の指示に従ってください。
React Storybookの詳細をご覧ください：
StyleGuidistは、スタイルガイドを組み合わせています。すべてのコンポーネントは、ストーリーブックと同様に、すべてのコンポーネントが1ページのドキュメントと使用例を備えた環境と単独のコンポーネントを開発するための環境を組み合わせています。 StyleGuidistでは、各コードスニペットがライブ編集可能な遊び場としてレンダリングされるマークダウンで例を書きます。
まず、StyleGuidistをインストールしてください：
npm install --save react-styleguidistまたは、 yarnを使用することもできます。
yarn add react-styleguidist次に、これらのスクリプトをpackage.jsonに追加します：
"scripts": {
+ "styleguide": "styleguidist server",
+ "styleguide:build": "styleguidist build",
"start": "react-scripts start",次に、アプリのディレクトリ内で次のコマンドを実行します。
npm run styleguideその後、画面の指示に従ってください。
React StyleGuidistの詳細については、
Create React Appは、コンポーネントをnpmに公開するための組み込み機能を提供しません。他の人がそれを使用できるようにプロジェクトからコンポーネントを抽出する準備ができている場合は、プロジェクトの外側の別のディレクトリに移動し、NWBのようなツールを使用して公開の準備をすることをお勧めします。
デフォルトでは、プロダクションビルドは、完全に機能的でオフラインファーストプログレッシブWebアプリです。
プログレッシブWebアプリは、従来のWebページよりも高速で信頼性が高く、魅力的なモバイルエクスペリエンスを提供します。
sw-precache-webpack-plugin生産構成に統合されており、すべての地元の資産を自動的に処理し、更新を展開する際に最新の状態に保つサービスワーカーファイルの生成に対応します。サービスワーカーは、最初のHTMLを含むローカルアセットのすべての要求を処理するためにキャッシュファースト戦略を使用して、ゆっくりまたは信頼できないネットワークでもWebアプリが確実に高速であることを保証します。
最初の生産展開の前にサービスワーカーを有効にしたくない場合は、 src/index.jsからregisterServiceWorker()への呼び出しを削除します。
以前に本番展開でサービスワーカーを有効にしていた場合、既存のすべてのユーザーに対してそれらを無効にすることを決定した場合、サービスワーカーのインポートを変更することにより、最初にsrc/index.jsのregisterServiceWorker()に通話を交換できます:
import { unregister } from './registerServiceWorker' ;代わりにunregister()呼び出します。ユーザーがunregister()を持つページにアクセスすると、サービスワーカーがアンインストールされます。 /service-worker.jsの提供方法によっては、キャッシュが無効になるまで最大24時間かかる場合があることに注意してください。
サービスワーカーにはHTTPSが必要ですが、ローカルテストを容易にするために、そのポリシーはlocalhostには適用されません。制作WebサーバーがHTTPSをサポートしていない場合、サービスワーカーの登録は失敗しますが、Webアプリの残りの部分は機能し続けます。
サービスワーカーは現在、すべてのWebブラウザでサポートされていません。サービスワーカーの登録は、サポートがないブラウザでは試みられません。
サービスワーカーは、生産環境、たとえばnpm run buildの出力でのみ有効になります。以前にキャッシュされた資産が使用され、ローカルで行った最新の変更を含めない場合にフラストレーションにつながる可能性があるため、開発環境でオフラインファーストサービスワーカーを有効にしないことをお勧めします。
オフラインファーストサービスワーカーをローカルでテストする必要がある場合は、アプリケーションを構築し（ npm run buildを使用）、ビルドディレクトリから簡単なHTTPサーバーを実行します。 Build Scriptを実行した後、 create-react-app生産ビルドをローカルでテストする1つの方法の指示を提供し、展開手順には他の方法を使用する手順があります。必ずブラウザキャッシュとの合併症を避けるために、常にシークレットウィンドウを使用してください。
可能であれば、生成されたservice-worker.js HTTPキャッシングを無効にして提供するように生産環境を構成します。それが不可能な場合 - たとえば、Githubページでは、デフォルトの10分間のHTTPキャッシュライフタイムを変更することはできません。その場合、生産サイトにアクセスしてから、 service-worker.js失効する前に再び再訪することに注意してください。 httpキャッシュは、以前にキャッシュされた資産をサービスワーカーから取得し続けます。更新された生産展開をすぐに表示する必要がある場合、シフトリフレッシュを実行すると、サービスワーカーが一時的に無効になり、ネットワークからすべての資産を取得します。
ユーザーは常にオフラインファーストWebアプリに精通しているわけではありません。サービスワーカーがあなたのキャッシュの穴を開けるとき（「このWebアプリがオフラインで動作する！」メッセージを表示する）、およびサービスワーカーが利用可能な最新のアップデートを取得したときに知らせることは、ユーザーに知らせることが役立ちます。次回ページをロードするとき（「新しいコンテンツが利用可能です。更新してください。」メッセージを表示します）。このメッセージの表示は現在、開発者への演習として残されていますが、出発点として、 src/registerServiceWorker.jsに含まれるロジックを利用できます。これはデフォルトとして、JavaScriptコンソールに適切なメッセージを記録するだけです。
デフォルトでは、生成されたサービスワーカーファイルは、異なるドメインからロードされたHTTP APIリクエスト、画像、または埋め込みのように、クロスオリジントラフィックをインターセプトまたはキャッシュしません。これらのリクエストにランタイムキャッシング戦略を使用する場合は、 webpack.config.prod.jsのSWPrecacheWebpackPluginセクションでruntimeCachingオプションをejectて構成できます。
デフォルトの構成には、 public/manifest.jsonにあるWebアプリマニフェストが含まれており、Webアプリケーションに固有の詳細を使用してカスタマイズできます。
ユーザーがAndroidでChromeまたはFirefoxを使用してホーム画面にWebアプリを追加すると、 manifest.jsonのメタデータは、Webアプリの表示時に使用するアイコン、名前、ブランディング色を決定します。 Webアプリマニフェストガイドは、各フィールドの意味、およびカスタマイズがユーザーのエクスペリエンスにどのように影響するかについて、より多くのコンテキストを提供します。
ソースマップエクスプローラーは、ソースマップを使用してJavaScriptバンドルを分析します。これは、コードの肥大化がどこから来ているのかを理解するのに役立ちます。
Source Map ExplorerをCreate Reactアプリプロジェクトに追加するには、次の手順に従ってください。
npm install --save source-map-explorerまたは、 yarnを使用することもできます。
yarn add source-map-explorer次に、 package.jsonで、次の行をscriptsに追加します。
"scripts": {
+ "analyze": "source-map-explorer build/static/js/main.*",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",次に、バンドルを分析するには、生産ビルドを実行し、分析スクリプトを実行します。
npm run build
npm run analyze
npm run buildアプリの生産ビルドを備えたbuildディレクトリを作成します。 Set up your favorite HTTP server so that a visitor to your site is served index.html , and requests to static paths like /static/js/main.<hash>.js are served with the contents of the /static/js/main.<hash>.js file.
For environments using Node, the easiest way to handle this would be to install serve and let it handle the rest:
npm install -g serve
serve -s build The last command shown above will serve your static site on the port 5000 . Like many of serve's internal settings, the port can be adjusted using the -p or --port flags.
Run this command to get a full list of the options available:
serve -hYou don't necessarily need a static server in order to run a Create React App project in production. It works just as fine integrated into an existing dynamic one.
Here's a programmatic example using Node and Express:
const express = require ( 'express' ) ;
const path = require ( 'path' ) ;
const app = express ( ) ;
app . use ( express . static ( path . join ( __dirname , 'build' ) ) ) ;
app . get ( '/' , function ( req , res ) {
res . sendFile ( path . join ( __dirname , 'build' , 'index.html' ) ) ;
} ) ;
app . listen ( 9000 ) ;The choice of your server software isn't important either. Since Create React App is completely platform-agnostic, there's no need to explicitly use Node.
The build folder with static assets is the only output produced by Create React App.
However this is not quite enough if you use client-side routing. Read the next section if you want to support URLs like /todos/42 in your single-page app.
If you use routers that use the HTML5 pushState history API under the hood (for example, React Router with browserHistory ), many static file servers will fail. For example, if you used React Router with a route for /todos/42 , the development server will respond to localhost:3000/todos/42 properly, but an Express serving a production build as above will not.
This is because when there is a fresh page load for a /todos/42 , the server looks for the file build/todos/42 and does not find it. The server needs to be configured to respond to a request to /todos/42 by serving index.html . For example, we can amend our Express example above to serve index.html for any unknown paths:
app.use(express.static(path.join(__dirname, 'build')));
- app.get('/', function (req, res) {
+ app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
}); If you're using Apache HTTP Server, you need to create a .htaccess file in the public folder that looks like this:
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
It will get copied to the build folder when you run npm run build .
If you're using Apache Tomcat, you need to follow this Stack Overflow answer.
Now requests to /todos/42 will be handled correctly both in development and in production.
On a production build, and in a browser that supports service workers, the service worker will automatically handle all navigation requests, like for /todos/42 , by serving the cached copy of your index.html . This service worker navigation routing can be configured or disabled by eject ing and then modifying the navigateFallback and navigateFallbackWhitelist options of the SWPreachePlugin configuration.
When users install your app to the homescreen of their device the default configuration will make a shortcut to /index.html . This may not work for client-side routers which expect the app to be served from / . Edit the web app manifest at public/manifest.json and change start_url to match the required URL scheme, for example:
"start_url" : "." , By default, Create React App produces a build assuming your app is hosted at the server root.
To override this, specify the homepage in your package.json , for example:
"homepage" : "http://mywebsite.com/relativepath" ,This will let Create React App correctly infer the root path to use in the generated HTML file.
Note : If you are using react-router@^4 , you can root <Link> s using the basename prop on any <Router> .
詳細については、こちらをご覧ください。
例えば：
< BrowserRouter basename = "/calendar" />
< Link to = "/today" / > // renders <a href="/calendar/today"> Note: this feature is available with
[email protected]and higher.
If you are not using the HTML5 pushState history API or not using client-side routing at all, it is unnecessary to specify the URL from which your app will be served. Instead, you can put this in your package.json :
"homepage" : "." , This will make sure that all the asset paths are relative to index.html . You will then be able to move your app from http://mywebsite.com to http://mywebsite.com/relativepath or even http://mywebsite.com/relative/path without having to rebuild it.
See this blog post on how to deploy your React app to Microsoft Azure.
See this blog post or this repo for a way to use automatic deployment to Azure App Service.
Install the Firebase CLI if you haven't already by running npm install -g firebase-tools . Sign up for a Firebase account and create a new project. Run firebase login and login with your previous created Firebase account.
Then run the firebase init command from your project's root. You need to choose the Hosting: Configure and deploy Firebase Hosting sites and choose the Firebase project you created in the previous step. You will need to agree with database.rules.json being created, choose build as the public directory, and also agree to Configure as a single-page app by replying with y .
=== Project Setup
First, let ' s associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we ' ll just set up a default project.
? What Firebase project do you want to associate as default ? Example app (example-app-fd690)
=== Database Setup
Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.
? What file should be used for Database Rules ? database.rules.json
✔ Database Rules for example-app-fd690 have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to uploaded with firebase deploy. If you
have a build process for your assets, use your build ' s output directory.
? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔ Wrote build/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete! IMPORTANT: you need to set proper HTTP caching headers for service-worker.js file in firebase.json file or you will not be able to see changes after first deployment (issue #2440). It should be added inside "hosting" key like next:
{
"hosting": {
...
"headers": [
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
]
...
Now, after you create a production build with npm run build , you can deploy it by running firebase deploy .
=== Deploying to ' example-app-fd690 ' ...
i deploying database, hosting
✔ database: rules ready to deploy.
i hosting: preparing build directory for upload...
Uploading: [ ============================== ] 75%✔ hosting: build folder uploaded successfully
✔ hosting: 8 files uploaded successfully
i starting release process (may take several minutes)...
✔ Deploy complete !
Project Console: https://console.firebase.google.com/project/example-app-fd690/overview
Hosting URL: https://example-app-fd690.firebaseapp.comFor more information see Add Firebase to your JavaScript Project.
Note: this feature is available with
[email protected]and higher.
homepage to package.json The step below is important!
If you skip it, your app will not deploy correctly.
Open your package.json and add a homepage field for your project:
"homepage" : " https://myusername.github.io/my-app " ,or for a GitHub user page:
"homepage" : " https://myusername.github.io " , Create React App uses the homepage field to determine the root URL in the built HTML file.
gh-pages and add deploy to scripts in package.json Now, whenever you run npm run build , you will see a cheat sheet with instructions on how to deploy to GitHub Pages.
To publish it at https://myusername.github.io/my-app, run:
npm install --save gh-pages Alternatively you may use yarn :
yarn add gh-pages Add the following scripts in your package.json :
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build", The predeploy script will run automatically before deploy is run.
If you are deploying to a GitHub user page instead of a project page you'll need to make two additional modifications:
package.json scripts to push deployments to master : "scripts": {
"predeploy": "npm run build",
- "deploy": "gh-pages -d build",
+ "deploy": "gh-pages -b master -d build", npm run deployThen run:
npm run deploygh-pages Finally, make sure GitHub Pages option in your GitHub project settings is set to use the gh-pages branch:
You can configure a custom domain with GitHub Pages by adding a CNAME file to the public/ folder.
GitHub Pages doesn't support routers that use the HTML5 pushState history API under the hood (for example, React Router using browserHistory ). This is because when there is a fresh page load for a url like http://user.github.io/todomvc/todos/42 , where /todos/42 is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /todos/42 . If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj ) 。 Read more about different history implementations in React Router.index.html page with a special redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you'll need to add code handling the redirect parameter to index.html . You can find a detailed explanation of this technique in this guide. If, when deploying, you get /dev/tty: No such a device or address or a similar error, try the follwing:
git remote set-url origin https://<user>:<token>@github.com/<user>/<repo> .npm run deploy againUse the Heroku Buildpack for Create React App.
You can find instructions in Deploying React with Zero Configuration.
Sometimes npm run build works locally but fails during deploy via Heroku. Following are the most common cases.
If you get something like this:
remote: Failed to create a production build. Reason:
remote: Module not found: Error: Cannot resolve 'file' or 'directory'
MyDirectory in /tmp/build_1234/src
It means you need to ensure that the lettercase of the file or directory you import matches the one you see on your filesystem or on GitHub.
This is important because Linux (the operating system used by Heroku) is case sensitive. So MyDirectory and mydirectory are two distinct directories and thus, even though the project builds locally, the difference in case breaks the import statements on Heroku remotes.
If you exclude or ignore necessary files from the package you will see a error similar this one:
remote: Could not find a required file.
remote: Name: `index.html`
remote: Searched in: /tmp/build_a2875fc163b209225122d68916f1d4df/public
remote:
remote: npm ERR! Linux 3.13.0-105-generic
remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/node" "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/npm" "run" "build"
In this case, ensure that the file is there with the proper lettercase and that's not ignored on your local .gitignore or ~/.gitignore_global .
To do a manual deploy to Netlify's CDN:
npm install netlify-cli -g
netlify deploy Choose build as the path to deploy.
To setup continuous delivery:
With this setup Netlify will build and deploy when you push to git or open a pull request:
yarn build as the build command and build as the publish directoryDeploy siteSupport for client-side routing:
To support pushState , make sure to create a public/_redirects file with the following rewrite rules:
/* /index.html 200
When you build the project, Create React App will place the public folder contents into the build output.
Now offers a zero-configuration single-command deployment. You can use now to deploy your app for free.
Install the now command-line tool either via the recommended desktop tool or via node with npm install -g now .
Build your app by running npm run build .
Move into the build directory by running cd build .
Run now --name your-project-name from within the build directory. You will see a now.sh URL in your output like this:
> Ready! https://your-project-name-tpspyhtdtk.now.sh (copied to clipboard)
Paste that URL into your browser when the build is complete, and you will see your deployed app.
Details are available in this article.
See this blog post on how to deploy your React app to Amazon Web Services S3 and CloudFront.
Install the Surge CLI if you haven't already by running npm install -g surge . Run the surge command and log in you or create a new account.
When asked about the project path, make sure to specify the build folder, for example:
project path: /path/to/project/build Note that in order to support routers that use HTML5 pushState API, you may want to rename the index.html in your build folder to 200.html before deploying to Surge. This ensures that every URL falls back to that file.
You can adjust various development and production settings by setting environment variables in your shell or with .env.
| 変数 | 発達 | 生産 | 使用法 |
|---|---|---|---|
| ブラウザ | ✅ | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a browser to override this behavior, or set it to none to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to npm start will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the .js extension. | |
| ホスト | ✅ | By default, the development web server binds to localhost . You may use this variable to specify a different host. | |
| ポート | ✅ | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. | |
| HTTPS | ✅ | When set to true , Create React App will run the development server in https mode. | |
| PUBLIC_URL | ✅ | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in package.json ( homepage ). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. | |
| CI | ? | ✅ | When set to true , Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. |
| REACT_EDITOR | ✅ | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can send a pull request to detect your editor of choice. Setting this environment variable overrides the automatic detection. If you do it, make sure your systems PATH environment variable points to your editor's bin folder. You can also set it to none to disable it completely. | |
| CHOKIDAR_USEPOLLING | ✅ | When set to true , the watcher runs in polling mode, as necessary inside a VM. Use this option if npm start isn't detecting changes. | |
| GENERATE_SOURCEMAP | ✅ | When set to false , source maps are not generated for a production build. This solves OOM issues on some smaller machines. | |
| NODE_PATH | ✅ | ✅ | Same as NODE_PATH in Node.js, but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting NODE_PATH=src . |
npm start doesn't detect changes When you save a file while npm start is running, the browser should refresh with the updated code.
If this doesn't happen, try one of the following workarounds:
index.js and you're referencing it by the folder name, you need to restart the watcher due to a Webpack bug..env file in your project directory if it doesn't exist, and add CHOKIDAR_USEPOLLING=true to it. This ensures that the next time you run npm start , the watcher uses the polling mode, as necessary inside a VM.If none of these solutions help please leave a comment in this thread.
npm test hangs on macOS Sierra If you run npm test and the console gets stuck after printing react-scripts test --env=jsdom to the console there might be a problem with your Watchman installation as described in facebookincubator/create-react-app#713.
We recommend deleting node_modules in your project and running npm install (or yarn if you use it) first. If it doesn't help, you can try one of the numerous workarounds mentioned in these issues:
It is reported that installing Watchman 4.7.0 or newer fixes the issue. If you use Homebrew, you can run these commands to update it:
watchman shutdown-server
brew update
brew reinstall watchman
You can find other installation methods on the Watchman documentation page.
If this still doesn't help, try running launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist .
There are also reports that uninstalling Watchman fixes the issue. So if nothing else helps, remove it from your system and try again.
npm run build exits too early It is reported that npm run build can fail on machines with limited memory and no swap space, which is common in cloud environments. Even with small projects this command can increase RAM usage in your system by hundreds of megabytes, so if you have less than 1 GB of available memory your build is likely to fail with the following message:
The build failed because the process exited too early. This probably means the system ran out of memory or someone called
kill -9on the process.
If you are completely sure that you didn't terminate the process, consider adding some swap space to the machine you're building on, or build the project locally.
npm run build fails on HerokuThis may be a problem with case sensitive filenames. Please refer to this section.
If you use a Moment.js, you might notice that only the English locale is available by default. This is because the locale files are large, and you probably only need a subset of all the locales provided by Moment.js.
To add a specific Moment.js locale to your bundle, you need to import it explicitly.
例えば：
import moment from 'moment' ;
import 'moment/locale/fr' ; If import multiple locales this way, you can later switch between them by calling moment.locale() with the locale name:
import moment from 'moment' ;
import 'moment/locale/fr' ;
import 'moment/locale/es' ;
// ...
moment . locale ( 'fr' ) ;This will only work for locales that have been explicitly imported before.
npm run build fails to minifySome third-party packages don't compile their code to ES5 before publishing to npm. This often causes problems in the ecosystem because neither browsers (except for most modern versions) nor some tools currently support all ES6 features. We recommend to publish code on npm as ES5 at least for a few more years.
module field in package.json . Note that even if a library provides an ES Modules version, it should still precompile other ES6 features to ES5 if it intends to support older browsers .Fork the package and publish a corrected version yourself.
If the dependency is small enough, copy it to your src/ folder and treat it as application code.
In the future, we might start automatically compiling incompatible third-party modules, but it is not currently supported. This approach would also slow down the production builds.
Ejecting lets you customize anything, but from that point on you have to maintain the configuration and scripts yourself. This can be daunting if you have many similar projects. In such cases instead of ejecting we recommend to fork react-scripts and any other packages you need. This article dives into how to do it in depth. You can find more discussion in this issue.
If you have ideas for more “How To” recipes that should be on this page, let us know or contribute some!
