React入門チュートリアル

使い方も説明されてる

JSXとかどういう仕組みで成り立ってるんだろう

Javascript文法ガン無視の記述をどういう仕組みで成り立たせてるんだろう

TypeScriptやCoffeeScriptとおなじ

transpileすると生のJSに戻る

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

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

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

入出力はcreateElementと同じような感じ

それをJSXがうまいこと繋いでくれる、と

JSXで <X> <Y /> </X> と書く場合、

Xのfunctionの中でchildrenプロパティを拾って返さないと、Yはrenderされない

React.Fragmentとか、HTMLに元からあるタグの仮想DOMとかには、これが元から実装されてる感じかな

まあ慣れでしかないんだろうけど、xmlとjavascriptが入り混じるのがすごい読みづらい

なんか名詞と動詞が入り混じってるみたいな?

とりあえず、

html風の何かはどこに書いても良い

html風の何かの中にjsを書く場合は{}

みたいな、htmlの方が強く効く(?)イメージをもつの大事そう

{}の中身は最終的にオブジェクトって意識大事だな

code:jsx

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の配列が生成されるんか、なるほど

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

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

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

結構危うい仕組みなんだなw

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

要は子は親を知らないって事だな

コンポーネント指向なのでそりゃこうなる

onChangeとかは、changeする前なのね

webで言うかは知らんけど、iosでいうwillXXXみたいな?

というかイベントをちゃんと処理しないとそのchangeが残りすらしないから、willですらないか

まあiOS（swiftUI以前）のdid/willイベントとは違う感じなんだろうな

なんでJSXの{}内でif文が使えない..?

expressionじゃ無いからダメらしい

でも、mapが許されて、React要素を返すif文が許されない理由がいまいちわからん

if文を内包する即時関数なら良いのね

じゃあもう本当にオブジェクトそのものが{}の中に入ってるべきってことか

でもじゃあ三項演算子がセーフなのも分からんな

condition ? expr1 : expr2

三項演算子は確実にexpr1か2のどっちかのexpressionを返すから、{}に突っ込めるってことか

「Expression」が何なのかの詳細説明欲しいな

Eventって結局どうなってる?

e.targetは共通なのか

event出したオブジェクトを返す

iOSでいうsenderか

問題2

passwordのstateはpasswordコンポーネントに閉じ込めとくべきだったな

なんだその仕様

さすがJavascript(?)

Swiftに慣れてると、やっぱ型が厳密じゃないの気持ちわり〜という気持ちになる

早くTypeScriptに移行したい

関数の引数が曖昧なまま関数を受け渡しできるのが一番気持ち悪い

あとEnumないの不便

code:jsx

// ❌ この書き方だと、関数を渡すのではなく実行してしまう

<Comp onSomething={doSomething(123)} />

// ✅ アロー関数でも OK

<Comp onSomething={() => doSomething(123)} />

// ✅ bind を使う

<Comp onSomething={doSomething.bind(null, 123)} />

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

その先

これ終わったら調べたい事

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

そしてすでにおすすめしていたことを完全に忘れてた()