JSX

jsの機能を全部備えているらしい

React はマークアップとロジックを両方含む疎結合の「コンポーネント」という単位を用いて関心を分離します。

JSXは式

code:jsx

const var1 = (ここでマークアップ書ける)

code:jsx

function formatName(user) {

return user.firstName + ' ' + user.lastName;

}

const user = {

firstName: 'Harper',

lastName: 'Perez'

};

// 複数行定義時は () で囲むといい

// セミコロンは要らねえ

const element = (

<h1>

Hello, {formatName(user)}! </h1>

);

code:{}で属性を埋め込める.jsx

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

内部的にはこう

これをReact要素と呼ぶ

code:before.jsx

const element = (

<h1 className="greeting">

Hello, world!

</h1>

);

code:after.js

const element = React.createElement(

'h1',

{className: 'greeting'},

'Hello, world!'

);