React入門チュートリアル

Last updated Unknown Edit Source

React入門チュートリアル (1) Reactとは何か | Hypertext Candy

• 仮想DOM

• コンポーネント指向

• CodePen、テストに良いな

  • 使い方も説明されてる

• ReactDOMもJSXも普通にjavascriptファイルとしてインポートできるのね

  • JSXとかどういう仕組みで成り立ってるんだろう
    • Javascript文法ガン無視の記述をどういう仕組みで成り立たせてるんだろう
  • JSXという文法で成り立ってると考えればおｋだと思う
    • TypeScriptやCoffeeScriptとおなじ
    • transpileすると生のJSに戻る
      • <div>...</div>がReact.createElement("div", null, ...)みたいなのになる
    • なるほど

• JSXでループとか書いて複数生成する場合は、各要素の独自性を示すためのkeyが必要

  • 処理最適化のためにあった方が良いぞ、と

• Reactコンポーネントは、React要素を返す関数として作る

  • 入出力はcreateElementと同じような感じ
  • それをJSXがうまいこと繋いでくれる、と

• Reactを使わないDOM操作より宣言的にかけるのが嬉しいポイント

• JSXで と書く場合、

  • Xのfunctionの中でchildrenプロパティを拾って返さないと、Yはrenderされない
    • なるほど
  • React.Fragmentとか、HTMLに元からあるタグの仮想DOMとかには、これが元から実装されてる感じかな

• 今のところの感想として、JSX気持ち悪〜〜という気持ち

  • まあ慣れでしかないんだろうけど、xmlとjavascriptが入り混じるのがすごい読みづらい
  • なんか名詞と動詞が入り混じってるみたいな?
    • 手続き型言語と宣言型言語が入り混じってるってことかな
  • とりあえず、
    • html風の何かはどこに書いても良い
    • html風の何かの中にjsを書く場合は{}
    • みたいな、htmlの方が強く効く(?)イメージをもつの大事そう
  • {}の中身は最終的にオブジェクトって意識大事だな
    • \text${object}text``の亜種だと考えるとしっくり来るかもしれない
      • これも{}の中が常に(object|premitive)

jsx

1
2
3
4
5
6
7
8
9

const element = (
  <ul>
    {members.map(member => (
      <li key={member.name}>
        {member.name} plays {member.instrument}
      </li>
    ))}
  </ul>
);

• いまいちこれがわからん
  • mapでmembersの各要素についてcreateElement(“li”, ~~)をしてるけど、それがどうulのchildになる?
    • mapだからchildの配列が生成されるんか、なるほど

React入門チュートリアル (3) 属性と状態 | Hypertext Candy

• classではなくclassNameなのは、classがjsの予約後だから

• 本質的には、フックが実行される回数は、レンダリングごとに同一でなければならないということです。

• なぜなら、React は内部で、呼び出し順によって state の値を管理しているからです。

  • 結構危うい仕組みなんだなw
  • まあ結局のところ、魔法とか別レイヤーのシステムじゃなくてjavascriptの関数でしかないからまあそうなるか

React入門チュートリアル (4) フォームとイベントハンドリング | Hypertext Candy

• 要は子は親を知らないって事だな
  • 依存関係逆転の法則（子が上位なので）
  • コンポーネント指向なのでそりゃこうなる
• onChangeとかは、changeする前なのね
  • webで言うかは知らんけど、iosでいうwillXXXみたいな?
  • というかイベントをちゃんと処理しないとそのchangeが残りすらしないから、willですらないか
  • まあiOS（swiftUI以前）のdid/willイベントとは違う感じなんだろうな
• なんでJSXの{}内でif文が使えない..?
  • https://reactjs.org/docs/jsx-in-depth.html#props-in-jsx
    • expressionじゃ無いからダメらしい
  • でも、mapが許されて、React要素を返すif文が許されない理由がいまいちわからん
    • if文を内包する即時関数なら良いのね
    • じゃあもう本当にオブジェクトそのものが{}の中に入ってるべきってことか
  • でもじゃあ三項演算子がセーフなのも分からんな
    • https://qiita.com/smicle/items/7d3b9881834dc0142fb7

      • condition ? expr1 : expr2

      • 三項演算子は確実にexpr1か2のどっちかのexpressionを返すから、{}に突っ込めるってことか
      • 「Expression」が何なのかの詳細説明欲しいな
• Eventって結局どうなってる?
  • Event - Web APIs | MDN 抽象的なプロトコルがあるのね
    • e.targetは共通なのか
      • event出したオブジェクトを返す
      • iOSでいうsenderか
    • FormDataEvent - Web APIs | MDN
• 問題2
  • passwordのstateはpasswordコンポーネントに閉じ込めとくべきだったな
• Clonedle - Wordleクローン
• なぜjsでfunction文ではなくconstで関数を宣言している?
  • 【JavaScript】varとfunction"文"は使わずにletとconstを使って欲しい（切実） - Qiita
  • なんだその仕様
  • さすがJavascript(?)

React入門チュートリアル (5) ToDoアプリを作ってみよう | Hypertext Candy

• Swiftに慣れてると、やっぱ型が厳密じゃないの気持ちわり〜という気持ちになる
  • 早くTypeScriptに移行したい
  • 関数の引数が曖昧なまま関数を受け渡しできるのが一番気持ち悪い
• あとEnumないの不便 jsx

1
2
3
4
5
6

// ❌ この書き方だと、関数を渡すのではなく実行してしまう
<Comp onSomething={doSomething(123)} />
// ✅ アロー関数でも OK
<Comp onSomething={() => doSomething(123)} />
// ✅ bind を使う
<Comp onSomething={doSomething.bind(null, 123)} />

• なるほど〜

• Javascriptのthis

• のonClickでe.preventDefault()すると、hrefに飛ぶのを止められる

  • Minecraftプラグイン開発を思い出すな

• useEffect()

• Hooks

Reactの開発環境

本連載は「入門」チュートリアルと銘打ちましたが、基礎の理解が何よりも重要です。実際、React ライブラリそのものに関しては、さらに学ぶべき内容はほとんどありません。本文でも触れましたが、Router や Redux などの周辺技術の知識や、何よりも、JavaScript の言語仕様への理解があれば、本格的な開発を始めることができるでしょう。

• お〜〜

• その先

  • from React入門チュートリアル (8) Reactプロジェクトを始める方法 | Hypertext Candy
    • React Router
    • Redux
  • これ終わったら調べたい事
    • React+Firebase
    • React使う時のアーキテクチャ
      • iOSアプリ設計パターン入門のweb版みたいなのがあれば読みたいな
      • コンポーネント指向の時のアーキテクチャ、あんまりまだイメージが掴めてないので
      • ステート管理方法と呼ばれているみたい
    • これからReactを学んでいくためのロードマップ

自分がReact学んだときとおんなじやつだ

• かなりわかりやすいチュートリアルだった覚えがある
• （React学習で知りました、ありがとうございます🙇‍♂️）
  • よかったです
  • そしてすでにおすすめしていたことを完全に忘れてた()