React学習

Last updated Unknown Edit Source

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

    React入門チュートリアル

    React入門チュートリアル (1) Reactとは何か | Hypertext Candy 、テストに良いな 使い方も説明されてる もも普通にjavascriptファイルとしてインポートできるのね JSXとかどういう仕組みで成り立ってるんだろう ...

    1/3/2023

    をやってみよう

/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

  React

  ...

  1/3/2023

  とTypeScript

  TypeScript

  TypeScript Deep Dive 日本語版 - TypeScript Deep Dive 日本語版 詳しい でも翻訳が読みづらいところもあるな 英語ver読むか TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえておきたいこと〜 これ良いな、適度な情報量 基本的な事 let/const ...

  1/3/2023

  をとりあえず学ぶかな (20210325)
  • バックエンドは後で考える、Ruby On Rails

    Ruby On Rails

    学ぶ過程のメモ .erb, .scss, .coffeeとかは、そのファイルをプロセスするための拡張子 hoo.html.erb.coffeeみたいなのがあれば、coffeeで処理されて、erbで処理されて、hoo.htmlが出来上がる Controllerには複数形(UsersController)、Modelには単数系(User) RESTは、Railsでは自動的に対応するアクション(GET->showなど)に変換される routes.rbにresources :usersってやると、/usersがRESTに対応する DB周りについて Model.update_attributeは、検証を回避できる ...

    1/3/2023

    を一応それなりに知っているはずだけど使うか迷う

• 本当にただただReact

  React

  ...

  1/3/2023

  でアプリを作るなら、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入門チュートリアル (1) Reactとは何か | Hypertext Candy 、テストに良いな 使い方も説明されてる もも普通にjavascriptファイルとしてインポートできるのね JSXとかどういう仕組みで成り立ってるんだろう ...

      1/3/2023

  • 最近Reactを始めた人向けのReact Hooks入門もよい
    • 他のページも参考になる

• 適当なメモ

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

      仮想DOM

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

      1/3/2023

      を作った上で比較して必要なところだけ更新するからReactは価値がある
    • ということかな