このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。
Suspense Fetchを3年実用してみて - Encraft#4
このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。
Magicを使ったマジックリンクログインをReactでの素振りサンプルと感想
Magicというマジックリング認証に特化したサービスを知ったので素振りしてみた記録。 サーバーサイドまで含め入ったサンプルは公式のチュートリアルにある https://magic.link/guides 逆にSPAのようなクライアントログインの最低限パターンのサンプルが見当たらなかったので、素振りを書いてみた サンプル import { Magic } from 'magic-sdk' import { useState, useEffect } from 'react' // Dashboardに表示されたpublishable keyを持ってくる。これは公開してよいキー const MAGIC_LINK_PUBLIC = "pk_test_****************" // hooksに処理をまとめる const useMagicLogin = () => { const [is
GitHub - clauderic/dnd-kit: The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
Feature packed: customizable collision detection algorithms, multiple activators, draggable overlay, drag handles, auto-scrolling, constraints, and so much more. Built for React: exposes hooks such as useDraggable and useDroppable. and won't force you to re-architect your app or create additional wrapper DOM nodes. Supports a wide range of use cases: lists, grids, multiple containers, nested conte
Next.js の状態管理 2020
Next.js といえば、SSG（JAMstack）が最近は特に話題ですね。1年前まではgetInitialPropsを用いて、どう SSR するのかという事が話題の中心でした。Next.js 9.3 以降、SSR をする際にはgetInitialPropsではなくgetServerSidePropsを使用することを推奨すると記載されています。（そして、getInitialPropsを使用することで自動最適化が無効となってしまう旨も）getStaticPropsやgetServerSidePropsを利用することで、私たちは SSG・SSR をページ単位で切り替えることができます。 「SSG・SSR」が共存する可能性がある場合、SSR にはgetServerSidePropsを利用することになります。この変化による影響範囲は多大で、状態管理とデータフェッチについて、再考する必要がでてきまし
【2019年版】バックエンドエンジニアが React でモダンなフロントエンド開発を始めるまで - Feedforce Developer Blog
id:daido1976 です。入社してからあっという間に1年が経っていました。 直近3ヶ月ほどプライベートでフロントエンド開発の勉強をしていたのですが、ここ数年で CSS の Grid や React の Hooks が新しく導入されたことなどもあり、少し古いコンテンツだと教材として役立たない1 と感じることが多かったので、本記事では私が実際にやってみた中で 2019年時点で オススメできると判断した教材や学び方を皆さんにご紹介したいと思います。 はじめに やったこと JavaScript MDN の JavaScript の部分を読む & 手を動かす JavaScript Primer を読む YouTube 動画で Promise を学ぶ デバッグ方法を学ぶ React React 公式のチュートリアルを2周する egghead.io の動画で Redux を学ぶ ヘルシンキ大学の
Using React Fragments for the first time - Jack Franklin
December 18, 2017Using React Fragments for the first timeReact v16 was a very exciting release for React, and included many new features. In the recent React 16.2 release, improved support for Fragments was announced, and it's this feature that I want to talk about today. The problem that fragments solveUp until React 16 each component had to return a single element: // will error class Demo exten
React v16 changes
Reactのv16がリリースされたので、変更点などを整理したいと思います。 https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html https://code.facebook.com/posts/1716776591680069/react-16-a-look-inside-an-api-compatible-rewrite-of-our-frontend-ui-library/ React v16やReact Fiberについては、下記で書いたりもしているのでそちらも参考にしてみてください。 React Fiber現状確認 Capability of React Fiber React v16 and beyond React Fiber ReactはなぜFiberで書き直されたのか？Reactの課題と将来像を探
React + RxJSで始める状態管理 - CARTA TECH BLOG
こんにちは、fluctの@nekoyaです。 今日は現在開発に携わっている、俗に言う「管理画面」のWebアプリケーションのアーキテクチャをご紹介します。 このアプリケーションはReactとRxJSを軸として作られており、コードはTypeScriptを使って書いています。 アプリケーションを流れるデータと状態の管理について、Write StackとRead Stackという考え方を取り入れたところ、いろいろなメリットが得られたので、そのあたりを軸に掘り下げてみます。 全体の大まかな構成 各Stackの前に、まずはアプリケーション全体の構成をざっくりと見ておきます。 流れとしては、DispatcherからWrite Stack, Read Stackを通ってStateが生成され、それをViewが受け取るという構成になっています。 全体の流れとしてはFluxっぽい何かのひとつのあり方なのですが、
React/Reduxの設計に関する参考記事まとめ - dackdive's blog
最近悩んでいる React/Redux でそれなりの規模のアプリケーションを作るための良い設計について、 日頃ネットで気になる記事を漁っていたんだけど、積読がたまってきた＆Twitter やら Pocket やら Qiita に散らばってしまったのでここらで一旦整理します。 （★ はその中でも特に読みたいもの） Redux の設計 ★ React Redux Real World Examples 〜先人から学ぶReact Reduxの知恵〜 実際に GitHub にあるソースコードを読んで得られた知見について。 「Storeはどんな具合に構成すべきか」「Store初期化(hydration)用データの定義はどうすべきか」「Componentはどう整理すべきか」と目次だけ見ても非常に実用的な内容。 ★ erikras/ducks-modular-redux: A proposal for
ReactとReduxを結ぶパッケージ「react-redux」についてconnectの実装パターンを試す - Qiita
Redux Advent Calendar 2016 23日目 初めてAdvent Calendarに参加させていただきます。 当初はReduxとcreate-react-appを使って、サクッと素振りできる環境構築手順をまとめようと思ったのですが、ここ最近で自分が一番悩んだ「react-redux」についてReduxを始める方へ同じドツボにはまらないようにという願いを込めて投稿させていただきました。 react-reduxとは？ react-redux公式より引用 Official React bindings for Redux. Performant and flexible. React公式のReactとReduxをバインディングするライブラリ パフォーマンスと柔軟性があります ここで出て来る「柔軟性(flexible)」というのがこのライブラリが初見殺しと言われる所以となっており
React Router v4(next) が alphaからbetaになってぼちぼち変わってたので追従する - Qiita
🎉🎉 React Router v4 beta! 🎉🎉 Docs: https://t.co/xEsQD8H38v Code: https://t.co/VULptzNaQs Try it: npm i react-router@next We 😍 @reactnative! — MICHAEL JACKSON (@mjackson) 2017年1月30日 ということでreact-router@v4がalphaからbetaになった。 かなりアグレッシブに変更されていて色々変える所あったのでメモ 1 2 packageの分離 react-routerは下記の3パッケージに分離した react-router コア部分。 react-routerの利用者がこのパッケージをインストールする機会は無いかもしれない。 このパッケージに含まれるもの <Router> (多分直で使う事はないロー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - petyosi/react-virtuoso: The most powerful virtual list component for React
GitHub - wtetsu/mouse-dictionary: 📘Super fast browser dictionary
GitHub - pedronauck/react-adopt: :sunglasses: Compose render props components like a pro
GitHub - pqina/react-filepond: 🔌 A handy FilePond adapter component for React
GitHub - supasate/connected-react-router: A Redux binding for React Router v4
GitHub - airbnb/visx: 🐯 visx | visualization components
Inferno
GitHub - gaearon/react-transform-hmr: A React Transform that enables hot reloading React classes using Hot Module Replacement API
GitHub - airbnb/rheostat: Rheostat is a www, mobile, and accessible slider component built with React
