React学習

Last updated Unknown Edit Source

• 202202 再開
  • 確か以前はReactの公式チュートリアルを走ったあたりで止まったはず
  • React入門チュートリアルをやってみよう

/mrsekut-pを参照してみるのもおすすめです

• ReactとTypeScriptの学習メモが充実している
• 🙏

• さくっとwebで動くものを作れる様になりたいなと

• 一応小五の時にjavascriptをそれなりに触っていた

• ただまあ世界が完全に変わっているよう

  • https://note.com/erukiti/n/n38495d44386a

  • 「持ってる全てのHTML/CSS/JSの知識と経験、常識をゼロリセットしろ。もっと分かりやすくいうとウェブ技術を全て例外なく忘れろ。そして公式ドキュメントを全部読んでアンラーンしろ」

  • 実際にその頃のJavaScript（つまりES5以前）を触ったことがある人は何かしらJavaScriptには不満があったでしょう。RubyやScalaやGoといった他の言語よりも、明確に劣る言語だと認識していたでしょう。それは何も間違っていません。

  • https://note.com/erukiti/n/n38495d44386a

  • ウェブフロントエンドは元々DOMを直接操作したり、おもちゃのようなスクリプトをやっていればそれで良いだけの世界でしたが、すでにそのような時代ではありません。石器時代とは異なり、仮想DOMなどといった抽象化が導入されました。

• ReactとTypeScriptをとりあえず学ぶかな (20210325)

  • バックエンドは後で考える、Ruby On Railsを一応それなりに知っているはずだけど使うか迷う

• 本当にただただReactでアプリを作るなら、UserScript上で作ることを強くおすすめします

  • 1から全部作ろうとすると、本質とは関係ないところでつまずいてわけが解らなくなる
    • Reactを使ってアプリを作りたいだけだったのに、なぜか環境構築で時間を溶かされる
      • npm/yarnの使い方を学んで
      • package.jsonの書き方を学んで
      • webpackの設定方法を学んで
      • editorのeslintとpretterの設定をやって
      • ここまでやってようやく開発し始められる
      • 一つ一つのステップで絶対設定ミスをおこすので、そのたびに原因をしらみつぶしていく必要がある
  • UserScript上なら、コピペするだけでも動く
    • 例えば、
      • [/programming-notes/Preactを使ったScrapbox UserScriptのDemo (TODO app)#609648cc1280f000004c75b7]( https://scrapbox.io/programming-notes/Preactを使ったScrapbox UserScriptのDemo (TODO app)#609648cc1280f000004c75b7)
      • /pokutuna/プレゼンタイマー
    • を適当なページにコピペしたあと、それを自分のページでimportすればすぐ使える
    • dynamic import構文で開発コンソールに書き込んでも実行できる
    • 中身を書き換えればすぐに自作appを作り始められる
      • Preactのlibraryを外部projectからimportしたくない場合は、それらを自分のページにコピペすればいい
        • file sizeが小さいので簡単にコピペできる
  • アプリの基礎を実装しなくていいのも利点
    • サイトのUIやテキストエディタが用意されている
    • あとはそれに乗っかって自分が欲しい機能を実装するだけ
  • 限界もある
    • Third Party libraryを使うのに工夫がいる
    • linterもformatterもない
      • F5で再読み込みを繰り返して、エラーがなくなるまでやる
      • あとは開発ツールのdebuggerでdebugしまくる
    • TypeScriptで書けない
      • 脳内で型推論するしかない

• 0からアプリを作ってもいいなら、CodeSandBoxがおすすめ

  • 環境構築が不要
  • TypeScriptで書ける
  • Third Party packageを何でも使える
  • 編集するたびに勝手にアプリをbuildし直してくれる
  • GitHubと連携できる
  • Vercelにワンクリックでデプロイできる

• iOSエンジニアとしての最短ルートを通りたいなと

  • iOSエンジニアがWebフロントエンドエンジニア(仮)になった話

• これよさそう

  • Reactチュートリアル1：犬画像ギャラリーを作ろう
  • /takker/React入門チュートリアルも良さげだった
    • 🙏🙏
    • React入門チュートリアル
  • 最近Reactを始めた人向けのReact Hooks入門もよい
    • 他のページも参考になる

• 適当なメモ

  • props と state があって、propsはJSX記法でと書いたやつを指す
    • <tag value1={xxx} value2={yyy}>...</tag>の<...>の中に書いた属性のことです
      • <...>自体はただのHTMLタグ
  • stateに指定(setState)したものは、更新されるとrenderが呼ばれる
    • 実際に全部renderし直すのではなく、仮想DOMを作った上で比較して必要なところだけ更新するからReactは価値がある
    • ということかな