1. Reactの基本的な理解1. はじめにReactはFacebookがオープンソース化したユーザーインターフェース(ビューのみに焦点を当てた)を構築するためのJavaScriptライブラリです。 2. Reactの特徴
3. Reactが効率的な理由
2. Reactの基本的な使い方1. 関連する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')) </スクリプト> リアクトJSX1. 仮想DOMReactは特別な一般的なjsオブジェクトを作成するためのAPIをいくつか提供しています var 要素 = React.createElement('h1', {id:'myTitle'},'hello') 上記で作成されたのは単純な仮想DOMオブジェクトです 仮想DOMオブジェクトは最終的にReactによって実際のDOMに変換されます。 コーディングするときは、基本的にReactの仮想DOM関連データを操作するだけでよく、Reactはそれを実際のDOMの変更に変換し、インターフェースを更新します。 2. JSX
注 1: 文字列でも 注2: 最終的には
<で始まるコードに遭遇した場合、タグ構文に従って解析します。同じ名前のHTMLタグは同じ名前のHTML要素に変換され、他のタグは特別な解析が必要です。 {で始まるコードに遭遇した場合は、JS構文で解析します。タグ内のJSコードは{}で囲む必要があります。
ブラウザはJSXコードを直接解析することができず、実行する前にbabelによって純粋なJSコードに変換する必要がある。 JSXを使用するときは常に、Babelで処理する必要があることを宣言するためにtype="text/babel"を追加する必要があります。 3. 仮想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 ライブラリについて説明します。お役に立てば幸いです。 以下もご興味があるかもしれません:
|
>>: MySQL 8.0.15 のインストールと設定のグラフィックチュートリアル
CentOS6.7にmysql5.7.18をインストールする 1. /usr/localディレクトリ...
序文nginx はマルチプロセス モデルを使用します。リクエストが届くと、システムはプロセスをロック...
目次1. はじめに1.1 Babel トランスコーダ1.2 ポリフィル2. let と const ...
Truncate table ステートメントは、テーブル内のすべてのデータを削除/切り捨てるために使...
この記事では、例を使用して MySQL トリガーの簡単な使用方法を説明します。ご参考までに、詳細は以...
テーブルがコンパクトになりすぎないように、テーブル内のセル間に一定の距離を設定できます。基本的な構文...
ステップ 1: yum install httpd -y #httpd サービスをインストールします...
目次1. 部品2. BOMの構成2. ウィンドウオブジェクトの共通イベント1. ウィンドウ読み込みイ...
Kubernetes チームは最近、最新バージョンの Docker でサポートされている機能を廃止...
会社のビジネス要件により、次の図の赤い領域の効果を達成する必要があります。 効果の説明: 1. 赤い...
上はシステム時間、下はハードウェア時間です。ここでは変更を加えているので、同じくらいの速さになってい...
序文レイアウトの点では、Gobang はランダムな動きを目的とするゲームよりも実装がはるかに簡単で、...
現在、このような要件があります。ログインした人がカスタマー サービス担当者である場合、注文は「このカ...
参考までに、mysql-5.7.23-winx64 解凍版の詳細なインストールチュートリアルです。具...
質問は https://www.zhihu.com/question/440231149 から参照さ...