Jotai vs. Recoil: What are the differences? - LogRocket Blog
Yaroslav Lapin I'm a self-taught software engineer with over 10 years of experience. I like Elixir/Erlang and React/TypeScript. You can follow me on Twitter @JLarky. It’s practically a meme at this point that React has too many state management libraries, but no one is going to stop creating new ones anytime soon. It looks like apart from using plain old React state, approaches for state managemen
React Suspense での非同期処理のエラー処理パターン
この記事は 2021 年 9 月、React v17 相当時点での情報に依存しています。 React の Suspense による非同期処理は未だ Experimental な機能ですが、いくつかのデータフェッチ系ライブラリや状態管理ライブラリのインターフェースでサポートされています。 公式ドキュメントに例示された実装 Suspense を利用するときのエラー処理には、公式ドキュメントで ErrorBoundary を使う事例 が紹介されています。「データ取得のエラーの処理はレンダーのエラーと同様に動作」することに由来しています。 エラーレポートと一緒に使うと困る Sentry 等のエラーレポートサービスを利用していて、データ取得の準正常系にあたるエラーは検知したくないが、実行時エラーのような異常系は検知したいときに、この例示を素朴に採用するのでは困ることに気づきました。 ところで、Err
React Architecture: How to Structure and Organize a React Application
There is no consensus on the right way to organize a React application. React gives you a lot of freedom, but with that freedom comes the responsibility of deciding on your own architecture. Often the case is that whoever sets up the application in the beginning throws almost everything in a components folder, or maybe components and containers if they used Redux, but I propose there's a better wa
React Hook Form v7とMaterial UIを組み合わせるときの挙動 | DevelopersIO
Web アプリケーションを作るときにフォームは避けることができない問題の1つです. 私はReact Hook Form (RHF)をよく利用してフォームを構築します. RHF v7とMaterial UI v4のTextFieldを結合したときにうまく動いたり動かなかったりして少し困ったのでそこの原因とワークアラウンドについてかければと思っています. environment React: 17.0.x React Hook Form: 7.6.x Material UI: 4.11.x fundamental knowledge React Hook Form(RHF) v7ではregister関数の返り値をフォーム要素に渡すことで繋ぎ込みを行います. v6ではrefに対して直接registerを渡していました. <input name="name" ref={register} /> v
create-react-appとtypescriptでelectronをやる - Qiita
2020/08/28 追記 electron-webpackを使った新作を書きました。 electron-webpackでTypescript+Reactプロジェクトを作成する 背景 create-react-appは便利 typescript対応もしている webpack書かなくて良い electronは便利 フロントエンドの表現力 ローカルへのアクセス ということで適当に足したら爆発したため、まとめていきます。 動くプロジェクトはこれです thalathalaylah/create-react-electron-typescript-app 記事の構成としては、 1.やること 2.やったこと 3.なぜなのか の3部構成です。何をどうしたかだけ気になる方はやったことだけ読んでいただければ。 参考文献 Building an Electron application with create
ReactとElectron間のデータの送受信の手法と一例
注意！ この記事内のいくつかの項目はoutdatedになりました。特に、remote.requireは非推奨です。 バーチャルユーチューバーです。皆さんもバーチャルユーチューバーですか？ 前回のReact+Electronアプリを作る話ではアプリを作るまでの事しか話しませんでした。そして、React及びRedux上で物事がだいたい済むのならば、ElectronやNode.jsについて深く思い悩むこともないでしょう。 しかし、Electronでアプリケーションを作りたいのならば、Node.jsおよびその上で動作するパッケージを使用したいことや、Electron上で取得したデータをReact上で表示したい、という望みがあるはずです。 ここで問題になるのは、そのElectron-メインプロセス-とReact+Redux-レンダラプロセス-の間をどのように処理するか、についてです。 remote.
現場から届けるReactプロジェクトの悩みと改善
Transcript ݱ͔Βಧ͚Δ3FBDUϓϩδΣΫτͷ Έͱվળ� 6*5���ਐԽ͢Δ�3FBDU�KT wTBLJUP !@@TBLJUP@@ � w'SPOU�&OE�&OHJOFFS� w3FBDU XFCQBDL (BUTCZ+4� w&WFOU� w#POpSF�'SPOUFOE� w'SPOUFOE�5SBJOJOH�.FFUVQ� w3FBDU�NFFUVQ� w*OTJEF�'SPOUFOE� ࠂ None *OTJEF�'SPOUFOE��� �����݄��։࠵ʂ✨ IUUQT���JOTJEF�GSPOUFOE�DPN� $'1ืूͷకΊΓ ໌ �݄����࣌�� ·Ͱʂ ·ͩؒʹ߹͏ʂʂʂ ࠂऴྃ ݱҰͭҰͭʹ3FBDUʹؔ͢Δ͕͋Δͱ͓ͬͯΔ ࠙ձͰͦΜͳͰΓ্͕Γ͍ͨ ͷ3FBDUϓϩδΣΫτͷݱͰվળ
typescript-fsaに頼らないReact × Redux
2018年11月1日、株式会社メルカリにて「React会」が開催されました。第1回となる今回は、5人のエンジニアがReactにまつわるさまざまなトピックスについてライトニングトークを展開しました。プレゼンテーション「typescript-fsaに頼らないReact × Redux 」に登壇したのは、日本事務器株式会社の甲斐田亮一氏。講演資料はこちら typescript-fsaに頼らないReact × Redux 甲斐田亮一氏：「typescript-fsaに頼らないReact × Redux」というタイトルで始めさせていただきます。僕は日本事務器という会社でフロントエンドエンジニア兼デザイナーをしている甲斐田といいます。 ふだんの業務で、React、TypeScriptでアプリケーションを書いています。 今回話すことですが、最近のTypeScript 2.8以降の機能を使って、React
Re-ducksパターン：React + Redux のディレクトリ構成ベストプラクティス
Re-ducks というディレクトリ構成のベストプラクティスについてまとめる。Re-ducksパターンを使うことで、React + Redux を用いた開発がよりメンテナンスしやすいものになる。 Ducks パターン 名前からもわかるように、Re-ducks は Ducks というパターンをベースにしている。 erikras/ducks-modular-redux Ducks パターンが解決すること： actionType、action、reducerが散らばっててつらい 結局のところ actionType、action、reducer は密結合なので、ducksパターンではこれら3つを1つのファイルにまとめる。 // widget.js // Actions const LOAD = 'my-app/widgets/LOAD'; const CREATE = 'my-app/widget
フロントエンドのコンポーネント設計に立ち向かう - Qiita
ReactやVueなどコンポーネントベースで作っていくViewのライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、このコンポーネントの設計に悩まれる方も多いのではないでしょうか。 コンポーネントをどの粒度、どんな状態で分割するのが良いのか、などなど、特にチームで開発する時に認識が揃っていないとカオスになりがちな部分であると思うので、自分なりの設計をする際の指針を言語化しようというのが本記事の目的です。同じように悩まれている方にも何らか示唆を提供することができたら嬉しいです。 想定読者 「コンポーネント設計？なにそれ？おいしいの？」という方 初めてコンポーネント設計でアプリ作ってみたけど、本当にこれでいいのか自信の無い方 はじめに: "コンポーネント"とは まず最初に"コンポーネント"という言葉についてですが、ここでは「GUIのパーツをモジュー
Redux vs. The React Context API
👋 Hey! If you have a subscription to egghead.io you might enjoy my course on the Context API over there. It's only about 35 minutes long and covers a lot of ground: how to manage state with Context (without Redux), patterns for structuring your code, how to display notifications, testing, performance. All in real-world scenarios. React Context for State Management React 16.3 added a new Context A
Reactのグラフ描画ライブラリRechartsを使ってみた | yosuke.saito
前から気になっていたReactのグラフ描画ライブラリRechartsを触ってみた。 内部でD3.jsを使っていて、READMEに書いてあるが大きな特徴は3つあるらしい。 Reactコンポーネントとして使える 素のSVGの描画をサポート 画面に表示したいコンポーネントを宣言するだけで描画可能 基本は次のように使う。 import React, { Component } from 'react' import { LineChart, Line, XAxis, YAxis } from 'recharts' class App extends Component { render() { const data = [ { name: 'a', uv: 12, pv: 5 }, { name: 'b', uv: 13, pv: 3 }, { name: 'c', uv: 19, pv: 9 }
React Redux Real World Examples 〜先人から学ぶReact Reduxの知恵〜
React Reduxを使ってプロダクトを作りはじめて、かれこれ半年くらい経ちます。 しかし、どうもうまく書けていない気がすることがときどきあり、悩んでいたところ、ツイッターで次のような助言をもらいました。 @__tai2__ 達人かどうかは微妙なところがありますが、ある程度の規模のコードはここにリンク集あります https://t.co/B79B5s1DTe — Yuki Kodama (@kuy) 8 December 2016 この記事は、上記のリンク集でまとめられている実際のReact Reduxプロダクトのソースコードを調査することで、筆者がふだんReact Reduxで開発をしていて感じる疑問への答えを探る試みです。 筆者が答えを得たいと思っている疑問は次の3つです 1 Storeはどんな具合に階層化すべきか Store初期化(hydration)用データの定義はどうすべきか
React Fiberアーキテクチャについて | POSTD
初めに React Fiberは、現在進行形で進められているReactのコアアルゴリズムの再実装であり、Reactチームの2年以上にわたる研究の成果です。 React Fiberは、アニメーション、レイアウト、ジェスチャーといった領域に対する適性を向上させることを目指しています。React Fiberの目玉となる インクリメンタルレンダリング は、レンダリング作業を分割して、複数のフレームに分散させることができる機能です。 他には主に、新たな更新があった際に作業を休止・強制終了・再利用できる機能、更新の種類別に優先順位をつけられる機能、新しい並行プリミティブなどが挙げられます。 このドキュメントについて Fiberは、コードを見ただけでは分かりにくい斬新な概念をいくつも導入します。このドキュメントはそもそも、ReactプロジェクトにおけるFiberの実装に伴って私が取っていたメモを集めたも
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mantine
React/Reduxで�秩序あるコードを書く
React製のSPAのパフォーマンスチューニング実例
基礎からはじめるReact入門一覧
Recharts