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 のインストールと設定のグラフィックチュートリアル

推薦する

MySQL (InnoDB) がデッドロックを処理する方法の詳細な説明

1. デッドロックとは何ですか?正式な定義は次のとおりです: 2 つのトランザクションが相手側で必要...

Vue のローカルコンポーネントの紹介

Vueでは、ローカルコンポーネントを自分で定義(登録)することができます。コンポーネント名を定義する...

Dockerはjenkins+mavenコード構築および展開プラットフォームを構築します

目次Docker の基本概念Docker インストール プロセス (Centos6.9)カーネルのア...

MySQL でのログインを取り消す

コンセプト紹介: MySQL の redo ログにはトランザクションの動作が記録されることはご存じの...

Linux システムで PATH 環境変数を設定する方法 (3 つの方法)

1. Windows システムでは、JDK のインストールなど、多くのソフトウェアのインストールで...

Dockerコンテナを使用する簡単な例

目次1. イメージをプルする2. イメージを実行する3. コンテナ内でアプリケーションをテストする4...

CSSで制御可能な点線を実装する方法

序文CSS を使用して点線を生成するのは、フロントエンド開発者にとっては簡単です。一般的に、これを実...

MySQLのトランザクション管理操作の詳細な説明

この記事では、MySQL のトランザクション管理操作について説明します。ご参考までに、詳細は以下の通...

hr 水平線スタイルの例コード

コードをコピーコードは次のとおりです。 <hr style="width:490px...

CSS の複雑なセレクターと CSS のフォントスタイルと色属性の詳細な説明

これまでに CSS の基本的なセレクターをいくつか学習しましたが、今日は CSS の複雑なセレクター...

インタラクティブな視覚化 JS ライブラリ gojs の使い方の紹介とヒント

目次1. gojsの紹介2. Gojsのアプリケーションシナリオ3. gojs を選ぶ理由: 4. ...

Docker で ElasticSearch と Kibana をインストールするためのサンプル コード

1. はじめにElasticsearchは現在非常に人気があり、多くの企業が利用しているため、esを...

DockerとFastDFSのインストールコマンドと使い方の詳しい説明

Dockerの機能1) すぐに始められるユーザーがプログラムを「Docker 化」するには、わずか数...

ウェブページ作成時に標準 HTML コードを使用する際のポイント

多くの Web サイト デザイナーが犯す最も一般的な間違いは、Web ページが IE で正常に表示さ...

データベースインデックスの知識ポイントの概要

目次ファーストルックインデックスインデックスの概念インデックスファイルの構成インデックスの役割SQL...