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 ライブラリについて説明します。お役に立てば幸いです。