最近 TypeScript や React 、 Next.js といったフロントエンド技術に触れていなかったが、研究室でフロントエンド勉強会を開くことになったので、最新情報をキャッチアップしながら、初心者向けに正確な情報をまとめていくためのスクラップ記事

Hoshi

React の公式ドキュメント

まずは React の公式ドキュメントを読んでいく。

https://react.dev

以前までお世話になっていた公式ドキュメントは、もうメンテナンスされていないらしい。

https://legacy.reactjs.org/

Hoshi

Your First Component

Component とは何たるかについての説明。「Pitfall」としてドキュメントに躓きやすい箇所を明示してくれているのありがたい。

React はマークアップと CSS と JavaScript を "components" として結合します。これによりアプリ内の UI 要素を再利用可能にすることができます。

(Pitfall) React のコンポーネントは普通の JavaScript の関数ですが、関数名は大文字で始める必要があります。

(Pitfall) return のあとに ( ) をつけずに改行すると、それ以降は無視されます。

// ✅ it works
return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

// ✅ it also works
return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

// 🔴 doesn't work!
return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

(Pitfall) レンダリングが非常に遅くなり、またバグの原因にもなるため、コンポーネントの定義をコンポーネント内に含めないでください。すべてのコンポーネントはトップレベルに定義してください。

export default function Gallery() {
  // 🔴 Never define a component inside another component!
  function Profile() {
    // ...
  }
  // ...
}

export default function Gallery() {
  // ...
}

// ✅ Declare components at the top level
function Profile() {
  // ...
}

Hoshi

Importing and Exporting Components

公式でも default export と named export のどちらを使うべきという指針はないが、export default () => {} のように無名関数をエクスポートするなどはデバッグが難しくなるので止めてほしいとのこと。常に意味のある命名を心がける。

Syntax	Export Statement	Import Statement
Default	`export default function Button() {}`	`import Button from './Button.js';`
Named	`export function Button() {}`	`import { Button } from './Button.js';`

Hoshi

Writing Markup with JSX

JSX のルール

単一の要素を return する（一番外に余計な要素を追加する必要がない場合は Fragment <></> をつける）
すべてのタグを閉じる（<img> ではなく <img />、<li>orange ではなく <li>orange</li>）
属性名には（ほとんどの場合）キャメルケースを使用する（stroke-width ではなく strokeWidth、 class や for は予約語なので、それぞれ className と htmlFor とする）

歴史的な理由から、 aria-* と data-* 属性は、HTML と同じようにハイフン区切りで記載する。

参考:

Hoshi

JavaScript in JSX with Curly Braces

JSX の内部で JavaScript の情報を使いたい場合は「波括弧 {}」を使用する。
JSX で波括弧を使う方法は以下の2種類のみ。

テキストとして（JSXタグの内部に直接記述する。例: <h1>{name}'s To Do List</h1>）
属性の値として（タグの属性の=のあとに記述する。例: <img src={avatar}>）

Object を使いたい場合は波括弧を二重にする。

    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}/>

(落とし穴) インラインの style プロパティはキャメルケースとなっていることに注意する。

Hoshi

Passing Props to a Component

props は JSX タグに渡す情報のことです。たとえば <img> タグに渡せる props として、className、 src、alt などがあります

destructuring 記法での書き方

function Avatar({ person, size }) {
  // ...
}

以下の書き方と同じ

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

props にはデフォルト値を含められる。
全部渡したいときは spread syntax も使える <Avatar {...props}>
JSX 自体を渡したい場合に children
props 自体は immutable (=unchangeable)なので、コンポーネント内では変更せずに、常に親から新しい props を渡す