Open2023/04/08にコメント追加3

react.devよみよみ会

React

cryptobox

https://react.dev/

公開されたので読んでいく。
なるべく原文で読むけど英語よわよわ民なので間違いが多いかもしれない。

cryptobox

Your First Component

Components: UI building blocks

Reactでmarkup,css,JavaScriptで構築された再利用性の高いUIを構築できるよ。これをcomponentと呼ぶよ、的なことが書いてある。まあ流石に知っとることやな。

Defining a component

Componentとはユーザーがmarkupにより書き散らすことができるJavaScriptの関数であると言い切ってる。どういうこと？

これがその1例らしい。

export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3Am.jpg"
      alt="Katherine Johnson"
    />
  )
}

コンポーネントの作り方を教えたるわ！とつづく

Step 1: Export the component

とりまexport defaultでコンポーネントを他のファイルから呼び出せるようにエクスポートせよとのこと。まあexportしないとコンポーネントとして利用できないから当たり前だよね。

Step 2: Define the functio

function Profile() { }こんな感じにJavaScript関数を定義しましょう。

Step 3: Add markup

んでreturnで<img />タグを返すよ。

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

HTMLっぽいよね？残念、JavaScriptです！もっというとJSXって言います、とのこと。
ドヤ顔でなんか言っとるな。

マークアップが複数行に渡る場合はreturnするとき()で囲ってね。()ないとreturn以降のマークアップ無視するから的なこと言ってます。

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

Using a component

そんでキミは今Profileコンポーネントを定義できたワケだ。さらにこのコンポーネントはnestさせて別のコンポーネントとして定義できる。

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

What the browser sees

↑で定義したコンポーネントはブラウザからはこう見えるよ

<section>
  <h1>Amazing scientists</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

Nesting and organizing components

このときProfileコンポーネントにとってGalleryコンポーネントは親コンポーネントとなり、GalleryコンポーネントにとってProfileコンポーネントは子コンポーネントとなるよ。一回コンポーネント定義したらいろんなことろで使い回せて便利だね、といってます。

でもこんなふうに関数をnestさせることはかんべんな、バグの原因になるしめっちゃ遅くなるから。とのこと。え、これエラーにならんの？

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() {
  // ...
}

やばいな、こんな丁寧に読んでたら飽きて読み終わらんかも。わかりきってる所は飛ばしてもいいかもな

cryptobox

このページでは既存のアプリにReactを導入していく方法が紹介されている。
要約すると以下のようなことが書いてある

新規ページからReactに代替していこう
１つのファイルにすべての処理を書こうとせず、コンポーネント単位で別々のファイルに分けて記述しそれらを組み合わせてページを作ろう
ボタンみたいな小さいコンポーネントから少しずつReact化していって最終的にフルページをReactで記述するようにしよう
frameworkを使ったほうがReactの恩恵を最大限に受けられるのでおすすめ
babelとかwebpack導入していないプロジェクトならvite入れるのおすすめ

framework推奨の是非

react公式はreact単体ではなくNext.jsのようなフレームワークと一緒に使うことを推奨しているらしい

Reactの改善を続けていくにはフレームワークとの密接な連携が必要と考えていて、それはユーザーがより良いアプリを作るための絶好の機会だとReact開発チームは捉えているっぽい。なんで？

フレームワークはReact公式が推しているRSCとかをより使いやすく実装してくれるからか？あとは最初からフレームワーク使っとけばSSRとかSSGとか実装しやすいから？
Next.jsだとvite使えないからあんまりフレームワーク使うモチベ上がらんのだよな。