[B! TypeScript][react] micknのブックマーク

Next.js + TypeScript + Recoil + Herp社ESLint Config でReactチュートリアルを作る。

制作したもの概要 React のチュートリアルの三目並べを Next.js 12 + TypeScript + Recoil + @herp-inc/eslint-config の構成で、新しめの記述を取り入れた形に書き直してみた。（上記のリポジトリにすべてのコードを掲載した。）コンセプトは、 TypeScriptの型チェックと厳しめのESLintルールでバグが起きづらい形にし、スケールしても内部品質を担保。 Next.jsで作ることにより、ブラウザでのパフォーマンスと開発体験の向上である。改良したいポイント React のチュートリアルの三目並べ（マルバツゲーム）の公式サイトに掲載されている元のコードは以下である。この code に関して、以下のような課題が考えられる。 React の書き方が、現在では非推奨のクラスコンポーネントである。（関数コンポーネント + React

mickn 2022/01/07

リンク

TypeScript + React: Component patterns

This list is a collection of component patterns for React when working with TypeScript. See them as an extension to the TypeScript + React Guide that deals with overall concepts and types. This list has been heavily inspired by chantastic’s original React patterns list. Contrary to chantastic’s guide I use mainly modern-day React, so function components and – if necessary – hooks. I also focus exc

mickn 2020/08/06

リンク

React+Typescript+SWRでアプリをつくる - Qiita

mickn 2020/06/01

リンク

zeit製のswrがすごい - Qiita

react hooksの登場とある程度の枯れ具合を見せてきて、益々利用する機会が増えているReact。最近はreduxを採用する/しないで議論が白熱することが多くなってきていますが、今回はreduxを採用せずとも、ある程度のアプリケーションなら作れる選択肢の一つを紹介させていただきます。初投稿なので、読みづらかったらスンマセン。 zeit製のライブラリ swr 今回の主役はこのswr。 reactのSSRフレームワークであるnextjsやPaaSのNowなどのを開発・運用しているzeitから最近登場したライブラリです。このライブラリのREADMEの頭には、以下のように紹介されています。 SWR is a React Hooks library for remote data fetching. そう、つまり、data fetchをhooksベースで記述するためのライブラリです。どん

mickn 2020/06/01

リンク

TypeScriptでReactとBFFの間の通信にカタをつける | TECHSCORE BLOG | TECHSCORE BLOG

これは TECHSCORE Advent Calendar 2019 の１日目の記事です。 TL;DR TypeScript で React と BFF の間の通信に型をつけてみたよ。インターフェース定義は TypeScript で書いてるので、実装がそのままドキュメントになるよ。 React 側も BFF 側もきっちり型がつくので開発捗るよ。ここに実装置いたから見てね。はじめに最近半年ほど TypeScript ばっかり書いてます。TypeScript で React App 書いて、TypeScript で BFF 書いて、「嗚呼、型があるって幸せだな」って思ってました。でも唯一不満があります。React と BFF の間の通信。 fetchを使って書いてるんですが、 fetchで JSON 取ってくると戻り値は anyになっちゃうんですよね、当たり前ですけど。 const

mickn 2020/06/01

リンク

TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 | フューチャー技術ブログ

TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript（TypeScriptではなく） + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。たいてい、Reduxは導入コストが大きく、