JSXが反応する初心者のためにどのようにレンダリングするかを解明すること

開発者は、初めての反応コードを見て、JSXを見て、なぜ私のJavaScriptでHTMLがあると思うかもしれませんか?ただし、JSXは実際にはHTMLや文字列ではありません.JavaScriptへの構文拡張です.
これはどういう意味ですかJSXでできることは何でも、プレーンJavaScriptで行うことができます.ほとんどの場合、JSXを使用しますが、これは一般的な誤解をクリアします.
我々はすべての時間を使用するので、この抽象化が実際にフードの下で何をしているかを確認するのは便利です.
では、いくつかのJSXをレンダリングする反応コンポーネントを作成するときにどうなりますか?それは反応を使用するように変換されます.与えられた型の新しい反応要素を返すCreateElement API.Response要素は、ユーザーインターフェイスで何を見たいのかを説明します.この型は、文字列として任意のタグ名(例:' div '、' h 2 '、' span ')、反応コンポーネント、または反応フラグメントです.反応する.CreateElementも小道具と子供たちの引数を取ります.反応DOMはDOMを反応要素と一致させるように更新する.

React.createElement(
  type,
  [props],
  [...children]
)

例を見てみましょう
我々は、名前プロップを取り、猫の名前を伝える文字列で見出しをレンダリングするコンポーネントCatを作成します.

JSXの使用

import React from "react";
import ReactDOM from "react-dom";

class Cat extends React.Component {
  render() {
    return <h1>My name is {this.props.name}</h1>
  }
}

ReactDOM.render( <Cat name="Fishguts" />,
  document.getElementById("app")
);

JSXなしでこれを書き直す方法を見てみましょう.createElement .である.我々が作成する関数をレンダリングし、私たちのCATコンポーネントとルートDOMノード' app 'を渡します.cat要素を型としてCreateElementを使用し、名前のプロパティを持つオブジェクトを小道具として使用します.catコンポーネント自体では、H 1タグを文字列として、子としてtemplate literalを渡します.

反応の使用createelement :

import React from "react";
import ReactDOM from "react-dom";

class Cat extends React.Component {
  render() {
    return React.createElement("h1", null, `My name is ${this.props.name}`);
  }
}

ReactDOM.render(
  React.createElement(Cat, { name: "Fishguts" }, null),
  document.getElementById("app")
); 

あなたがあなたの反応アプリでJSXを書くときに何が起こるかのより良い理解と離れて来てほしい!
ご質問、コメント、またはフィードバックがある場合-私に知らせてください.JavaScript、反応、Python、およびdjangoについての新しい毎週の投稿に従ってください!