[寄付のために書く]プログラムの一環として寄付を受け取りました.前書き過去数年にわたって、オープンソースのWebフレームワークは、アプリケーションのコーディングプロセスを大幅に簡素化しました。[React]は、新しい開発者が言語にアクセスしやすくなり、ベテランの開発者の生産性を高めることで、JavaScriptの人気を高めています。Facebookで作成されたReactを使用すると、開発者は宣言型ビュー、状態管理、クライアント側レンダリングなどの機能をサポートすることにより、拡張性の高いWebアプリケーション用のハイエンドユーザーインターフェイスをすばやく作成できます。JavaScriptのアプリ。API]からデータをロードおよび表示できます。これにより、HTTPリクエストを使用してDigitalOceanクラウド内でDropletやその他の製品を管理できます。他の多くのJavaScriptフレームワークを使用してAPIからデータを取得できますが、Reactは、ライフサイクルやローカル状態管理など、ジョブに特に適した便利な利点を提供します。Reactでは、アプリケーションの起動時にAPIから取得したデータがローカル状態に追加され、コンポーネントがマウントおよびマウント解除されるときにさまざまなライフサイクルを実行できます。いつでも、ローカル状態からデータを取得し、それに応じて表示できます。v2]と対話して呼び出しを行い、ドロップレットに関する情報を取得する単純なReactアプリケーションを作成します。詳細を含むリストが表示されます。フロントエンドフレームワークhttps://getbootstrap.com/[Bootstrap]を使用して、アプリケーションのスタイルを設定します。Dropletsのリストを表示する基本的なインターフェイスが表示され、次のようにスタイルが設定されます。account]と少なくとも1つのhttps://www.digitalocean.com/docs/droplets/how-to/が必要です。[ドロップレットの設定]:Node.js(少なくともv6)およびhttps://www.npmjs.com/[npm](少なくともv5.2)のローカルインストール。Node.jsは、ブラウザーの外部でコードを実行できるJavaScriptランタイム環境です。npmという名前のプリインストールされたパッケージマネージャーが付属しており、パッケージをインストールおよび更新できます。18.04にNode.jsをインストールする方法]。トークンは必ず安全な場所に記録してください。このチュートリアルの後半で必要になります。HTMLとJavaScriptの組み合わせに精通している。[JavaScriptをHTMLに追加する方法]をご覧ください。JSONデータ形式に精通していること。[JavaScriptでJSONを使用する方法]で詳細を確認できます。APIへのリクエストの作成に関する知識。APIを使用する方法]をご覧ください。Python向けに書かれていますが、APIを使用する際のコアコンセプトの理解に役立ちます。ステップ1-基本的なReactアプリケーションの作成この最初のステップでは、npmのhttps://github.com/facebook/create-react-app[Reactアプリの作成]パッケージを使用して、基本的なReactアプリケーションを作成します。このパッケージは、モジュールビルダーhttps://webpack.js.org/[Webpack]やJavaScriptコンパイラhttps://babeljs.io/[Babel]など、Reactの実行に必要な必須の依存関係を自動的にインストールして構成します。Appパッケージを実行します。create-react-appインストールが完了したら、新しいプロジェクトディレクトリに移動し、次のコマンドを使用してアプリケーションの実行を開始します。Appの作成によって提供されるローカル開発サーバーを起動し、ターミナルのコマンドラインプロンプトを無効にします。チュートリアルを続行するには、新しいターミナルウィンドウを開き、プロジェクトディレクトリに戻ってから次の手順に進みます。+`を開くと表示できます。Appからのようこそ画面のみを表示します。APIからのデータを保持するテーブルコンポーネントをアプリに追加できます。手順2-ドロップレットデータを表示するコンポーネントの作成この手順では、ドロップレットに関する情報を表示する最初のコンポーネントを作成します。このコンポーネントは、すべてのドロップレットとそれに対応する詳細をリストするテーブルになります。+」を含むテーブルコンポーネントを作成できます。このチュートリアルの後半で、APIから取得したデータをテーブルコンポーネントに挿入します。components」という新しいディレクトリを作成します。+`という新しいファイルを作成し、nanoまたは任意のテキストエディターで開きます。src/components/Table.js次のコードをファイルに追加して、テーブルコンポーネントを定義します。Table」と呼ばれる新しいコンポーネントを定義します。これは、見出しと本文を持つテーブルで構成されます。これらのコード行を追加したら、ファイルを保存して終了します。+`を押すことでこれを行うことができます。テーブルコンポーネントを作成したので、今度はアプリケーションにこのコンポーネントを含めます。+`にあるアプリケーションのエントリポイントにコンポーネントをインポートします。次のコマンドでこのファイルを開きます。Appの作成のウェルカムメッセージを表示する定型コードを削除します。App;ウェルカムメッセージを表示した行を削除した後、次の強調表示された行を追加して、この同じファイル内にテーブルコンポーネントを含めます。+`に再度アクセスすると、アプリケーションはテーブルヘッド付きの基本的なテーブルを表示します。[基本的なテーブルを使用したReactアプリケーション]この手順では、テーブルコンポーネントを作成し、このコンポーネントをアプリケーションのエントリポイントに含めました。APIへの接続を設定します。このAPIを使用して、このテーブルに表示されるデータを取得します。APIへの接続の設定は、環境変数として個人アクセストークンを安全に保存することから始まるいくつかのアクションで構成されます。これはhttps://www.npmjs.com/package/dotenv[dotenv]を使用して行うことができます。+`ファイルに機密情報を保存できるパッケージです。+`パッケージをインストールします。+`という環境ファイルを作成します。APIのURLが含まれます。.gitignoreこれで、環境変数用の安全でシンプルな構成ファイルが作成されました。APIに要求を送信するために必要な情報がアプリケーションに提供されます。APIの間で要求と応答を転送するプロキシサーバーを設定します。+`をインストールします。http-proxy-middlewareこれをインストールしたら、次はプロキシを設定します。src/setupProxy.jsこのファイル内に次のコードを追加して、プロキシサーバーをセットアップします。`がパーソナルアクセストークンをプロキシサーバーにロードします。APIに送信するプロキシサーバーが正常に作成されました。このプロキシサーバーは、環境変数として安全に保存されているパーソナルアクセストークンがクライアント側に公開されないようにします。次に、実際のリクエストを作成して、アプリケーションのDropletデータを取得します。APIからデータの取得を開始できます。`メソッドを呼び出します。+`を提供することでローカル状態を初期化します。この場合、オブジェクトはドロップレットです。上記のコードブロックから、Dropletを含む配列が空であり、API呼び出しの結果を入力できることがわかります。APIからこの情報を取得する必要があります。`の状態を取得するデータ。+`メソッドを使用します。」としてテーブルコンポーネントに送信します。App.js`のテーブルコンポーネントに追加します。}}...APIからデータを取得する機能を作成しましたが、Webブラウザーからこのデータにアクセスできるようにする必要があります。次のステップでは、テーブルコンポーネントにドロップレットデータを表示することでこれを実現します。ステップ5-テーブルコンポーネントでのドロップレットデータの表示ドロップレットデータをテーブルコンポーネントに転送したので、このデータをテーブル内の行に対して反復処理できます。droplets`のプロパティ値は空になります。」が空でないことを確認するコードを追加する必要もあります。body`セクションに追加します。+」プレースホルダーメッセージを表示します。APIがDropletデータを返す場合、アプリケーションは各データタイプの列を含むテーブル行に対してそれを繰り返し、結果をWebブラウザーに表示します。[ドロップレットデータを使用したReactアプリケーション]この手順では、アプリケーションのテーブルコンポーネントを変更して、Webブラウザにドロップレットデータを表示し、ドロップレットが見つからない場合のプレースホルダーメッセージを追加しました。次に、フロントエンドWebフレームワークを使用してデータをスタイル設定し、視覚的により魅力的で読みやすくします。手順6-ブートストラップを使用したテーブルコンポーネントのスタイル設定これでテーブルにデータが入力されましたが、情報は最も魅力的な方法で表示されません。[Bootstrap]をプロジェクトに追加して、アプリケーションのスタイルを設定します。Bootstrapは、CSSテンプレートを使用してレスポンシブスタイリングをプロジェクトに追加できる、オープンソースのスタイリングおよびコンポーネントライブラリです。次のコマンドを使用してnpmでBootstrapをインストールします。+`に追加して、CSSファイルをプロジェクトにインポートします。+`タグに追加して、テーブルコンポーネントにブートストラップスタイルを適用します。<thead>...次に、タイトルとDigitalOceanロゴの付いたテーブルの上にヘッダーを配置して、アプリケーションのスタイル設定を完了します。」という新しいディレクトリにロゴファイルをコピーして、プロジェクトに追加します。+`に追加して、ヘッダーにインポートします。+`タグ内のクラスが特定のスタイルをBootstrapからヘッダーに追加します。Bootstrapをインポートし、そのスタイルをアプリケーションに適用したので、整理された読みやすい表示でWebブラウザーにデータが表示されます。APIからデータを取得し、Bootstrapスタイリングで表示する基本的なReactアプリケーションを作成しました。Reactフレームワークに精通しているので、ここで学んだ概念を、https://www.digitalocean.com/community/tutorials/how-to-build-aにあるようなより複雑なアプリケーションに適用できます。18.04でReactする最新のWebアプリケーションを構築する方法]。documentation]をご覧ください。