[React] Hello world! feat. 🧐なぜ反応を書くのですか?

8064 ワード
テキストリンク

緒論🧐


待ちに待った反応が分かった
レコーダなしの講義と、はんのうサイト、誰もが真似した反応を読んだ後の感想です.
反応器はJavaScriptのライブラリであり、インタラクティブなサイトの管理に役立つと考えられています.今日は、なぜ反応が必要なのか、すべての言語の最初のステップhello worldをコードします.

💁🏻What is React?


reactは、ユーザインタフェースを作成するためのJavaScriptライブラリです.
応答はFacebookが提供するフロントエンドライブラリです.
ユーザーインタフェースを動的に表示するには、多くのDOM要素を管理し、コードを整理する必要があります.この点を最小限に抑え、機能開発に専念するために、多くのフレームワークを作成し、React、Angular、Vueの3つの機能を生成しました.

💁🏻Why React?

  • の技術を学ぶとき、重要なのは誰が技術を使うか、彼らの規模がどれだけ大きいか、この技術がどれだけ重要かを見ることです.現在、Air Vi&B、Instagram、Facebook、Netflixなどのフィードバック機能を使用している大手企業が多い.
  • は現在開発者の中で最も人気のある技術です.これは便利だからでしょう.
  • 多くの企業がこの技術を使用する開発者を好んでいます.
    • 私は以上の3つの理由で反応を学ぶと思います.
    また,反応の利点も理解した.

    反応の二つの大きな特徴


  • バーチャルドーム(Vertual Dom)
    リアクターは仮想ドームを使用してWebアプリケーションのパフォーマンスを最大化します.
    変更が発生した場合、実際のDOMに新しいコンテンツを追加する必要はなく、仮想のDOMで1回レンダリングし、更新が必要な場所だけ既存のDOMと比較します.
    これは、変化を最小限に抑え、パフォーマンスを向上させることを意味します.

  • 構成部品
    コンポーネントはUIを構成する個別の部分であり、UIが服と呼ばれる場合、コンポーネントは生地であり、生地を裁断することによって服を作る.繰り返し使用でき、メンテナンスが容易です.

    • 💁🏻How to use react?

    <!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
  <script>
    const root = document.getElementById("root");
    const h3 = React.createElement(
      "h3",
      {
        id: "title",
        onMouseenter: () => console.log("mouse enter"),
      },
      "Hello I'm a title"
    );
    const btn = React.createElement(
      "button",
      {
        onClick: () => console.log("click"),
      },
      "Click me"
    );

    const conatainer = React.createElement("div", null, [h3, btn]);
    ReactDOM.render(conatainer, root);
  </script>
</html>
  • は、最初にreact JS(イベントリスナーのようなインタラクティブな操作を可能にする)とreactDOM(react要素をhtmlに変換するための)コードをインポートした.
  • という名前の空のdivが作成されました.RealtDOMがReact要素をインポートする場所です.
  • 、そしてRealtDOMです.renderでは、ルートdivにreact要素を表示できます.
    React.createElementでは、各要素のプロパティをHTMLに一緒に適用できます.しかし、私はこれ以上書きません.これはJSXの文法を使うと便利だからです.
    • 次の授業でJSXを紹介します.
    【訳】TestNG公式文書中国語版(07)——試験方法、試験類と試験グループ(5.7-5.12)
    react-mockデータによるページの実装(feat.FE&BEコミュニケーションの重要性)