著者は、 Creative Commons を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。
序章
React は、フロントエンドアプリケーションを作成するための一般的なJavaScriptフレームワークです。 もともとFacebookによって作成されましたが、JavaScriptを JSX と呼ばれるHTMLのような構文と結び付ける直感的なプログラミングパラダイムを使用して、開発者が高速なアプリケーションを作成できるようにすることで人気を博しています。
新しいReactプロジェクトの開始は、ビルドシステムのセットアップ、最新の構文をすべてのブラウザーで読み取り可能なコードに変換するコードトランスパイラー、およびベースディレクトリ構造を含む複雑なマルチステッププロセスでした。 しかし現在、 Create React App には、コードのトランスパイル、基本的なリンティング、テスト、ビルドシステムなど、Reactプロジェクトを実行するために必要なすべてのJavaScriptパッケージが含まれています。 また、ホットリロードを備えたサーバーが含まれており、コードを変更するとページが更新されます。 最後に、ディレクトリとコンポーネントの構造が作成されるため、数分ですぐにコーディングを開始できます。
つまり、Webpackのようなビルドシステムの構成について心配する必要はありません。 クロスブラウザで使用できるようにコードをトランスパイルするためにBabelを設定する必要はありません。 最新のフロントエンド開発の複雑なシステムのほとんどについて心配する必要はありません。 最小限の準備でReactコードの記述を開始できます。
このチュートリアルを終了すると、Reactアプリケーションが実行され、将来のアプリケーションの基盤として使用できるようになります。 Reactコードに最初の変更を加え、スタイルを更新し、ビルドを実行して、アプリケーションの完全に縮小されたバージョンを作成します。 また、ホットリロードを備えたサーバーを使用して即座にフィードバックを提供し、Reactプロジェクトの各部分を詳細に調査します。 最後に、カスタムコンポーネントの作成と、プロジェクトに合わせて拡張および適応できる構造の作成を開始します。
前提条件
このチュートリアルに従うには、次のものが必要です。
- Node.jsバージョン10.16.0がコンピューターにインストールされています。 これをmacOSまたはUbuntu18.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはのPPAを使用したインストール]セクションの手順に従います。 Ubuntu18.04にNode.jsをインストールする方法。
- また、JavaScriptシリーズのコーディング方法にあるJavaScriptの基本的な知識と、HTMLおよびCSSの基本的な知識も役立ちます。
ステップ1—CreateReactアプリを使用して新しいプロジェクトを作成する
このステップでは、 npm パッケージマネージャーを使用して新しいアプリケーションを作成し、リモートスクリプトを実行します。 スクリプトは、必要なファイルを新しいディレクトリにコピーし、すべての依存関係をインストールします。
Nodeをインストールすると、npmというパッケージ管理アプリケーションもインストールされます。 npmは、プロジェクトにJavaScriptパッケージをインストールし、プロジェクトの詳細を追跡します。 npmの詳細については、npmおよびpackage.jsonチュートリアルでNode.jsモジュールを使用する方法をご覧ください。
npmには、実行可能パッケージを実行するnpxというツールも含まれています。 つまり、最初にプロジェクトをダウンロードせずにCreateReactAppコードを実行します。
実行可能パッケージは、指定したディレクトリへのcreate-react-appのインストールを実行します。 まず、ディレクトリに新しいプロジェクトを作成します。このチュートリアルでは、このプロジェクトをdigital-ocean-tutorialと呼びます。 繰り返しますが、このディレクトリは事前に存在している必要はありません。 実行可能パッケージがそれを作成します。 スクリプトは、プロジェクトディレクトリ内でnpm installも実行し、追加の依存関係をダウンロードします。
基本プロジェクトをインストールするには、次のコマンドを実行します。
npx create-react-app digital-ocean-tutorial
このコマンドは、いくつかの依存関係とともにベースコードをダウンロードするビルドプロセスを開始します。
スクリプトが終了すると、次のような成功メッセージが表示されます。
Output...
Success! Created digital-ocean-tutorial at your_file_path/digital-ocean-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd digital-ocean-tutorial
npm start
Happy hacking!
your_file_pathが現在のパスになります。 macOSユーザーの場合、/Users/your_usernameのようになります。 Ubuntuサーバーを使用している場合は、/home/your_usernameのように表示されます。
また、アプリケーションの実行、ビルド、起動、およびテストを可能にするnpmコマンドのリストも表示されます。 これらについては、次のセクションで詳しく説明します。
注：ヤーンと呼ばれるJavaScript用の別のパッケージマネージャーがあります。 Facebookでサポートされており、npmと同じことの多くを実行します。 当初、yarnはロックファイルなどの新機能を提供していましたが、現在はnpmにも実装されています。 yarnには、オフラインキャッシュなどの他の機能もいくつか含まれています。 さらなる違いは、糸のドキュメントにあります。
以前にシステムにyarnをインストールしたことがある場合は、[X101X]コマンドと同じように機能するyarn startなどのyarnコマンドのリストが表示されます。 yarnがインストールされている場合でも、npmコマンドを実行できます。 yarnを使用する場合は、今後のコマンドでnpmをyarnに置き換えてください。 結果は同じになります。
これで、プロジェクトが新しいディレクトリに設定されました。 新しいディレクトリに移動します。
cd digital-ocean-tutorial
これで、プロジェクトのルート内にいます。 この時点で、新しいプロジェクトを作成し、すべての依存関係を追加しました。 ただし、プロジェクトを実行するためのアクションは実行されていません。 次のセクションでは、カスタムスクリプトを実行して、プロジェクトをビルドおよびテストします。
ステップ2—react-scriptsを使用する
このステップでは、リポジトリとともにインストールされるさまざまなreact-scriptsについて学習します。 最初にtestスクリプトを実行して、テストコードを実行します。 次に、buildスクリプトを実行して、縮小バージョンを作成します。 最後に、ejectスクリプトでカスタマイズを完全に制御する方法を見ていきます。
プロジェクトディレクトリ内にいるので、周りを見てみましょう。 テキストエディタでディレクトリ全体を開くか、ターミナルを使用している場合は、次のコマンドを使用してファイルを一覧表示できます。
ls -a
-aフラグは、出力に非表示のファイルも含まれるようにします。
いずれにせよ、次のような構造が表示されます。
Outputnode_modules/ public/ src/ .gitignore README.md package-lock.json package.json
これらを1つずつ説明しましょう。
node_modules/には、アプリケーションで使用されるすべての外部JavaScriptライブラリが含まれています。 開く必要はめったにありません。public/ディレクトリには、いくつかのベースHTML、 JSON 、および画像ファイルが含まれています。 これらはあなたのプロジェクトのルーツです。 ステップ4でそれらをさらに探索する機会があります。src/ディレクトリには、プロジェクトのReactJavaScriptコードが含まれています。 あなたがする仕事のほとんどはそのディレクトリにあります。 このディレクトリについては、ステップ5で詳しく説明します。.gitignoreファイルには、node_modulesディレクトリなど、 git （ソース管理）が無視するデフォルトのディレクトリとファイルがいくつか含まれています。 無視されるアイテムは、ソース管理では必要のない大きなディレクトリまたはログファイルになる傾向があります。 また、いくつかのReactスクリプトで作成するいくつかのディレクトリも含まれます。README.mdは、コマンドの概要や高度な構成へのリンクなど、CreateReactAppに関する多くの有用な情報を含むマークダウンファイルです。 今のところ、README.mdファイルはそのままにしておくのが最善です。 プロジェクトが進行するにつれて、デフォルトの情報をプロジェクトに関するより詳細な情報に置き換えます。
最後の2つのファイルは、パッケージマネージャーによって使用されます。 最初のnpxコマンドを実行すると、基本プロジェクトが作成されましたが、追加の依存関係もインストールされました。 依存関係をインストールすると、package-lock.jsonファイルが作成されます。 このファイルは、パッケージが正確なバージョンと一致することを保証するためにnpmによって使用されます。 このようにして、他の誰かがあなたのプロジェクトをインストールした場合、それらが同一の依存関係を持っていることを確認できます。 このファイルは自動的に作成されるため、このファイルを直接編集することはめったにありません。
最後のファイルはpackage.jsonです。 これには、タイトル、バージョン番号、依存関係など、プロジェクトに関するメタデータが含まれます。 また、プロジェクトの実行に使用できるスクリプトも含まれています。
package.jsonファイルをお気に入りのテキストエディタで開きます。
nano package.json
ファイルを開くと、すべてのメタデータを含むJSONオブジェクトが表示されます。 scriptsオブジェクトを見ると、start、build、test、およびejectの4つの異なるスクリプトが見つかります。
これらのスクリプトは、重要度の高い順にリストされています。 最初のスクリプトは、ローカル開発環境を開始します。 次のステップでそれを取得します。 2番目のスクリプトはプロジェクトをビルドします。 これについてはステップ4で詳しく説明しますが、今すぐ実行して何が起こるかを確認する価値があります。
buildスクリプト
npmスクリプトを実行するには、ターミナルにnpm run script_nameと入力するだけです。 コマンドのrun部分を省略できる特別なスクリプトがいくつかありますが、コマンド全体を実行することは常に問題ありません。 buildスクリプトを実行するには、端末に次のように入力します。
npm run build
次のメッセージがすぐに表示されます。
Output> [email protected] build your_file_path/digital-ocean-tutorial > react-scripts build Creating an optimized production build... ...
これは、CreateReactAppがコードを使用可能なバンドルにコンパイルしていることを示しています。
完了すると、次の出力が表示されます。
Output... Compiled successfully. File sizes after gzip: 39.85 KB build/static/js/9999.chunk.js 780 B build/static/js/runtime-main.99999.js 616 B build/static/js/main.9999.chunk.js 556 B build/static/css/main.9999.chunk.css The project was built assuming it is hosted at the server root. You can control this with the homepage field in your package.json. For example, add this to build it for GitHub Pages: "homepage" : "http://myname.github.io/myapp", The build folder is ready to be deployed. You may serve it with a static server: serve -s build Find out more about deployment here: bit.ly/CRA-deploy
プロジェクトの内容を一覧表示すると、いくつかの新しいディレクトリが表示されます。
ls -a
Outputbuild/ node_modules/ public/ src/ .gitignore README.md package-lock.json package.json
これで、buildディレクトリができました。 .gitignoreファイルを開いた場合、buildディレクトリがgitによって無視されていることに気付いたかもしれません。 これは、buildディレクトリが、他のファイルの縮小および最適化されたバージョンにすぎないためです。 buildコマンドはいつでも実行できるため、バージョン管理を使用する必要はありません。 出力については後で詳しく説明します。 今のところ、testスクリプトに移りましょう。
testスクリプト
testスクリプトは、runキーワードを必要としない特別なスクリプトのひとつですが、キーワードを含めても機能します。 このスクリプトは、Jestというテストランナーを起動します。 テストランナーは、プロジェクトで.spec.jsまたは.test.js拡張子の付いたファイルを探し、それらのファイルを実行します。
testスクリプトを実行するには、次のコマンドを入力します。
npm test
このスクリプトを実行すると、ターミナルにテストスイートの出力が表示され、ターミナルプロンプトが消えます。 次のようになります。
Output PASS src/App.test.js ✓ renders learn react link (67ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 4.204s Ran all test suites. Watch Usage › Press f to run only failed tests. › Press o to only run tests related to changed files. › Press q to quit watch mode. › Press p to filter by a filename regex pattern. › Press t to filter by a test name regex pattern. › Press Enter to trigger a test run.
ここで注意すべきことがいくつかあります。 まず、前述のように、.test.jsや.spec.jsなどのテスト拡張子を持つファイルを自動的に検出します。 この場合、テストスイートは1つだけ、つまり.test.js拡張子を持つファイルは1つだけであり、そのテストスイートにはテストが1つだけ含まれています。 Jestはコード階層内のテストを検出できるため、ディレクトリ内にテストをネストすると、Jestがそれらを検出します。
次に、Jestはテストスイートを一度実行してから終了することはありません。 むしろ、ターミナルで実行を継続します。 ソースコードに変更を加えると、テストが再実行されます。
キーボードオプションの1つを使用して、実行するテストを制限することもできます。 たとえば、oと入力すると、変更されたファイルに対してのみテストが実行されます。 これにより、テストスイートが大きくなるにつれて多くの時間を節約できます。
最後に、qと入力して、テストランナーを終了できます。 これを今すぐ実行して、コマンドプロンプトを取り戻します。
ejectスクリプト
最終的なスクリプトはnpm ejectです。 このスクリプトは、依存関係と構成ファイルをプロジェクトにコピーし、コードを完全に制御できるようにしますが、CreateReactApp統合ツールチェーンからプロジェクトを排出します。 このスクリプトを実行すると、このアクションを元に戻すことができず、今後のCreate React Appの更新が失われるため、これを実行することはありません。
Create React Appの価値は、大量の構成について心配する必要がないことです。 最新のJavaScriptアプリケーションを構築するには、WebpackなどのビルドシステムからBabelなどのコンパイルツールまで多くのツールが必要です。 Create React Appはすべての構成を処理するため、イジェクトとはこの複雑さに自分で対処することを意味します。
Create React Appの欠点は、プロジェクトを完全にカスタマイズできないことです。 ほとんどのプロジェクトでは問題ありませんが、ビルドプロセスのすべての側面を制御したい場合は、コードをイジェクトする必要があります。 ただし、前述のように、コードをイジェクトすると、Create React Appの新しいバージョンに更新できなくなり、独自に拡張機能を手動で追加する必要があります。
この時点で、コードをビルドしてテストするためのスクリプトを実行しました。 次のステップでは、ライブサーバーでプロジェクトを開始します。
ステップ3—サーバーを起動する
このステップでは、ローカルサーバーを初期化し、ブラウザでプロジェクトを実行します。
別のnpmスクリプトでプロジェクトを開始します。 npm testと同様に、このスクリプトにはrunコマンドは必要ありません。 スクリプトを実行すると、ローカルサーバーを起動し、プロジェクトコードを実行し、コードの変更をリッスンするウォッチャーを起動して、Webブラウザーでプロジェクトを開きます。
プロジェクトのルートで次のコマンドを入力して、プロジェクトを開始します。 このチュートリアルでは、プロジェクトのルートはdigital-ocean-tutorialディレクトリです。 このスクリプトは、許可されている限り実行を継続するため、必ず別のターミナルまたはタブで開いてください。
npm start
サーバーが起動する前に、しばらくの間プレースホルダーテキストが表示され、次の出力が表示されます。
OutputCompiled successfully! You can now view digital-ocean-tutorial in the browser. http://localhost:3000 Note that the development build is not optimized. To create a production build, use npm run build.
スクリプトをローカルで実行している場合は、ブラウザウィンドウでプロジェクトが開き、ターミナルからブラウザにフォーカスが移動します。
それが起こらない場合は、 http：// localhost：3000 / にアクセスして、サイトの動作を確認できます。 ポート3000で別のサーバーがすでに実行されている場合は、それで問題ありません。 Create React Appは、次に利用可能なポートを検出し、それを使用してサーバーを実行します。 つまり、ポート3000ですでに1つのプロジェクトが実行されている場合、この新しいプロジェクトはポート3001で開始されます。
これをリモートサーバーから実行している場合でも、追加の構成を行わなくてもサイトを表示できます。 アドレスはhttp://your_server_ip:3000になります。 ファイアウォールを構成している場合は、リモートサーバーでポートを開く必要があります。
ブラウザに、次のReactテンプレートプロジェクトが表示されます。
スクリプトが実行されている限り、アクティブなローカルサーバーがあります。 スクリプトを停止するには、ターミナルウィンドウまたはタブを閉じるか、スクリプトを実行しているターミナルウィンドウまたはタブにCTRL+Cまたは⌘-+cと入力します。
この時点で、サーバーを起動し、最初のReactコードを実行しています。 ただし、React JavaScriptコードに変更を加える前に、最初にReactがページにどのようにレンダリングされるかを確認します。
ステップ4—ホームページを変更する
このステップでは、public/ディレクトリのコードを変更します。 publicディレクトリには、ベースHTMLページが含まれています。 これは、プロジェクトのルートとして機能するページです。 将来このディレクトリを編集することはめったにありませんが、プロジェクトの開始元であり、Reactプロジェクトの重要な部分です。
サーバーをキャンセルした場合は、先に進んでnpm startで再起動し、新しいターミナルウィンドウのお気に入りのテキストエディターでpublic/を開きます。
nano public/
または、lsコマンドを使用してファイルを一覧表示することもできます。
ls public/
次のようなファイルのリストが表示されます。
Outputfavicon.ico logo192.png manifest.json index.html logo512.png robots.txt
favicon.ico、logo192.png、およびlogo512.pngは、ユーザーがブラウザーのタブまたは電話に表示するアイコンです。 ブラウザは適切なサイズのアイコンを選択します。 最終的には、これらをプロジェクトにより適したアイコンに置き換えたいと思うでしょう。 今のところ、それらをそのままにしておくことができます。
manifest.jsonは、プロジェクトを説明するメタデータの構造化されたセットです。 特に、さまざまなサイズのオプションに使用されるアイコンが一覧表示されます。
robots.txtファイルは、Webクローラーの情報です。 クローラーに、インデックス作成が許可されているページと許可されていないページを通知します。 やむを得ない理由がない限り、どちらのファイルも変更する必要はありません。 たとえば、簡単にアクセスしたくない特別なコンテンツへのURLを一部のユーザーに提供したい場合は、それをrobots.txtに追加すると、引き続き公開されますが、検索エンジンによってインデックスが作成されません。
index.htmlファイルはアプリケーションのルートです。 これはサーバーが読み取るファイルであり、ブラウザに表示されるファイルです。 テキストエディタで開いて見てください。
コマンドラインから作業している場合は、次のコマンドで開くことができます。
nano public/index.html
表示される内容は次のとおりです。
digital-ocean-tutorial / public / index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
ファイルはかなり短いです。 <body>には画像や単語はありません。 これは、ReactがHTML構造全体を構築し、JavaScriptを挿入するためです。 しかし、Reactはコードを挿入する場所を知る必要があり、それがindex.htmlの役割です。
テキストエディタで、<title>タグをReact AppからSandboxに変更します。
digital-ocean-tutorial / public / index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
...
<title>Sandbox</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
テキストエディタを保存して終了します。 ブラウザを確認してください。 タイトルは、ブラウザタブにある名前です。 自動的に更新されます。 そうでない場合は、ページを更新して変更を確認してください。
次に、テキストエディタに戻ります。 すべてのReactプロジェクトはルート要素から始まります。 1つのページに複数のルート要素が存在する可能性がありますが、少なくとも1つは存在する必要があります。 これは、Reactが生成されたHTMLコードをどこに置くかを知る方法です。 要素<div id="root">を見つけます。 これは、Reactが今後のすべての更新に使用するdivです。 idをrootからbaseに変更します。
digital-ocean-tutorial / public / index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
...
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="base"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
変更を保存します。
ブラウザにエラーが表示されます。
Reactは、idがrootの要素を探していました。 それがなくなったので、Reactはプロジェクトを開始できません。
名前をbaseからrootに戻します。
digital-ocean-tutorial / public / index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
...
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
index.htmlを保存して終了します。
この時点で、サーバーを起動し、ルートHTMLページに小さな変更を加えました。 JavaScriptコードはまだ変更していません。 次のセクションでは、ReactJavaScriptコードを更新します。
ステップ5—見出しタグとスタイルの変更
このステップでは、src/ディレクトリのReactコンポーネントに最初の変更を加えます。 組み込みのホットリロードを使用してブラウザで自動的に更新されるCSSとJavaScriptコードに小さな変更を加えます。
サーバーを停止した場合は、必ずnpm startで再起動してください。 ここで、src/ディレクトリの一部を確認してください。 お気に入りのテキストエディタでディレクトリ全体を開くか、次のコマンドを使用してターミナルでプロジェクトを一覧表示できます。
ls src/
ターミナルまたはテキストエディタに次のファイルが表示されます。
OutputApp.css App.js App.test.js index.css index.js logo.svg serviceWorker.js setupTests.js
これらのファイルを一度に1つずつ見ていきましょう。
最初はserviceWorker.jsファイルに多くの時間を費やすことはありませんが、プログレッシブWebアプリケーションの作成を開始するときに重要になる可能性があります。 Service Workerは、プッシュ通知やオフラインキャッシュなど、さまざまなことを実行できますが、現時点ではそのままにしておくことをお勧めします。
次に確認するファイルは、setupTests.jsとApp.test.jsです。 これらはテストファイルに使用されます。 実際、ステップ2でnpm testを実行すると、スクリプトはこれらのファイルを実行しました。 setupTests.jsファイルは短いです。 含まれているのは、いくつかのカスタムexpectメソッドだけです。 これらについては、このシリーズの今後のチュートリアルで詳しく説明します。
App.test.jsを開きます：
nano src/App.test.js
それを開くと、基本的なテストが表示されます。
digital-ocean-tutorial / src / App.test.js
import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
const { getByText } = render(<App />);
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
テストでは、ドキュメントに含まれるフレーズlearn reactを探しています。 プロジェクトを実行しているブラウザに戻ると、ページにフレーズが表示されます。 Reactテストは、ほとんどのユニットテストとは異なります。 コンポーネントには、データを操作するためのロジックとともに、マークアップなどの視覚的な情報を含めることができるため、従来の単体テストはそれほど簡単には機能しません。 Reactテストは、機能テストまたは統合テストの形式に近いものです。
次に、いくつかのスタイリングファイルが表示されます：App.css、index.css、およびlogo.svg。 Reactでスタイリングを操作する方法は複数ありますが、追加の構成が必要ないため、プレーンCSSを作成するのが最も簡単です。
別のJavaScriptファイルと同じようにスタイルをコンポーネントにインポートできるため、複数のCSSファイルがあります。 CSSをコンポーネントに直接インポートする機能があるため、CSSを分割して個々のコンポーネントにのみ適用することもできます。 あなたがしていることは、懸念を分離することです。 すべてのCSSをJavaScriptから分離しているわけではありません。 代わりに、関連するすべてのCSS、JavaScript、マークアップ、および画像をグループ化したままにします。
テキストエディタでApp.cssを開きます。 コマンドラインから作業している場合は、次のコマンドで開くことができます。
nano src/App.css
これはあなたが見るであろうコードです：
digital-ocean-tutorial / src / App.css
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
これは、特別なCSSプリプロセッサを含まない標準のCSSファイルです。 必要に応じて後で追加できますが、最初はプレーンなCSSしかありません。 Create React Appは、すぐに使用できる環境を提供しながら、ピニオンを解除しようとします。
App.cssに戻ると、Create React Appを使用する利点の1つは、すべてのファイルを監視することです。変更を加えると、リロードせずにブラウザーに表示されます。
これが実際に動作することを確認するには、App.cssのbackground-colorに小さな変更を加えます。 #282c34からblueに変更し、ファイルを保存してください。 最終的なスタイルは次のようになります。
digital-ocean-tutorial / src / App.css
.App {
text-align: center;
}
...
.App-header {
background-color: blue
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
...
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
ブラウザをチェックしてください。 以前は次のようになりました。
変更後の外観は次のとおりです。
先に進み、background-colorを#282c34に戻します。
digital-ocean-tutorial / src / App.css
.App {
text-align: center;
...
.App-header {
background-color: #282c34
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
...
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
ファイルを保存して終了します。
CSSに小さな変更を加えました。 次に、ReactJavaScriptコードに変更を加えます。 index.jsを開くことから始めます。
nano src/index.js
表示される内容は次のとおりです。
digital-ocean-tutorial / src / index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
上部には、React、ReactDOM、index.css、App、およびserviceWorkerをインポートしています。 Reactをインポートすると、実際にコードを取得してJSXをJavaScriptに変換することになります。 JSXはHTMLのような要素です。 たとえば、Appを使用する場合、HTML要素<App />のように扱うことに注意してください。 これについては、このシリーズの今後のチュートリアルで詳しく説明します。
ReactDOMは、public/で見たindex.htmlページのように、Reactコードを基本要素に接続するコードです。 次の強調表示された行を見てください。
digital-ocean-tutorial / src / index.js
...
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
...
serviceWorker.unregister();
このコードは、idがrootの要素を見つけて、そこにReactコードを挿入するようにReactに指示します。 <App/>はルート要素であり、そこからすべてが分岐します。 これは、将来のすべてのReactコードの開始点です。
ファイルの上部に、いくつかのインポートが表示されます。 index.cssをインポートしますが、実際には何もしません。 それをインポートすることで、Reactスクリプトを介してWebpackに、最終的にコンパイルされたバンドルにそのCSSコードを含めるように指示します。 インポートしないと表示されません。
src/index.jsを終了します。
この時点では、ブラウザで表示しているものはまだ何も表示されていません。 これを確認するには、App.jsを開きます。
nano src/App.js
このファイルのコードは、一連の通常のHTML要素のようになります。 表示される内容は次のとおりです。
digital-ocean-tutorial / src / App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
<p>タグの内容をEdit <code>src/App.js</code> and save to reload.からHello, worldに変更し、変更を保存します。
digital-ocean-tutorial / src / App.js
...
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Hello, world
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
...
ブラウザにアクセスすると、変更が表示されます。
これで、Reactコンポーネントの最初の更新が完了しました。
行く前に、さらにいくつかのことに注意してください。 このコンポーネントでは、logo.svgファイルをインポートし、それを変数に割り当てます。 次に、<img>要素で、そのコードをsrcとして追加します。
ここで起こっていることがいくつかあります。 img要素を見てください。
digital-ocean-tutorial / src / App.js
...
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Hello, world
</p>
...
logoを中括弧に渡す方法に注目してください。 文字列や数値ではない属性を渡す場合は常に、中括弧を使用する必要があります。 Reactはそれらを文字列ではなくJavaScriptとして扱います。 この場合、実際には画像をインポートしていません。 代わりに、画像を参照しています。 Webpackがプロジェクトをビルドすると、画像が処理され、ソースが適切な場所に設定されます。
テキストエディタを終了します。
ブラウザでDOM要素を見ると、パスが追加されていることがわかります。 Chrome を使用している場合は、要素を右クリックして Inspect を選択すると、要素を検査できます。
ブラウザでの表示は次のとおりです。
DOMには次の行があります。
<img src="/static/media/logo.5d5d9eef.svg" class="App-logo" alt="logo">
ロゴの名前が異なるため、コードは少し異なります。 Webpackは、画像パスが一意であることを確認したいと考えています。 そのため、同じ名前の画像をインポートしても、異なるパスで保存されます。
この時点で、ReactJavaScriptコードに小さな変更を加えました。 次のステップでは、buildコマンドを使用して、サーバーに展開できる小さなファイルにコードを縮小します。
ステップ6—プロジェクトの構築
このステップでは、外部サーバーにデプロイできるバンドルにコードを構築します。
ターミナルに戻り、プロジェクトをビルドします。 以前にこのコマンドを実行しましたが、念のため、このコマンドはbuildスクリプトを実行します。 結合されたファイルと縮小されたファイルで新しいディレクトリが作成されます。 ビルドを実行するには、プロジェクトのルートから次のコマンドを実行します。
npm run build
コードのコンパイルには遅延があり、完了すると、build/という新しいディレクトリが作成されます。
テキストエディタでbuild/index.htmlを開きます。
nano build/index.html
次のようなものが表示されます。
digital-ocean-tutorial / build / index.html
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><link href="/static/css/main.d1b05096.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,p=r[0],l=r[1],c=r[2],i=0,s=[];i<p.length;i++)a=p[i],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,p=1;p<t.length;p++){var l=t[p];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/";var p=this["webpackJsonpdo-create-react-app"]=this["webpackJsonpdo-create-react-app"]||[],l=p.push.bind(p);p.push=r,p=p.slice();for(var c=0;c<p.length;c++)r(p[c]);var f=l;t()}([])</script><script src="/static/js/2.c0be6967.chunk.js"></script><script src="/static/js/main.bac2dbd2.chunk.js"></script></body></html>
ビルドディレクトリは、すべてのコードを取得し、コンパイルして、使用可能な最小の状態に最小化します。 これは公開されているコードではないため、人間が読み取れるかどうかは関係ありません。 このように縮小すると、コードが機能する一方で、コードが占めるスペースが少なくなります。 Pythonのような一部の言語とは異なり、空白はコンピューターがコードを解釈する方法を変更しません。
結論
このチュートリアルでは、最初のReactアプリケーションを作成し、技術的な詳細に立ち入ることなく、JavaScriptビルドツールを使用してプロジェクトを構成しました。 これがCreateReactAppの価値です。始めるために、すべてを知る必要はありません。 複雑なビルド手順を無視できるため、Reactコードのみに集中できます。
プロジェクトを開始、テスト、およびビルドするためのコマンドを学習しました。 これらのコマンドは定期的に使用するため、今後のチュートリアルに注意してください。 最も重要なのは、最初のReactコンポーネントを更新したことです。
Reactの動作を確認したい場合は、Reactチュートリアルを使用してDigitalOceanAPIからデータを表示する方法を試してください。
