「React.js & Next.js超入門」の感想・備忘録1

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="root" onclick="doCount();"></div>
<script>
  let counter = 0;
  let name = 'hoge';

  const root = ReactDOM.createRoot(document.getElementById('root'));
  const doCount = () => {
    counter++;
    const element = React.createElement('p', {onClick: doCount}, `count: ${counter}`)
    root.render(element);
  };
  doCount();
</script>

仮想DOMのroot作成
React.createRoot(document.getElementById('xxx'))
仮想DOMエレメントの作成
React.createElement(タグ名, 属性, ボディ)
レンダリングの実行
root.render(仮想DOMエレメント)

React.createElementの第3引数

入れ子にする場合

const element2 = React.createElement('div', {},
  React.createElement('h5', {}, '仮想DOMのエレメントの入れ子\n')
);
ReactDOM.render(element2, document.getElementById('root2'));

配列にする場合

const element3 = React.createElement('p', {}, [
  React.createElement('h5', {key: 1}, '仮想DOMのエレメントの配列\n'),
  React.createElement('h5', {key: 2}, '仮想DOMのエレメントの配列\n')
]);
ReactDOM.render(element3, document.getElementById('root3'));

Create React App

npx create-react-app react_app
cd react_app
npm startで確認、npm run buildでビルド

ドキュメントルート以外に配置する場合は、package.jsonにhomepageの指定が必要。
"homepage": "https://xxx.xx.xx/hoge/"や"homepage": "./"など

JSX

JSXを使う

CDNを使う場合
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
を追加すると、JSXを使って以下のように書くことができる。
ReactDOM.render(<p>JSX Sample</p>, document.getElementById('root4'));
JSXはReact.createElement()を書き換えたものであり、React.createElement()の第1引数はタグ名を1つだけ指定するため、JSXのルート要素は1つでなければならない。
JSXの実体はHTMLElementインスタンスなので、変数に代入、式で利用、関数の戻り値として返す、など普通の値と同じように扱うことができる。

const printMsg = function() {
  return <p>JSXを関数の戻り値として利用</p>
}
const element = <h5>{printMsg()}</h5>
ReactDOM.createRoot(document.getElementById('root7')).render(element);

属性値とCSS

Vue.jsとは違い、JSXではxxx={hoge}のように属性値にも{}を使うことができる。
ReactDOM.render(<input type="text" value={name}/>, document.getElementById('root6'));
ビルトインCSS JSX内で<style>タグを記述する場合は<style JSX{`スタイル定義`}</style>と書かなければならない
インラインスタイルを指定する場合は、文字列ではなくオブジェクトで指定する。
font-sizeなどハイフン区切りのスタイル名は、fontSizeのようにキャメルケースにしなければならない。
ReactDOM.render(<input type="text" style={ {width: '100px', backgroundColor: 'red'} }/>, document.getElementById('root6'));
JSXの中ではstyle="xxx: yyy"と書くことはできないので注意。
また、style={ { xxx: yyy } }ではなく、値は文字列でstyle={ { xxx: 'yyy' } }となるので注意。

制御文

分岐処理

Reactでは論理演算子&&、三項演算子で分岐処理を記述することが多い。
<div>{name === 'hoge' && <p>hogeです</p>}</div>

ループ処理

ReactではJSX配列、map関数でループ処理を記述することが多い。

JSX配列

const list = [<li key="100">100</li>, <li key="200">200</li>]; ReactDOM.createRoot(document.getElementById('root9')).render(<ul>{list}</ul>);

map関数

ReactDOM.createRoot(document.getElementById('root10')).render(<ul>{['aaa', 'bbb'].map(val => <li key={val}>{val}</li>)}</ul>);

イベントハンドラ

JSX内で要素に属性としてイベントハンドラを記述する場合、以下の点に注意する。

キャメルケースでonClickのように記述しなければならない。
値には関数名だけを記述し()を記述してはならない。