React TypeScript CheatsheetsCheatsheets for experienced React developers getting started with TypeScript
React TypeScript Cheatsheets | React TypeScript Cheatsheets
React TypeScript CheatsheetsCheatsheets for experienced React developers getting started with TypeScript
React Hooksのメモ化のための第二引数の配列にオブジェクトを突っ込んだときの挙動について - ひと夏の技術
タイトルが長い。 useEffectとかuseMemoとかの第一引数に渡した関数を発火させるかどうかの条件指定とも言える第二引数の配列にオブジェクトをまるごと入れたらどうなるのか というはなし。 勘違いしそうなので最初に説明しておくと、 useMemo(()=> someFunction(), myObject) ではなくて useMemo(()=> someFunction(), [myObject]) です。配列の中にオブジェクトであって第二引数に直接オブジェクトではない。 なお当記事はReact16.8.1でのバージョン時点でのはなしです。 それで、タイトルのことをコードで書くとこう。当記事ではuseMemoを例にその実態を追う。 const myObj1 = { foo: "foo", bar: "bar", baz: { qux: 100, quux: { deepFoo: 'I
Incremental Static Regeneration で実現する次世代のサーバーアーキテクチャ
next.js 9.4 に Incremental Static Regeneration という実験的な新機能があります。 Blog - Next.js 9.4 | Next.js パッと見、「段階的な静的サイト生成…？なんのことだろう…」となったのですが、手元で試してみた感じ、これが既存のサーバーの実装アプローチを変える、革命的な機能ではないかと思いました。 解説を書きつつ、どのような応用があるか解説します。 next.js の Incremental SSG を試してみる リポジトリはここです。 mizchi/issg-playground 解説にあたっては、必要なのはほぼこのファイルだけで、短いのでそのまま貼ります。 // pages/[slug].tsx import { GetStaticProps, GetStaticPaths } from "next"; type Pro
MobX作者による、RecoilとMobXについての簡単なまとめ - console.lealog();
http://github.com/facebookexperimental/recoil 先日のReactEuropeで発表されたてホヤホヤの、ExperimentalなReact向けの状態管理ライブラリであるRecoil。 ただAPIとかやりたいことを見てると、「MobXファミリーとの違いってなんぞ・・？」って個人的になってました。 インターネットでも同じような印象を受けた人はいるらしく、なんやろな〜と思っていた矢先。 MobXの作者である `@mwestrate` 氏が、さくっとTweetしてるじゃありませんか！ なのでこの記事では、そのTweetを引用して、翻訳+ざっくりまとめをしておきます。 元Tweetはこちら #MobX or @recoiljs? Saw a lot of questions on whether they're the same, so a quick t
Facebook製の新しいステート管理ライブラリ「Recoil」を最速で理解する - uhyo/blog
昨日、Facebook製のReact用ステート管理ライブラリRecoilが発表されました。Facebook製といってもReact公式のステート管理ライブラリとかそういう位置付けではないようですが、それでも大きな注目を集めているのは間違いありません。 そこで、筆者がRecoilに対して思ったことや、筆者の視点から見たRecoilの特徴を記事にまとめました。 なお、この記事の執筆時点では副作用の扱いなどの点はいまいち情報が揃っていません。この記事では速報性を重視し、コアのステート管理部分に絞って考えています。また、まだexperimentalなライブラリなので、今後この記事の内容からRecoilのAPIが変化したとしても悪しからずご了承ください。 この記事を書くときに筆者が色々試していたCodeSandboxはこちらです。 https://codesandbox.io/s/recoil-san
GitHub - streamich/react-use: React Hooks — future of React 👍 react-use
Sensors useBattery — tracks device battery state. useGeolocation — tracks geo location state of user's device. useHover and useHoverDirty — tracks mouse hover state of some element. useHash — tracks location hash value. useIdle — tracks whether user is being inactive. useIntersection — tracks an HTML element's intersection. useKey, useKeyPress, useKeyboardJs, and useKeyPressEvent — track keys. use
Shared Hook State with SWR
Shared Hook State with SWRMay 09, 2020SWR is a React hook for data fetching that features a cache for requests. This is generally used to share the response from API calls and deduplicate requests, but SWR is flexible enough to support another use case: shared hook state. 1 Let's look at an example of a useUsername hook: const useUsername = () => { return useState('') } const UsernameInput = () =>
Next.js 9.4 Fast RefreshとIncremental Static Regeneration等のアップデート - Qiita
Next.js 9.4 Fast RefreshとIncremental Static Regeneration等のアップデートJavaScriptReactNext.js Hot ReloadがReact Refreshを用いたFast Refreshに置き換えられました。 これで編集したファイル内のコードのみが更新され、コンポーネントの状態を失うことなく再レンダリングを行ってくれます。 これに伴いエラーのオーバーレイも再設計され、ページ上ですぐにエラーを確認できるようになっています。 Incremental Static Regeneration (beta) 段階的な静的ページ再生成がサポートされました。 Next.js 9.3でサポートされたStatic Generationでは、ビルド時に生成したページでなくてもfallback: trueオプションを利用することで実行時に新しい
Next.js 9.4
We are excited today to introduce Next.js 9.4, featuring: Fast Refresh: fast and reliable live-editing experience, as proven at Facebook scale Incremental Static Regeneration (beta): re-build static pages after you've deployed, in milliseconds CMS Examples: examples for Contentful, DatoCMS, Prismic, Sanity, and TakeShape using our new next-gen static site generation New Environment Variables Suppo
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 | フューチャー技術ブログ
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript（TypeScriptではなく） + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。 本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。 たいてい、Reduxは導入コストが大きく、
React Hooks for Data Fetching – SWR
import useSWR from 'swr' function Profile() { const { data, error, isLoading } = useSWR('/api/user', fetcher) if (error) return <div>failed to load</div> if (isLoading) return <div>loading...</div> return <div>hello {data.name}!</div> } In this example, the useSWR hook accepts a key string and a fetcher function. key is a unique identifier of the data (normally the API URL) and will be passed to f
React Next アプリを GitHub Actions で GitHub Pages にデプロイ - Qiita
React.js で作成したアプリケーション、とりわけ今回は Next.js で始めたプロジェクトを例に GitHub Actions を使って GitHub Pages へのデプロイを自動化する方法を紹介します。 Vue, Nuxt についての記事もあります。 Vue Nuxt アプリを GitHub Actions で GitHub Pages にデプロイ - Qiita Create Next App Documentation - Getting Started | Next.js 上記を参考に Next のプロジェクトを作成してください。この記事作成時の Next バージョンは 9.0.5 です。 GitHub Actions の設定 peaceiris/actions-gh-pages: GitHub Actions for deploying to GitHub Pages
TypeScript wayでReactを書く - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? TypeScriptはJavaScriptに静的型による型チェックを加えた言語で、Microsoftによって開発されています。TypeScriptの登場以降その人気上昇は留まるところを知らず、Webアプリの開発に採用される例も増えているようです。TypeScriptはJavaScriptと同じ構文・言語機能を持ち、唯一の違いは型がある点、つまり型が書けて型チェックがあるというところです1。 また、ReactはJavaScript向けのUIライブラリで、HTML要素やコンポーネントを第1級オブジェクトとして扱いUIを構築するスタイルが特徴
Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理 - Qiita
Concurrent Modeは、現在（2020年3月）実験的機能として公開されているReactの新しいバージョンです。Reactの次のメジャーバージョン（17.x）で正式リリースされるのではないかと思っていますが、確証はありません。なお、React公式からもすでに結構詳細なドキュメントが出ています。 並列モードの導入（実験的機能） Concurrent Modeに適応したアプリケーションを作るためには、従来とは異なる新しい設計が必要となります。筆者はConcurrent Modeを使ったアプリケーションをひとつ試作してみました。この記事から始まる「Concurrent Mode時代のReact設計論」シリーズでは、ここから得た知見を共有しつつ、Concurrent Mode時代に適応したReactアプリケーションの設計を提案します。 なお、Concurrent Modeはまだ正式リリース
Next.js 9.3新API getStaticProps と getStaticPaths と getServerSideProps の概要解説 - Qiita
Next.js 9.3新API getStaticProps と getStaticPaths と getServerSideProps の概要解説Reactserver-side-renderingNext.jsJAMstackVercel はじめに この記事ではNext.jsにvesrion 9.3から導入された以下の3つのAPIについて解説します。 getStaticProps getStaticPaths getServerSideProps こちらのissueで議論されてきた機能です。 Static Generation / SSG Improvements · Issue #9524 · zeit/next.js GitHub追っているとGS(S)P methodsと略されているのを見ます。 Next.jsが未経験の方でもReactとSSR(Server Side Render
React Hooks Testing
この記事は「DMMグループ Advent Calendar 2019」21日目の記事です。 フロントエンドエンジニアは数年前に比べ、技術の幅が広がったことにより担当するべき作業も増えてきています。 テストもその中の一つです。フロントエンドのテストは実装に対するユニットテストだけでなく、コンポーネントのユニットテスト、e2eテスト、Visual Regression Testと考えることが多くあります。 その中で以前書いた「Hooks時代のユニットテスト」というReact Hooksのテストに関する記事が結構反響があり、数ヶ月テストを運用してみて、個人的なReact Hooksにおけるユニットテストをどうすべきかを考えたので、Testing Library・Jestを使う方法で紹介します。 TypeScriptがデファクトになりつつあるので、今回はTypeScriptで書いてるよ！ Reac
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - facebookexperimental/Recoil: Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.
Notyf: A minimalist JavaScript library for toast notifications.
GitHub - alewin/useWorker: ⚛️ useWorker() - A React Hook for Blocking-Free Background Tasks
Visual testing & review for web user interfaces
