reactjs

JSX

コードの見た目はHTMLにかなり似ている
jsx compiler がjsxをjavascriptに変換してくれる

JSX element

変数やobjectに保存できる

//変数の時
const name = <li> my name is </li>;

//objectの時
const myTeam = {
  member1: <li> A </li>,
  member2: <li> B </li>,
  member3: <li> C </li>
};

JSX element は属性(attribute)をもつ

const p1 = <p id="large"> kan </p>;
const p2 = <p id="small"> fo </p>;
//値は""もしくは''でかこむ
//ひとつのelementで複数の属性を持つ子ができる

Nested JSX

const example = (
  <a href="http://www.example.com">
    <h1>
     Hello
    </h1>
  </a>
);
//<a></a>が<h1></h1>を囲んで(nest)いる
//JSXで複数の行を書きたいときは()で囲む