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

点数

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

  1. npx create-react-app react_app
  2. cd react_app
  3. 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のように記述しなければならない。
  • 値には関数名だけを記述し()を記述してはならない。

【新しい記事】

【古い記事】

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です