ReactDOM.render()などの基礎
7058 ワード
まず、Reactはユーザーインタフェースを構築するためのJavascriptライブラリですが、PeactはVビューレイヤのみをカバーする完全なMVCまたはMVVMのフレームワークではありません.JSXはjavascriptの拡張であり、Typescript、coffeeScriptなどのようにJavascriptの文法糖であり、最終的にはJSにコンパイルされて実行されるので、JSXのコードを使ってReactの開発を行うことをお勧めします.JavascriptコードはJSXコードと互換性がないため、JSXを使用する場所ではtype=「text/babel」を追加する必要があります.Reactを使用する前に、react.js/react-dom.js/browser.min.jsの3つのライブラリを導入する必要があります.
JSXは、JavascriptとHTMLの混在を許可する特殊な例です.簡単な例を見てみましょう.
ReactDOM.renderは、テンプレートをHTML言語に変換し、指定したDOMノードを挿入するためのReactの最も基本的な方法です.ReactDOM.render(template,targetDOM)は、classがjavascriptの予約語であるため、2つのパラメータを受信します.1つ目は作成されたテンプレートで、複数のdom要素の外層は
<html>
<head>
<script src="../../react.js">script>
<script src="../../react-dom.js">script>
<script src="../../browser.min.js">script>
head>
<body>
body>
html>JSXは、JavascriptとHTMLの混在を許可する特殊な例です.簡単な例を見てみましょう.
<div id="container">div>
<script type="text/babel">
let value = "demo1";
let buttonName = "submit";
ReactDOM.render(
<div>
<input type="text" value={value}/> // “/”,
<button>{buttonName}button>// {}
div>,
document.getElementById("container")
)
script>ReactDOM.renderは、テンプレートをHTML言語に変換し、指定したDOMノードを挿入するためのReactの最も基本的な方法です.ReactDOM.render(template,targetDOM)は、classがjavascriptの予約語であるため、2つのパラメータを受信します.1つ目は作成されたテンプレートで、複数のdom要素の外層は
； 。 class ， class classNameのようなラベルで まなければなりません.たとえば、inputにclassNameを し、スタイルを します. "text" className="userName" value={value}/>
.userName{background: yellow}// CSS
に、 スタイルを し、すべてのスタイルを1つのオブジェクトに み、styleプロパティに の として を り てることができます.スタイルプロパティはbackground-colorではなくbackground Colorで されることに してください.font-sizeではなくfongSize、"text" style={{"backgroundColor":"yellow","color":"red"}} value={value}/>
また、スタイルを に り て、styleプロパティに を り てることができます. のようにします. <div id="container">div>
<script type="text/babel">
let value = "demo1";
let buttonName = "submit";
let inputStyle = {
"backgroundColor":"yellow",
"color":"red"
};
ReactDOM.render(
<div>
<input type="text" style={inputStyle} value={value}/>
<button>{buttonName}button>
div>,
document.getElementById("container")
)
script>