Bluemo's Brain

Search

Search IconIcon to open search

React入門チュートリアル

Last updated Unknown Edit Source

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

    • 仮想DOM

      仮想DOM

      from 本物のDOMに中身が対応したVirtual DOMをjs objectとしてReactが持っている virutalな方を操作すると、その操作をうまいことReactが本物のDOMに反映してくれるって感じかな virtualなDOMはうまいことデーターと紐づけることができるので、データを操作しただけでDOMが勝手に変更されるようにできる その結果、UI更新のロジックとデータ関連のロジックを分離できるのも嬉しい...

      1/3/2023

    • コンポーネント指向

      コンポーネント指向

      from > コンポーネント指向は、HTML を自然に拡張する開発スタイルです。 html自体、UI上のオブジェクトとそれに対応するデータとかロジックがひとまとまりになっている とか ...

      1/3/2023

    • CodePen、テストに良いな

      • 使い方も説明されてる

    • ReactDOM

      ReactDOM

      ReactのDOM的なやつ、正式名称なんなんだろう? createElementというし、Elementか React Element? ...

      1/3/2023

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

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

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

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

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

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

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

    • JSXで と書く場合、

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

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

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

    • 要は子は親を知らないって事だな
      • 依存関係逆転の法則

        依存関係逆転の法則

        #iOSアプリ設計パターン入門 p40あたり モジュールの関係について 上位と下位のお互いがお互いのことを知っているのは最悪 これを病理学的結合という 上位は何も考えず、下位が合わせていくのが良い実装 ただ、上位から下位にアクセスしたいこともある この矛盾の解決のためには、 下位（使う側）が、になる もし上位（使われる側）が下位にアクセスしたければ、実体ではなくprotocolに合わせる 例:ドメイン層とデータベース管理層があったとする。(ドメインが上位) ドメイン層のプログラムは、データベースのことを気にしたくない ...

        1/3/2023

        （子が上位なので）
      • コンポーネント指向なのでそりゃこうなる
    • 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文を内包する即時関数なら良いのね
        • じゃあもう本当にオブジェクトそのものが{}の中に入ってるべきってことか
      • でもじゃあ三項演算子がセーフなのも分からんな
    • Eventって結局どうなってる?
    • 問題2
      • passwordのstateはpasswordコンポーネントに閉じ込めとくべきだったな
    • Clonedle - Wordleクローン

      Clonedle - Wordleクローン

      from クローン作る やりたい事 Firebaseとの連携 canvasとやら アニメーションっぽいこと を切り出す Reactらしくかきたいので ...

      1/3/2023

    • なぜjsでfunction文ではなくconstで関数を宣言している?

    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)} />

    Reactの開発環境

    Reactの開発環境

    の from あ〜、とは比較されるべき物なのね 確かにそうか、担ってる物同じだ 理解 静的サイトを事前にレンダリングしちゃおう系 ...

    1/3/2023

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

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

    • かなりわかりやすいチュートリアルだった覚えがある
    • （React学習

      React学習

      202202 再開 確か以前はReactの公式チュートリアルを走ったあたりで止まったはず をやってみよう /mrsekut-pを参照してみるのもおすすめです ReactとTypeScriptの学習メモが充実している 🙏 さくっとwebで動くものを作れる様になりたいなと 一応小五の時にをそれなりに触っていた ただまあ世界が完全に変わっているよう https://note.com/erukiti/n/n38495d44386a > 「持ってる全てのHTML/CSS/JSの知識と経験、常識をゼロリセットしろ。もっと分かりやすくいうとウェブ技術を全て例外なく忘れろ。そして公式ドキュメントを全部読んでしろ」 ...

      1/3/2023

      で知りました、ありがとうございます🙇‍♂️blu3mo.icon）
      • よかったですtakker.icon
      • そしてすでにおすすめしていたことを完全に忘れてた()

    Backlinks

    Interactive Graph

    React入門チュートリアル仮想DOMコンポーネント指向/CodePenReactDOM/JSX/宣言的/手続き型言語/宣言型言語依存関係逆転の法則Clonedle - Wordleクローン/jsでfunction文ではなくconstで関数を宣言Javascriptのthis/onClickMinecraftプラグイン開発useEffect()HooksReactの開発環境React RouterRedux/React+Firebase/React使う時のアーキテクチャiOSアプリ設計パターン入門/ステート管理React学習UserScriptでpreactを使う/依存protocolSOLID原則法の依存関係WordleTypescriptでReactGithub PagesReactで何か作る/MySQL/サーバー/クライアント/GitHub自然に進む実装作業Javascriptの非同期処理/関数コンポーネント/クラスコンポーネントReact/開発環境create-react-app/docusaurus/Laravel Mix/SPA/バケツリレー制約Flux弾性同期Youtubeプレイヤー/iOSアプリ設計パターン/javascript/アンラーンTypeScriptRuby On Rails/UserScript/環境構築/CodeSandBox2022／1~3の過ごし方21032x21041xReactとHaskellとゲーデルの不完全性定理を一緒に学ぶ~20220130~20220206~20220213