Resact JSX概要

15418 ワード
React テキストリンク

JSX概要


Hello world
読みながら実習したい人はまずreact-create-appを見てみましょう.
<!-- HTML -->
<div id="root"></div>
//jsx
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

まず基本的なHelloworldから画面に出力します.HTMLではdivのid値はrootです.jsxでgetElementByIdというIDのタグを見つけ、h 1タグを加えてレンダリングします.
ここでJSXとは何ですか.const element = <h1>Hello, world!</h1>;はJSXで、JavaScriptを拡張する構文です.XMLと同様に、コードがブラウザで実行される前に、コードはバインド中にバーベルを使用して通常のJavaScript形式のコードに変換されます.
const name = 'LEE HYUNHO';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

前述したように、JavaScript変数を宣言して括弧で囲み、JSXで使用することができます.
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'LEE',
  lastName: 'HYUNHO'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);
カッコ内に関数を入れることもできます.結果はHelloLeeHyunho
function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}


function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'LEE',
  lastName: 'HYUNHO'
};

const element = (
  <h1>
    {getGreeting(user)}
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

JSXも式です.JSXはif,forなどに用い,変数に割り当て,パラメータとして受け入れ,関数から返すことができる.userがなければ、上記の結果が得られます.

  • JSX属性

  • 文字列の定義const element = <div id="root"></div>;」と定義します.

  • 属性にJS式を挿入const element = <img src={user.avatarUrl}></img>;かっこを使用します.

  • camelCase
    JSXはHTMLよりJSに近い.したがって、HTML属性名の代わりにCamelCaseを使用します.
    ex)class=className=「btn」ではなく「btn」を使用

  • JSXサブアイテム定義

  • 空のラベルconst element = <img src={user.avatarUrl} />;XMLのように、空のタグをすぐに閉じましょう.

  • やれやれ.
    • const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);
    JSXタグにはサブアイテムを含めることができます.
  • XSS攻撃防止
    const title = response.potentiallyMaliciousInput;
// 이것은 안전합니다.
const element = <h1>{title}</h1>;
    REACT DOMは、JSXに挿入されたすべての値をレンダリングする前にescapeを行う.また、すべての項目が文字列に変換されるため、アプリケーションが明確に作成していない内容は注入されません.(どういう意味かわかりませんが…)

  • JSX表示対象
    const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
    const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
    この2つの例は同じです.BaelはJSXをreact.createElement()呼び出しにコンパイルする.
    const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};
    こうしてこのような対象が生まれた.(=reactエイリアス)
    reactは、これらのオブジェクトを読み取り、DOMを整理し、最新の状態を維持するために使用される.
    • の最後の部分
    JSX > React.要素>仮想DOM>reactDOMの登録
    Spring BootからJPA処理データベースへ(04)
    Git