これまでで最も入門的な React ブログ

皆さんこんにちは。お元気ですか？タイトルから、この投稿の内容を推測できたかもしれませんが、もしかしたら、そうでなかったり、予想外の内容を発見したりするかもしれません。ということで、この記事を早く読んでください。

この記事の出典

数年前に React について質問されたとき、私の答えは、それは単なる JavaScript だというものでした。はい、それは JavaScript ですが、それ以上のものはあるのでしょうか?具体的には何ができるのでしょうか？なぜみんなそれについて話しているのですか？

私は React に関する非常に基本的な記事や読書を探しています。しかし、適切な情報は見つかりませんでした。今でも、同じ問題に直面している同僚や友人がたくさんいるので、彼らが React の学習を始めるのに役立つように、React に関する記事をいくつか書くことにしました。以前の Java または CSS の記事と同様に、これらの記事も非常に理解しやすくなるように最善を尽くします。

この記事では、React とは何かについて概要を説明します。コーディング部分や複雑な技術用語には触れず、いくつかの箇条書きで簡潔にまとめます。

コメント欄でご意見をお聞かせください

始めましょう…

---

• React は、Meta (旧 Facebook) によって作成された JavaScript フロントエンド ライブラリです。はい、これはフレームワークではなくライブラリですが、Angular はユーザー インターフェイスを作成するためのフレームワークです。
• React を使用する場合は、インストールしてユーザー インターフェイスを作成するだけです。その使用方法については次の記事で説明しますが、今のところ、これを使用するには簡単なコマンドでインストールするだけであることを覚えておいてください。
• React を使用すると、Web アプリケーションでモバイル アプリのような優れたエクスペリエンスが提供されます。
• React を使用して Web アプリケーションを作成する場合、リンク、ボタン、タブをクリックする前に別のページが読み込まれるのを待つ必要はありません。
• React ではページをリロードする必要はありません。データはリロードせずにページ自体で更新されます。つまり、ここでは reload() メソッドを使用しません。ただし、使用しないことに制限はありません。結局のところ、それは依然として JavaScript だからです。
• React で作成された Web アプリケーションは非常にインタラクティブで、スムーズに使用できます。さらに、ここでの移行はほぼ瞬時に行われるため、新しいページが読み込まれるまで待つ必要はありません。
• 従来の Web サイトでは、リンクをクリックするとサーバーにリクエストが送信され、サーバーは応答として HTML ページを返すため、多少の遅延が発生し、ページが読み込まれるまで待機する必要がある場合があります。一方、React ではブラウザーで JavaScript を実行するため、ブラウザーでロジックを実行し、ユーザーに表示される内容を操作できます。これは DOM (実際には HTML 構造) を通じて行われます。そのため、ユーザーに別のコンテンツを表示するために HTML ページをリクエストする必要はありません。
• React の主な特徴は、宣言型のコンポーネントベースの開発アプローチです。 React のすべてはコンポーネントです。 React コンポーネントとは何ですか? React コンポーネントは、いくつかのパラメーターを渡す関数のようなモジュールで、React 要素を返します。
• ここで、React 要素とは何でしょうか?という質問が来ます。ご存知のとおり、HTML には要素 (p、div、body) があり、これらの要素を使用してアプリケーションのフロントエンドを作成します。さて、React 要素は HTML 要素と同じように使用されますが、これらの React 要素は自分で作成されますが、HTML 要素は事前に作成されます。
• ここで再び質問になりますが、React 要素を作成するにはどうすればよいでしょうか? React 要素を作成するには、JSX を使用します。 JSX は JavaScript XML の略です。 JSX コードは基本的に JavaScript の HTML コードです。 JSX を使用する必要はありませんが、JSX を使用すると React アプリケーションの作成が容易になります。 JSX の紹介はこれで終わりです。JSX については別の記事で詳しく説明します。
• ここで最も重要な点は、なぜ React を使用するのかということです。それは、SPA アプローチ、つまりシングル ページ アプリケーション アプローチを使用しているからです。このアプローチでは、新しい HTML ページはロードされず、サーバーは HTML ページを 1 回だけ送信します。その後、React が引き継ぎ、既存のページの DOM 要素を操作することでアプリケーションの UI を制御します。この最良の例は Netflix Web サイトです。Web サイトにアクセスして、HTML ページが読み込まれていないことを自分の目で確認できます。https://www.php.cn/link/b06cbb874ce37177f6dcdf690b5ac490

最後に、React は最新の応答性の高いユーザー インターフェイスを構築することがすべてであると言いたいと思います。

読んでいただきありがとうございます。また別の基本的な記事でお会いしましょう

何かアイデアがあれば共有し、間違っている場合は修正してください。

この記事が気に入っていただけて、お役に立てば幸いです。

Twitter または LinkedIn で私とつながりましょう

Java または CSS について読みたい場合は、私のブログにアクセスしてください https://www.php.cn/link/5a2cb441c18f6535a9fb765251345d0f

以上がこれまでで最も入門的な React ブログの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。