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

公開: 2022-07-12

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

目次に表示
  • ReactJSとは何ですか?
  • なぜReactJSを使うのですか?
  • ブラウザにインストールする
  • ReactJSを使用するようにApp.jsを変換する
  • サンプルアプリで構築を開始します
  • コンポーネントを使用した基本的な例
  • 静的vs動的vsPureComponent
  • ReactJSコンポーネントのライフサイクルメソッド
  • コンポーネントの状態の処理
  • 親コンポーネントから子コンポーネントへのデータの受け渡し
  • 結論

ReactJSとは何ですか?

What-is-React-ReactJS

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

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

おすすめ: ReactNativeアプリのパフォーマンスを最適化するための5つの価値のあるヒント。

なぜReactJSを使うのですか?

なぜ-Use-React-ReactJS

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

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

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

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

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

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

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

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

Reactを使い始める方法はたくさんありますが、私たちのお気に入りの1つは、シンプルなTo-Doリストアプリを作成することです。 すばやく移動し、多くの一般的な間違いを回避するために、バックエンドコードとフロントエンドコンポーネントを交換するだけのサンプルアプリケーションを作成しました。 画像を含め、必要なものがすべて揃っているので、見栄えがよくなります。

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

react-js-logo

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

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

あなたが好きかもしれません: Facebook JavaScriptエンジン(エルメス)はAndroid上でReactNativeを後押しします。
JSX構文の概要

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

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

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

静的vs動的vsPureComponent

React-JavaScript-Library-ReactJS

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

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

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

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

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

Reactsが状態管理にアプローチする方法はやや独特です。 ほとんどのフレームワークが状態を処理する方法を最初に検討する必要がある理由を理解するため。

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

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

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

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

あなたも好きかもしれません:ヘッドレスWordPressでReactJSが提供する改善点は何ですか?

結論

結論

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

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

 この記事は、TaglineInfotechLLPのRahulKalsariyaによって書かれました。