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 のインストールと設定のグラフィックチュートリアル
1. デッドロックとは何ですか?正式な定義は次のとおりです: 2 つのトランザクションが相手側で必要...
Vueでは、ローカルコンポーネントを自分で定義(登録)することができます。コンポーネント名を定義する...
目次Docker の基本概念Docker インストール プロセス (Centos6.9)カーネルのア...
コンセプト紹介: MySQL の redo ログにはトランザクションの動作が記録されることはご存じの...
1. Windows システムでは、JDK のインストールなど、多くのソフトウェアのインストールで...
目次1. イメージをプルする2. イメージを実行する3. コンテナ内でアプリケーションをテストする4...
序文CSS を使用して点線を生成するのは、フロントエンド開発者にとっては簡単です。一般的に、これを実...
この記事では、MySQL のトランザクション管理操作について説明します。ご参考までに、詳細は以下の通...
コードをコピーコードは次のとおりです。 <hr style="width:490px...
これまでに CSS の基本的なセレクターをいくつか学習しましたが、今日は CSS の複雑なセレクター...
目次1. gojsの紹介2. Gojsのアプリケーションシナリオ3. gojs を選ぶ理由: 4. ...
1. はじめにElasticsearchは現在非常に人気があり、多くの企業が利用しているため、esを...
Dockerの機能1) すぐに始められるユーザーがプログラムを「Docker 化」するには、わずか数...
多くの Web サイト デザイナーが犯す最も一般的な間違いは、Web ページが IE で正常に表示さ...
目次ファーストルックインデックスインデックスの概念インデックスファイルの構成インデックスの役割SQL...