React フレームワークの概要、機能、インストールおよび基本的な使用プロセス

1.反応の概要

公式ウェブサイト: React (docschina.org)

React は、Facebook フロントエンド開発チームによって開発および保守されている JS フレームワークです。

React の実装機能は VUE に似ていますが、外国の開発スタイルのため、データレンダリングの手順が React にカプセル化されておらず、開発者はデータレンダリングを手動で完了するためにより多くの es6 構文を使用する必要があるため、コードは VUE よりも困難です高い。

2. React のメリットとデメリット

アドバンテージ：

1. すべてはコンポーネントです: React でのほとんどすべての開発はコンポーネントを使用して行われます利点: コードの再利用性と保守性が向上します。

2. 高速: 仮想 DOM メカニズム (仮想 DOM) が React で提供されます

3. クロスブラウザー互換性: React で仮想 DOM を使用すると、実際の DOM が直接解析されないため、クロスドメインブラウザー互換性の問題が解決され、IE8 でも使用できます。

4. 同型性、純粋な JavaScript: ほとんどすべてのプロジェクトは JavaScript を使用して開発されます

5. 一方向データフロー: React は、一方向データフローを構築するために、flux と redux という 2 つのアーキテクチャを提供します。

欠点:

1. 完全なフレームワークではない

2. React は、MVC ではせいぜい V 層 (ビュー層) とみなされ、完全なプロジェクトを構築するには通常、reactRouter および redux と組み合わせる必要があります。

3. Reactのインストールと使い方

cdn: 公式サイトに入り、写真の順にクリックしてください

その後、React の基本的な使用方法のドキュメントである HTML ドキュメントが表示されます。マウスを右クリックし、「名前を付けて保存」を選択してデスクトップ (または任意のフォルダー) に保存できます。

赤い枠で囲まれた部分は、 React Online CDN リンクであり、インターネット接続がないと使用できません。赤いボックスの内容をコピーして新しいページで開き、すべてのコードをローカルに保存することもできます。

この HTML ファイルを vscode で開くと、次のような効果が表示されます。

現時点でのHTMLコード全体は以下の通りです（注釈は個人的な理解のためのものです）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>     <!-- 声明需要渲染的区域  -->
    <script type="text/babel">
    
      function MyApp() {
        return <h1>Hello, world!</h1>;
      }

      const container = document.getElementById('root');  // 捕获渲染区域
      const root = ReactDOM.createRoot(container);  //创建DOM元素
      root.render(<MyApp />);  //将DOM元素渲染到渲染区域当中

    </script>
  </body>
</html>

npm

npm init -y //package.jsonを初期化する

npm 私は反応します反応-dom -S