点数
82点
感想
React.jsとNext.jsに関してはわかりやすかったが、ReduxとFirebaseはわかりづらかった。
Reactの入門書としてはまずまずだと思う。
基礎
Reactを動かす
<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のように記述しなければならない。
- 値には関数名だけを記述し()を記述してはならない。
コメント