React 入門レベルの詳細なメモ

React 入門レベルの詳細なメモ

1. Reactの基本的な理解

1. はじめに

ReactはFacebookがオープンソース化したユーザーインターフェース(ビューのみに焦点を当てた)を構築するためのJavaScriptライブラリです。

2. Reactの特徴

  • 宣言的
  • コンポーネントベース
  • 一度学べばどこでも書ける(クライアントとサーバーのレンダリングをサポート)
  • 効率的
  • 一方向のデータフロー

3. Reactが効率的な理由

  • 仮想DOM、必ずしもDOMを直接操作するわけではない
  • DOM Diffアルゴリズム、ページの再描画を最小限に抑える

2. Reactの基本的な使い方

1. 関連するjsライブラリ

  • `react.js`: Reactのコアライブラリ
  • `react-dom.js`: DOMを操作するためのReact拡張ライブラリを提供します
  • `babel.min.js`: JSX 構文コードを純粋な JS 構文コードに解析するライブラリ

2. ページにjsライブラリをインポートする

<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>

3. コーディング

<script type="text/babel"> //babelを宣言する必要があります
  // 1. 仮想 DOM 要素を作成します。const vDom = <h1>Hello React</h1> // 引用符を追加しないでください。// 2. 仮想 DOM をページの実際の DOM コンテナーにレンダリングします。ReactDOM.render(vDom, document.getElementById('test'))
</スクリプト>

リアクトJSX

1. 仮想DOM

Reactは特別な一般的なjsオブジェクトを作成するためのAPIをいくつか提供しています

var 要素 = React.createElement('h1', {id:'myTitle'},'hello')

上記で作成されたのは単純な仮想DOMオブジェクトです

仮想DOMオブジェクトは最終的にReactによって実際のDOMに変換されます。

コーディングするときは、基本的にReactの仮想DOM関連データを操作するだけでよく、Reactはそれを実際のDOMの変更に変換し、インターフェースを更新します。

2. JSX

  • フルネーム: `JavaScript XML`
  • ReactはXMLに似たJS拡張構文を定義します: `XML+JS`
  • 機能: 反応仮想DOM(要素)オブジェクトを作成するために使用します

var ele = <h1>こんにちは JSX!</h1>

注 1: 文字列でもHTML/XMLタグでもありません。

注2: 最終的にはJS對象を生成します

  • 任意のタグ名: HTMLタグまたはその他のタグ
  • 任意のタグ属性: HTMLタグ属性またはその他の
  • 基本的な文法ルール

<で始まるコードに遭遇した場合、タグ構文に従って解析します。同じ名前のHTMLタグは同じ名前のHTML要素に変換され、他のタグは特別な解析が必要です。

{で始まるコードに遭遇した場合は、JS構文で解析します。タグ内のJSコードは{}で囲む必要があります。

  • `babel.js`の役割

ブラウザはJSXコードを直接解析することができず、実行する前にbabelによって純粋なJSコードに変換する必要がある。

JSXを使用するときは常に、Babelで処理する必要があることを宣言するためにtype="text/babel"を追加する必要があります。

3. 仮想DOM要素のレンダリング

文法:

ReactDOM.render(仮想DOM、コンテナDOM)

  • パラメータ 1: 純粋な js または jsx によって作成された仮想 dom オブジェクト
  • パラメータ 2: 仮想 DOM 要素を格納するために使用される実際の DOM 要素オブジェクト (通常は div)

効果:
仮想DOM要素をページ内の実際のコンテナDOMにレンダリングして表示する

4. 仮想DOMの作成方法

純粋なJSメソッド

React.createElement('h1',{id:'myTitle'}, タイトル

JSX の方法

<h1 id='myTitle'>{タイトル}</h1>

コードサンプル

<div id="アプリ"></div>
const test1 = '私のテスト1'
// 1. 仮想DOMを作成する: 2つのメソッド var element = React.createElement('h3',{id:app},test1)
var 要素2 = <h3 id={test1}>{test1}</h3>
// 2. 仮想DOMをレンダリングする
ReactDOM.render(要素、document.getElementById('app'))
ReactDOM.render(要素2、ドキュメント.getElementById('app'))

5. React で Hello World を実現

ステップ1: react.js関連ライブラリを導入する

<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>

ステップ2: ルート要素を定義する

<div id="アプリ"></div>

ステップ3: babel環境でReactコードを書く

<script type="text/babel">
// 1. 仮想 DOM 要素オブジェクトを作成します var vDOM = <h1>Hello W</h1> //文字列ではありません// 2. 仮想 DOM をページの実際の DOM コンテナーにレンダリングします ReactDOM.render(vDOM,document.getElementById('app'))
</スクリプト>

React 初心者向けの詳細な注意事項に関するこの記事はこれで終わりです。この記事では、React の基本的な概念と基本的な使用方法、および React に関連するよく使用される js ライブラリについて説明します。お役に立てば幸いです。

以下もご興味があるかもしれません:
  • Reactフック入門チュートリアル
  • React Native の基礎: Flexbox レイアウトの初期使用
  • React Native の基礎: React Native アプリケーションのデバッグへの小さな一歩
  • react-reduxプラグインの詳細な紹介
  • React 高階コンポーネントの紹介
  • React を使い始める上で重要な知識ポイントをご存知ですか?

<<:  Tomcatがセッションを管理する方法の例

>>:  MySQL 8.0.15 のインストールと設定のグラフィックチュートリアル

推薦する

Mysql5.7.18 のインストールとマスタースレーブレプリケーションの詳細なグラフィック説明

CentOS6.7にmysql5.7.18をインストールする 1. /usr/localディレクトリ...

Nginx における accept lock の仕組みと実装の詳細な説明

序文nginx はマルチプロセス モデルを使用します。リクエストが届くと、システムはプロセスをロック...

フロントエンドJavaScript ES6の詳細について

目次1. はじめに1.1 Babel トランスコーダ1.2 ポリフィル2. let と const ...

MySQL truncate table ステートメントの使用

Truncate table ステートメントは、テーブル内のすべてのデータを削除/切り捨てるために使...

MySQLトリガーの簡単な使用例

この記事では、例を使用して MySQL トリガーの簡単な使用方法を説明します。ご参考までに、詳細は以...

HTML テーブル マークアップ チュートリアル (9): セル間隔属性 CELLSPACING

テーブルがコンパクトになりすぎないように、テーブル内のセル間に一定の距離を設定できます。基本的な構文...

Centos8 で Apache httpd2.4.37 を使用して Web サーバーをインストールする詳細な手順

ステップ 1: yum install httpd -y #httpd サービスをインストールします...

JavaScript BOMの構成と一般的なイベントの詳細な説明

目次1. 部品2. BOMの構成2. ウィンドウオブジェクトの共通イベント1. ウィンドウ読み込みイ...

廃止された Docker は Podman に置き換えられますか?

Kubernetes チームは最近、最新バージョンの Docker でサポートされている機能を廃止...

CSS を使用して複数の方法で下揃えを実装するサンプル コード

会社のビジネス要件により、次の図の赤い領域の効果を達成する必要があります。 効果の説明: 1. 赤い...

CentOS仮想マシンの時刻を変更する方法

上はシステム時間、下はハードウェア時間です。ここでは変更を加えているので、同じくらいの速さになってい...

VUE+CanvasはシンプルなGobangゲームの全プロセスを実現します

序文レイアウトの点では、Gobang はランダムな動きを目的とするゲームよりも実装がはるかに簡単で、...

SQL 文で OR と AND を混在させる場合のヒント

現在、このような要件があります。ログインした人がカスタマー サービス担当者である場合、注文は「このカ...

mysql 5.7.23 winx64 解凍バージョンのインストールチュートリアル

参考までに、mysql-5.7.23-winx64 解凍版の詳細なインストールチュートリアルです。具...

大きな MySQL テーブルに列を追加する方法

質問は https://www.zhihu.com/question/440231149 から参照さ...