このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。
このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。
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
Framework agnostic core: The architecture is built in layers — a framework-agnostic core (@dnd-kit/abstract), a DOM implementation (@dnd-kit/dom), and thin adapters for your framework of choice. Supports a wide range of use cases: lists, grids, multiple containers, nested contexts, variable sized items, virtualized lists, 2D games, and more. Built-in support for multiple input methods: Pointer, mo
Next.js といえば、SSG（JAMstack）が最近は特に話題ですね。1年前まではgetInitialPropsを用いて、どう SSR するのかという事が話題の中心でした。Next.js 9.3 以降、SSR をする際にはgetInitialPropsではなくgetServerSidePropsを使用することを推奨すると記載されています。（そして、getInitialPropsを使用することで自動最適化が無効となってしまう旨も）getStaticPropsやgetServerSidePropsを利用することで、私たちは SSG・SSR をページ単位で切り替えることができます。 「SSG・SSR」が共存する可能性がある場合、SSR にはgetServerSidePropsを利用することになります。この変化による影響範囲は多大で、状態管理とデータフェッチについて、再考する必要がでてきまし
id:daido1976 です。入社してからあっという間に1年が経っていました。 直近3ヶ月ほどプライベートでフロントエンド開発の勉強をしていたのですが、ここ数年で CSS の Grid や React の Hooks が新しく導入されたことなどもあり、少し古いコンテンツだと教材として役立たない1 と感じることが多かったので、本記事では私が実際にやってみた中で 2019年時点で オススメできると判断した教材や学び方を皆さんにご紹介したいと思います。 はじめに やったこと JavaScript MDN の JavaScript の部分を読む & 手を動かす JavaScript Primer を読む YouTube 動画で Promise を学ぶ デバッグ方法を学ぶ React React 公式のチュートリアルを2周する egghead.io の動画で Redux を学ぶ ヘルシンキ大学の
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がリリースされたので、変更点などを整理したいと思います。 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の課題と将来像を探
こんにちは、fluctの@nekoyaです。 今日は現在開発に携わっている、俗に言う「管理画面」のWebアプリケーションのアーキテクチャをご紹介します。 このアプリケーションはReactとRxJSを軸として作られており、コードはTypeScriptを使って書いています。 アプリケーションを流れるデータと状態の管理について、Write StackとRead Stackという考え方を取り入れたところ、いろいろなメリットが得られたので、そのあたりを軸に掘り下げてみます。 全体の大まかな構成 各Stackの前に、まずはアプリケーション全体の構成をざっくりと見ておきます。 流れとしては、DispatcherからWrite Stack, Read Stackを通ってStateが生成され、それをViewが受け取るという構成になっています。 全体の流れとしてはFluxっぽい何かのひとつのあり方なのですが、
最近悩んでいる 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
import React from 'react'; import { letterFrequency } from '@visx/mock-data'; import { Group } from '@visx/group'; import { Bar } from '@visx/shape'; import { scaleLinear, scaleBand } from '@visx/scale'; // We'll use some mock data from `@visx/mock-data` for this. const data = letterFrequency; // Define the graph dimensions and margins const width = 500; const height = 500; const margin = { top: 2
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 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ページを開く
