以前チュートリアル程度は触ったことのあるReactでしたが、長らく離れていたので勉強し直すことにしました。

Udemyで購入したフロントエンドエンジニアのための React ・ Redux アプリケーション開発入門をやっています。

JSX記法は多分慣れれば書けそう。あくまでjsファイルにHTMLタグを書いてテンプレートを構築していく感じ。

ハマりポイント

HTMLに属性をわたすときに一瞬ハマりかけた。

わかりづらいけど、JSX内タグの属性に対して{}(Reactでの呼び方はマスタッシュ記法でいいのか・・・？)で処理を書く場合に、""で囲むとエラーになる。

↓の例ではonClick={hogehoge}と書くのが正。VueだとonClick="hogehoge"となるから混同しないように注意。

NG

render() {
  return <input type="text" onClick="{() => {console.log('changed!')}}" />
}

OK

render() {
  return <input type="text" onChange={() => {console.log('changed!')}} />
}

これからの抱負

これからReact/Redux -> Gatsby.js -> React Hooks の流れで、1日1時間程度勉強・Webページ＆アプリ作成をして行こうかなと。

Vue/Nuxtでの開発にも時間割きたいので並行して。

しかしReactのビルドめっちゃ速くないか？

チュートリアルレベルの複雑なことをしていないからかもしれんが...