CreateReactアプリでReactプロジェクトを設定する方法

投稿日: 2022-04-20 2022-10-15
タグ: Development, javascript, React

著者は、 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 システム上に、次のリストが表示されます yarn などのコマンド yarn start それは同じように機能します npm コマンド。あなたが実行することができます npm あなたが持っていてもコマンド yarn インストールされています。よろしければ yarn、置き換えるだけ npm と yarn 今後のコマンドで。結果は同じになります。

これで、プロジェクトが新しいディレクトリに設定されました。新しいディレクトリに移動します。

cd digital-ocean-tutorial

これで、プロジェクトのルート内にいます。この時点で、新しいプロジェクトを作成し、すべての依存関係を追加しました。ただし、プロジェクトを実行するためのアクションは実行されていません。次のセクションでは、カスタムスクリプトを実行して、プロジェクトをビルドおよびテストします。

ステップ2—使用 `react-scripts`

このステップでは、さまざまなことについて学びます react-scripts リポジトリとともにインストールされます。最初に実行します test テストコードを実行するスクリプト。次に、を実行します build 縮小バージョンを作成するためのスクリプト。最後に、どのように eject スクリプトを使用すると、カスタマイズを完全に制御できます。

プロジェクトディレクトリ内にいるので、周りを見てみましょう。テキストエディタでディレクトリ全体を開くか、ターミナルを使用している場合は、次のコマンドを使用してファイルを一覧表示できます。

ls -a

The -a フラグは、出力に隠しファイルも含まれるようにします。

いずれにせよ、次のような構造が表示されます。

Outputnode_modules/
public/
src/
.gitignore
README.md
package-lock.json
package.json

これらを1つずつ説明しましょう。

node_modules/ アプリケーションで使用されるすべての外部JavaScriptライブラリが含まれています。開く必要はめったにありません。
The public/ ディレクトリには、いくつかのベースHTML、 JSON 、および画像ファイルが含まれています。これらはあなたのプロジェクトのルーツです。ステップ4でそれらをさらに探索する機会があります。
The src/ ディレクトリには、プロジェクトのReactJavaScriptコードが含まれています。あなたがする仕事のほとんどはそのディレクトリにあります。このディレクトリについては、ステップ5で詳しく説明します。
The .gitignore fileには、 git （ソース管理）が無視するデフォルトのディレクトリとファイルが含まれています。 node_modules ディレクトリ。無視されるアイテムは、ソース管理では必要のない大きなディレクトリまたはログファイルになる傾向があります。また、いくつかのReactスクリプトで作成するいくつかのディレクトリも含まれます。
README.md コマンドの概要や高度な構成へのリンクなど、CreateReactAppに関する多くの有用な情報を含むマークダウンファイルです。今のところ、 README.md あなたがそれを見るようにファイル。プロジェクトが進行するにつれて、デフォルトの情報をプロジェクトに関するより詳細な情報に置き換えます。

最後の2つのファイルは、パッケージマネージャーによって使用されます。イニシャルを実行したとき npx コマンドを使用して、基本プロジェクトを作成しましたが、追加の依存関係もインストールしました。依存関係をインストールすると、 package-lock.json ファイル。このファイルはによって使用されます npm パッケージが正確なバージョンと一致することを確認します。このようにして、他の誰かがあなたのプロジェクトをインストールした場合、それらが同一の依存関係を持っていることを確認できます。このファイルは自動的に作成されるため、このファイルを直接編集することはめったにありません。

最後のファイルはpackage.jsonです。これには、タイトル、バージョン番号、依存関係など、プロジェクトに関するメタデータが含まれます。また、プロジェクトの実行に使用できるスクリプトも含まれています。

を開きます package.json お気に入りのテキストエディタのファイル：

nano package.json

ファイルを開くと、すべてのメタデータを含むJSONオブジェクトが表示されます。あなたが見れば scripts オブジェクトには、4つの異なるスクリプトがあります。 start, build, test、と eject.

これらのスクリプトは、重要度の高い順にリストされています。最初のスクリプトは、ローカル開発環境を開始します。次のステップでそれを取得します。 2番目のスクリプトはプロジェクトをビルドします。これについてはステップ4で詳しく説明しますが、今すぐ実行して何が起こるかを確認する価値があります。

The `build` 脚本

npmスクリプトを実行するには、次のように入力する必要があります npm run script_name あなたのターミナルで。省略できる特別なスクリプトがいくつかあります run コマンドの一部ですが、コマンド全体を実行することは常に問題ありません。を実行するには build スクリプトを使用して、ターミナルに次のように入力します。

npm run build

次のメッセージがすぐに表示されます。

Output
> digital-ocean-tutorial@0.1.0 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 脚本。

The `test` 脚本

The test スクリプトは、を必要としない特別なスクリプトの1つです。 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つだけ含まれています。 Jestはコード階層内のテストを検出できるため、ディレクトリ内にテストをネストすると、Jestがそれらを検出します。

次に、Jestはテストスイートを一度実行してから終了することはありません。むしろ、ターミナルで実行を継続します。ソースコードに変更を加えると、テストが再実行されます。

キーボードオプションの1つを使用して、実行するテストを制限することもできます。入力した場合 oたとえば、変更されたファイルに対してのみテストを実行します。これにより、テストスイートが大きくなるにつれて多くの時間を節約できます。

最後に、次のように入力してテストランナーを終了できます q. これを今すぐ実行して、コマンドプロンプトを取り戻します。

The `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は、次に利用可能なポートを検出し、それを使用してサーバーを実行します。つまり、ポートですでに1つのプロジェクトを実行している場合 3000、この新しいプロジェクトはポートで開始されます 3001.

これをリモートサーバーから実行している場合でも、追加の構成を行わなくてもサイトを表示できます。住所は http://your_server_ip:3000. ファイアウォールを構成している場合は、リモートサーバーでポートを開く必要があります。

ブラウザに、次のReactテンプレートプロジェクトが表示されます。

スクリプトが実行されている限り、アクティブなローカルサーバーがあります。スクリプトを停止するには、ターミナルウィンドウまたはタブを閉じるか、次のように入力します CTRL+C また ⌘-+c スクリプトを実行しているターミナルウィンドウまたはタブで。

この時点で、サーバーを起動し、最初のReactコードを実行しています。ただし、React JavaScriptコードに変更を加える前に、最初にReactがページにどのようにレンダリングされるかを確認します。

ステップ4—ホームページを変更する

このステップでは、コードを変更します public/ ディレクトリ。 The 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 ユーザーがブラウザのタブまたは電話に表示するアイコンです。ブラウザは適切なサイズのアイコンを選択します。最終的には、これらをプロジェクトにより適したアイコンに置き換えたいと思うでしょう。今のところ、それらをそのままにしておくことができます。

The manifest.json プロジェクトを説明するメタデータの構造化されたセットです。特に、さまざまなサイズのオプションに使用されるアイコンが一覧表示されます。

The robots.txt ファイルはウェブクローラーの情報です。クローラーに、インデックス作成が許可されているページと許可されていないページを通知します。やむを得ない理由がない限り、どちらのファイルも変更する必要はありません。たとえば、簡単にアクセスしたくない特別なコンテンツへのURLを一部のユーザーに提供したい場合は、次のURLに追加できます。 robots.txt そしてそれはまだ公に利用可能ですが、検索エンジンによって索引付けされません。

The 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">. これは div そのReactは将来のすべての更新に使用します。変更 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—見出しタグとスタイルの変更

このステップでは、Reactコンポーネントに最初の変更を加えます。 src/ ディレクトリ。組み込みのホットリロードを使用してブラウザで自動的に更新される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. これらはテストファイルに使用されます。実際、あなたが走ったとき npm test ステップ2で、スクリプトはこれらのファイルを実行しました。 The 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つは、すべてのファイルを監視することです。そのため、変更を加えると、リロードせずにブラウザーに表示されます。

これが実際に動作していることを確認するには、 background-color の App.css. から変更します #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 Reactコードを基本要素に接続するコードです。 index.html あなたが見たページ public/. 次の強調表示された行を見てください。

digital-ocean-tutorial / src / index.js

...
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
...
serviceWorker.unregister();

このコードは、Reactに次の要素を見つけるように指示します。 id の root そこに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からデータを表示する方法を試してください。

getdocs

13036

序章

前提条件

ステップ1—CreateReactアプリを使用して新しいプロジェクトを作成する

ステップ2—使用 react-scripts

The build 脚本

The test 脚本

The eject 脚本

ステップ3—サーバーを起動する

ステップ4—ホームページを変更する

ステップ5—見出しタグとスタイルの変更

ステップ6—プロジェクトの構築

結論

getdocs

ステップ2—使用 `react-scripts`

The `build` 脚本

The `test` 脚本

The `eject` 脚本