JSX概要

2889 ワード

React テキストリンク

JSX式を返す場合

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

レポートにJavaScript式を挿入するときは、括弧の周囲に引用符を入力しないでください.同じコメントを同時に使用できるのは、引用符(文字列値)または括弧(式)のみです.
JSXはHTMLではなくJavaScriptに近いため、REACT DOMはHTMLドキュメントツリー名ではなくcamelCase Property命名規則を使用します.
例えば、JSXではclassがclassName、tabindexがtabIndexである.

const element = <img src={user.avatarUrl}></img>;

このようにjavascriptは括弧を使用します.

JSXは対象を表します。

BaelはJSXをReact.createElement()呼び出しにコンパイルする.
次の2つの例は同じです.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

// 주의: 다음 구조는 단순화되었습니다
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

上記のオブジェクトを作成することもできます.

Reference

この問題について(JSX概要), 我々は、より多くの情報をここで見つけました https://velog.io/@hqillz/JSX-소개

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

[Java]基本16~25話の内容整理

.NET Framework 4の互換性の問題