React JSX

JSXとは

JavaScriptの拡張構文
React 要素を簡便な形式で作成できる

ライブラリ読み込み

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

エレメントの出力

<div id="root">wait…</div>

<script type="text/babel">
 let dom = document.querySelector('#root');

 let element = (
  <div>
   <h2>JSX sample</h2>
   <p>This is sample message.</p>
  </div>
 );

 ReactDOM.render(element, dom);
</script>

変数

変数の埋め込み

let title = "AAAAA";
let message = "BBBBB";

let element = (
 <div>
  <h2>{title}</h2>
  <p>{message}</p>
 </div>
);

let dom = document.querySelector('#root');

属性の埋め込み

let title = "AAAAA";
let message = "BBBBB";
let link = "https://office-yone.com";

let element = (
 <div>
  <h2>{title}</h2>
  <p><a href={link}>{message}</a></p>
 </div>
);

ReactDOM.render(element, dom);

スタイルの埋め込み

let dom = document.querySelector('#root');

let title = "AAAAA";
let message = "BBBBB";

連想配列
const style = {
 fontSize: "20pt", ※font-size → fontSize
 color: "red",
};

let element = (
 <div>
  <h2>{title}</h2>
  <p style={style}>{message}</p>
 </div>
);

ReactDOM.render(element, dom);

関数の定義、呼び出しの埋め込み

let dom = document.querySelector('#root');

let print = function(msg, fontSize, color){
 const style = {
  fontSize: `${fontSize}pt`,
  color: `${color}`,
 };
 return <p style={style}>{msg}</p>;
};

let element = (
 <div>
  {print('RED', 5, 'red')}
  {print('BLUE', 10, 'blue')}
  {print('GREEN', 15, 'green')}
 </div>
);

ReactDOM.render(element, dom);

制御文

IF文

let dom = document.querySelector('#root');

let flg = true;

let element = (
 <div>
  trueの時のみ処理
  {flg && <p>true</p>}

  分岐
  {flg ?
   <p>true</p>
  :
   <p>false</p>
  }
 </div>
);

ReactDOM.render(element, dom);

配列

let dom = document.querySelector('#root');

let list = [
 <li>PHP</li>,
 <li>Python</li>,
 <li>Java</li>,
];

let element = (
 <div>
  <ul>
   {list}
  </ul>
 </div>
)

ReactDOM.render(element, dom);

map

let dom = document.querySelector('#root');

const style = {
 fontSize: "20pt",
 color: "red",
};

let list = [
 <li>PHP</li>,
 <li>Python</li>,
 <li>Java</li>,
];

let element = (
 <div>
  <ul>
   {
    list.map((elm) => (
     <span style={style}>{elm}</span>
    ))
   }
  </ul>
 </div>
)

ReactDOM.render(element, dom);

イベント処理

タイマーによる画面更新

let dom = document.querySelector('#root');

var count = 0;

setInterval(() => {
 count++;
 let element = (
  <div>
   <p>count:{count}</p>
  </div>
 );
 ReactDOM.render(element, dom);
}, 1000);

イベント処理

let dom = document.querySelector('#root');

var count = 0;

let action = (event) => {
 count++;
 let element = (
  <div>
   <p onClick={action}>count:{count}</p>
  </div>
 );
 ReactDOM.render(element, dom);
};
action();

フォームイベント処理

let dom = document.querySelector('#root');

let name = '';
let message = '';

let change = (event) => {
 name = event.target.value;
 message = `Hello Mr.${name}`;
};

let action = (event) => {
 let element = (
  <div>
   <p>{message}</p>
   <input type="text" id="input" onChange={change} />
   <button onClick={action}>Click</button>
  </div>
 );
 ReactDOM.render(element, dom);
};
action();

Follow me!

前の記事

React