React: ReactJS を使用するための完全な初心者ガイド

ReactJS について聞いたことはありますが、どこから始めればよいかわかりませんか? ReactJS をいじり始めたものの、日常での使い方がよくわかりませんか? この記事は、現在開発者が使用している最も人気のあるライブラリである React JavaScript ライブラリを学習し、マスターするためのガイドとなります。 ReactJS を使い始める方法と、ReactJS をワークフローに統合する方法を正確に説明します。これにより、別のフレームワークやライブラリを経由する必要がなく、より動的なユーザー インターフェイスを作成できるようになります。 始めましょう！

ReactJSとは何ですか?

React は、再利用可能なコンポーネントの構築を促進するフロントエンド開発ライブラリです。 ユーザー インターフェイスを作成する効率的な方法を探している場合は、React がまさに必要なものかもしれません。 Vanilla JavaScript または jQuery を使用してユーザー インターフェイスを作成すると、コードがすぐに非常に複雑になり扱いにくくなる可能性があります。 React とその推奨されるコンポーネントベースの開発方法を使用すると、コードの再利用と保守がはるかに簡単になります。

実際、いくつかのコンポーネントを構築したら、React の経験 (または知識) がなくても、チームの他の開発者が参加してコードに貢献するのは比較的簡単です。

あなたにおすすめ: React Native アプリのパフォーマンスを最適化するための 5 つの有益なヒント。

ReactJS を使用する理由

まず第一に、JavaScript フレームワークに関しては選択肢があります。 では、なぜ React を選ぶのでしょうか? まず第一に、開発者がエンドユーザーにとって理解しやすく、使いやすい大規模なアプリを作成できるように支援することです。

これまで jQuery または Vanilla JavaScript のみを使用した開発者にとって、新しいテクノロジの使用方法を学ぶのはストレスになる場合があります。 場合によっては、開発者は単純なモーダル ボックスやナビゲーション バーを作成するだけで数百行のコードが必要になることがあります。 React は (Angular でよく行われるように) 状態が変化するたびに実際の DOM 要素を書き込んだり書き換えたりするのではなく、仮想 DOM を使用するため、React を使用すると、コードの行数が減り、貴重な時間を節約できると同時に、アプリケーションを以前よりも高速化できます。前。

ブラウザにインストールする

ブラウザーで React を使用するには、事前に React をインストールする必要があります。 幸いなことに、npm と Browserify のおかげで、これは簡単なプロセスです。 Node または別のサーバー側環境を使用しますか? そのために npm と Browserify を使用することもできます。 すべてをインストールしたら、お気に入りのテキスト エディターで HTML ファイルを作成します。 それ以外の場合は、これらすべてがすでに設定されている基本的なスターター プロジェクトを作成する Create-React-App のようなボイラープレート ジェネレーターを使用します。

ReactJS を使用するように App.js を変換する

現在、すべてのコードは App.js という名前の単一ファイル内にあります。 しかし、それだとテストが難しくなります。 そこで、複数のファイルに分割してみましょう。 まず、1 つのコンポーネントを ES6 で書かれたものから JSX で書かれたものに変換します。 すべての React コンポーネントを 1 つのディレクトリに保存するのが最も簡単です (そうする必要があります)。 そこで、空の src/components ディレクトリを作成し、そこに App.js を移動しましょう: mv app/App.js src/components/app-react.js。 次に、名前を app-react.js に変更します。

ES6 だけでなく React を使用するには、 use strict を変更します。 babel を使用するにはファイルの先頭にあります。 また、npm install –save babel-CLI babel-preset-es2015 babel-preset-react 経由で Babel をインストールする必要があります。これにより、Babel が新しい JSX 構文をコンパイルします。

サンプルアプリで構築を開始

React を始める方法はたくさんありますが、私たちのお気に入りの 1 つは、シンプルな To-Do リスト アプリを構築することです。 迅速に作業を進め、多くのよくある間違いを回避するために、バックエンド コードとフロントエンド コンポーネントを交換するだけで済むサンプル アプリケーションを構築しました。 画像を含め、必要なものがすべて装備されており、動作するだけでなく見た目も優れていることを確認できます。

自分でコーディングしたくないですか? 問題ない！ 以下の簡単な手順に従うことで、実際にすべてのコンポーネントをコピーできます。 これらをプロジェクトにコピーしたら、目的に合わせて変更するだけです。 選択はあなた次第です！ ここで 3 つの開始オプションをすべて確認してください。

コンポーネントを使用した基本的な例

Web アプリケーションを見ると、各要素が独立していることに最初に気づくでしょう。 一般的なページには、さまざまなヘッダー、フッター、ロゴ、ボタンがあります。 ただし、React.js を使用する場合は、ページ上の各コンポーネントに複数の HTML 要素を使用する代わりに、単一の HTML 要素を使用してすべてを表すことができます。 これは直観に反して聞こえるかもしれません。 結局のところ、それが私たちが何年もやってきたことではないでしょうか？

あなたは好きかもしれません: Facebook JavaScript Engine (Hermes) が Android 上の React Native を強化します。

JSX 構文の概要

JSX は JavaScript や TypeScript のようなプログラミング言語ではなく、JavaScript の拡張として設計された構文です。 そのため、新しい開発者にとって、それがどのように機能し、どこで使用できるかを理解することが重要です。 JSX コードは HTML に非常によく似た方法で記述されているため、両方の言語を同時に学習する新しい開発者にとって、JSX コードは優れた第一歩となります。 JSX のユニークな点とそれを簡単にマスターする方法について詳しくは、ReactJS チュートリアル全体をお読みください。

最初の React プロジェクトの構築を開始するには、ターミナル内で「mkdir act_tutorial」と入力して新しいディレクトリを作成します。 実行が完了したら、「cd act_tutorial」と入力して、新しく作成したディレクトリに移動します。 次に、ターミナルを開き、「node -v」と入力して Node.js を起動します。

Node が正常にインストールされている場合は、Node の横に v10.x が表示されるはずです。 そうでない場合は、macOS または Linux を使用している場合は nvm install 10 を使用してみてください。 それもうまくいかない場合は、何が問題なのかを Google が解決してくれるはずです。 Node がバージョン 10 以降で適切にインストールされたら、プロジェクトを最初から作成する準備が整います。

静的 vs 動的 vs PureComponent

最新の JavaScript を使用して Web アプリを構築する場合、UI コンポーネントを作成するには 3 つの主なオプションがあります。 これには、静的 HTML (react-markup)、動的 AJAX リクエスト (react-data)、および既存の DOM 要素の再利用 (react-pure) が含まれます。 各方法には独自のメリットがあり、特定のユースケースに応じてさまざまに適用できます。

たとえば、特定の要素が常に利用可能であることがわかっている場合は、それらの要素を静的 HTML タグに配置できます。 ただし、まだ存在しない可能性のあるデータベースからコンテンツを取得する必要がある場合は、react-data を使用することをお勧めします。 プロジェクトに最適なコンポーネント作成方法を決定するときは、アプリの各部分がどの程度安定して永続的になるかを考慮することが重要です。

ReactJS コンポーネントのライフサイクル メソッド

ライフサイクルのさまざまな部分を制御するためにコンポーネント内で使用できるライフサイクル メソッドがいくつかあります。 ComponentWillMount() メソッドは、コンポーネントが初めてレンダリングされる直前に呼び出されます。 その中に、localStorage を使用した情報の保存など、コンポーネントに必要な初期化を追加できます。 また、componentDidMount() メソッドは、コンポーネントがマウントされレンダリングされた直後に呼び出されます。 ここでは、コンポーネントが完全に初期化された後に実行するコードを追加できます (新しいネットワーク リクエストの作成など)。

コンポーネントでの状態の処理

Reacts の状態管理へのアプローチ方法はやや独特です。 その理由を理解するには、まずほとんどのフレームワークが状態をどのように処理するかを考慮する必要があります。

従来、開発者はコンポーネントの状態がそれ自体の中に保存されていると考えていました。 これは多くの問題を引き起こします。 あるコンポーネントが別のコンポーネントの状態を更新したい場合、そのためには他のコンポーネントへの参照 (props) が必要です。 また、状態オブジェクトまたは配列をコンポーネント間で同期したままにしたい場合は、すべてのコンポーネントがアクセスできる、ある種の集中型データ ストアまたはイベント エミッターが必要です。

また、2 つまたは 3 つの異なる状態しか持たない小さなアプリのコンポーネントでは十分単純かもしれませんが、アプリに数十の異なる状態がある場合はどうなるでしょうか? それらすべてをどのように管理していますか?

親コンポーネントから子コンポーネントへのデータの受け渡し

親コンポーネントから子コンポーネントにデータを渡すには、props または state を使用する 2 つの方法があります。 小道具を介してデータを渡すことは、配列内の項目の数を定義するなど、コンポーネントの変数を定義する場合に便利です。 一方、状態を介してデータを渡すことは、大きなオブジェクトを渡したい場合 (アプリケーションの速度が低下する可能性があります) や、子コンポーネント内から呼び出す関数を定義したい場合に便利です。 両方のアプローチを検討して、コード内でそれらをいつ使用するのが適切かを見てみましょう。

こちらもお勧めです: React JS がヘッドレス WordPress で提供する改善点とは何ですか?

結論

ReactJS 開発者を雇用する場合は、JavaScript、CSS、HTML、Node.js の使用経験が 5 年以上あるフリーランサーを必ず選択してください。 サンプル プロジェクトを提供し、特定の要件に関連するプロジェクトを設計することで、開発者が専門知識を実証できることが重要です。 これにより、ビジネスの目標と目的を簡単に理解できるようになります。

専門家は誰でも、仕事を始める前に必ず質問から始めます。 したがって、React フレームワークを使用して Web サイトを構築する際には、適切なタイミングで質問を投げかける専門家を雇うことが必須です。 ReactJS 開発者の平均雇用コストは、1 時間あたり 40 ドルから 100 ドルになります。 しかし、専門家は通常よりも高い料金を請求します。 したがって、ReactJS 開発フレームワークを使用して Web サイトをセットアップするための予算を立てるときは、そのことに留意してください。

 この記事は、Tagline Infotech LLP の Rahul Kalsariya によって執筆されました。