コア反応コンセプト

10099 ワード
react codenewbie javascript beginners テキストリンク
ハローフェロー👋,
まだ存在していないDOMの要素を作成し、id“root”でdivに追加したいとしましょう.
それから、これはバニラJavaScriptで行うことです.
HTML
<body>
  <div id="root"></div>
</body>
ジャバスクリプト
const root = document.getElementById('root')
const h1 = document.createElement("h1")

h1.innerHTML = "Hello World"
root.appendChild(h1)
反応は、上記のように長いコードを書くことから我々に利益をもたらすJSXと呼ばれているユニークな構文を持っています.

JSXとは
JSX JavaScriptへの構文拡張.
JavaScriptファイルとUIを結合することができます.
ReactDOM.render(<h1>Hello World</h1>, document.getElementById("root"))
上の例では<h1> JavaScriptのメソッドの中のタグ.
それは言っている<h1> IDを持つ要素でroot "
✏ 注意:
お読みくださいthe previous post , あなたがわからないならばReactDOM.render() 作品
JSXはHTMLとJavaScriptの組み合わせであるのでBabel JSXを翻訳し、HTMLをページに表示するには.

  • CDNを使うとき、BabelのCDNを含める必要があります.
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  • 我々は、我々が使用するBabelを有効にする反応ライブラリをインポートする必要がありますcreate-react-app パッケージ.
    import React from 'react'
    • ✏ 注意:
    オプションですが、JSXコードを含むファイルを保存できます.jsx の代わりに.js (例:Header.jsx ). このようにして、ファイルにJSXコードがあることに気付きます.

    JSXの多くの要素
    JSXでは互いの隣に複数の要素を持つことはできないことに注意してください.
    多くの要素をレンダリングする場合、これらの要素を開始タグと終了タグの内側にラップする必要があります.
    一部の開発者はフラグメントを使用します<></> ), いくつかの使用<div></div> ラッパーとして.
    アクセシビリティ目的のために、余分なものを与えないので、我々はより良い断片を使用します<div> . このように、それはスクリーン読者を使用する人々のためにより混乱しません.
    const element = (
  <>
    <h1>Hello World</h1>
    <p>How are you?</p>
  </>
)

ReactDOM.render(element, document.getElementById("root"))
    良い読み取り可能な目的のためには、一般的な練習では() .
    開始および終了ラッパータグの中に住んでいるものは何でも呼ばれますchildren property .

    クロージングタグ
    JSXはHTMLより厳格です.
    JSXの基本的なルールは、すべての要素が終了タグを持つ必要があることです.
    HTMLタグのような<input> , <img> , <br> , <hr> , など.
    JSXでは、これらのタグを閉じなければなりません.さもなければ、構文エラーを取得します.
    const element = (
  <>
    <h1>Hello World</h1>
    <br />
    <p>How are you?</p>
    <input type="text" placeholder="Type your message" />
    <button>Submit</button>
  </>
)

ReactDOM.render(element, document.getElementById("root"))

    JavascriptのJSXへの埋め込み
    前の例では、見出しと段落をハードコーディングしました.
    どのような場合は、値を動的に変更することができますか?
    JavaScriptを書き込む{} JavaScript関数とメソッドを実行することができます.
    JavaScriptとHTMLの間のセパレータとして見ることができます.
    const title = "Random Number"
function randomNum() {
  return Math.floor((Math.random() * 10) + 1)
}

const myNum = (
  <div>
      <h1>{title}</h1>
      <h2>My number is: {randomNum()}</h2>
  </div>
)

ReactDOM.render(myNum, document.getElementById("root"))
    さて、<h1> 私たちはタイトルを変更するときに更新されます.そして、我々はページをリフレッシュするたびに、乱数が生成されます.
    ✏ 重要な注意:
    どんなものでも{} はJavascript expression .

    結論
  • JSXはJavaScriptでHTMLのようなコードを直接入力できる構文です.
  • JSXの基本ルール
  • 明示的な終了タグを持ちます.<p></p> .
  • 自己閉鎖:<input /> .
  • 多くのJSX要素があるときラッパを持ってください;<></> or <div></div>
  • JavaScriptを書き込む{} JSXでJavaScriptのロジックを使用することができます.と内部のロジック{} JavaScript式である必要があります.
    • 読んでくれてありがとう!
    最後に、少なくとも、あなたは私を見つけることができます.つながりましょう!😊
    Android開発者の微信ウィジェットが穴を埋める道(2)
    Android微博、微信、QQ共有機能の実現