Using React Hooks for state management - LogRocket Blog
Editor’s note: This React Hooks state management tutorial was last updated on 25 May 2021. The React Hooks API has introduced a whole new way of writing and thinking about React apps. One of my favorite React Hooks is useReducer, which you can use to share states between components. In this tutorial, we’ll show you how to handle complex state updates in React using the useReducer Hook. We’ll cover
GraphQLでフロントエンドの複雑性とたたかう
データベースで見る『家族アルバム みてね』の変遷 / The Evolution of Family Album Through the Lens of Databases
2019-08-06のJS: Chrome 76、React 16.9、Slack Desktopのリファクタリング
JSer.info #447 - Chrome 76がリリースされました。 New in Chrome 76 | Web | Google Developers Deprecations and removals in Chrome 76 | Web | Google Developers Chrome Platform Status Stage 4となったPromise.allSettled()の実装、Blob#text()/Blob#arrayBuffer()/Blob#stream()のサポートが追加されています。 また、Async Clipboard APIで画像のサポートが追加されています。 Image Support for the Async Clipboard API | Web | Google Developers Fetch Metadataリ
プロダクト間共通の React コンポーネントライブラリを運用する話 - SmartHR Tech Blog
こんにちは、 フロントエンドエンジニアの @nabeliwo です。 弊社には SmartHR というプロダクトの他に SmartHR の従業員 DB を利用して開発・提供される SmartHR Plus アプリ (以下、 Plus アプリ)というものがあります。 SmartHR CTOが語る中長期戦略。徹底的なアプリ開発とAPI対応で「プラットフォーム化」促進へ - SmartHR ガイド 既に多くの Plus アプリがリリースされており、そのほとんどのプロダクトのフロントエンドは React x Redux という技術スタックで構成されています。 オンライン雇用契約 カスタム社員名簿 ラクラク人事レポート etc Plus アプリは毎回新規でプロジェクトを立ち上げて開発していくことになります。 とはいえブランディングの観点から見ると、基本的なトンマナや UI パーツは SmartHR
Reactのべからず集 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Reactは便利なライブラリですが、ライブラリの想定を外れる使い方をするとうまく動かないとか、進化が続いているのですでに古くなってしまった書き方とかが存在します。 ここでは、そのような、Reactでやるべきでない書き方についてまとめてみました。 ★★★★ この「★★★★」は、「守らないと正常動作しなくなる」レベルのものについて扱います。 JSXを使うファイルでReactを用意し忘れる JSXはReact.createElementに変換されますので、直接アクセスしているように見えなくても、名前空間内にReactが必要です。 eslint
Vue.js × Atomic Design - コンポーネント分割の指針 / Vue.js and Atomic Design - Guideline for components division
Vue.js 講演用資料です。 # 概要 コンポーネントをどのような粒度で分割し、どのように実装するべきかというのは難しいテーマです。 一概に正解があるとも言い切れないテーマですが、この指針を疎かにすることはチームを混乱に陥れることと同義です。 それが SPA 未経験のチームであればなおさら…
大規模Webサービスの改善に向けたR＆Dの取り組み――SPAのボイラープレート開発とFastlyの活用
本連載ではリクルートテクノロジーズにおける大規模Webサービスの改善についてお伝えしてきました。最終回となる本稿では前回までの話とは異なり、今後のリクルートのWebフロントエンド技術について紹介します。具体的には、Single Page Applicationのボイラープレート開発と、Fastlyなどに代表されるCDN導入に焦点を当てた内容をお送りします。 はじめに リクルートテクノロジーズでフロントエンドエンジニアを務めている可児潤也です。 リクルートテクノロジーズでは、レガシーなWebサービスのパフォーマンス改善やコードのモダナイズを行うとともに、R＆Dとして新規技術獲得にもチャレンジしています。それらの技術は実際にリクルートグループ内の新規案件や既存サービスのリプレースとして先行実装を行い、A/Bテストなどを通じて技術検証します。さらに案件を通じて得られた知見は共有し、効果的なものは
事業成長を加速させるフロントエンド改善のお話
Kosuke Yamashita - STORES.jp, Inc. / hey, Inc. BCU30_2019での発表資料です https://bcu30.jp/2019/
React Hooks + Redux Hooks + TypeScript で SPA を構築する（追記あり） - 30歳からのプログラミング
2020/05/31 追記 勉強や経験を重ねた結果、この記事を執筆した時より知識が増え、コードの書き方にも変化があります。 サンプルアプリも同様で、以下のプロダクトのコードのほうが、今の自分の考えが反映されていると思います。 github.com 追記終わり 2019/07/14 追記 ディスカウント後の価格みたいな導出項目はselector (reselect)を使うとよいのでは https://redux.js.org/recipes/computing-derived-data - YonmanHasse のブックマーク / はてなブックマーク というコメントを頂き、確かに便利そうだったので導入した。 それに合わせてこの記事の内容もアップデートした。 追記終わり タイトルに書いた組み合わせで SPA を作るときにどのような設計にするのか、現時点での考えを記録しておく。 チュートリアル
Auth0をシングルページアプリケーションに組み込む方法がより簡単になりました！ #Auth0JP | DevelopersIO
Auth0のシングルページアプリケーション組み込み用モジュール「auth0-spa-js」がリリースされました。非常に簡単にAuth0を組み込むことができるようになりました。 auth0-spa-js が正式リリース！ 認証基盤サービス（IDaaS）であるAuth0。最近は国内でもかなり認知度が上がってきたように思います。 Auth0をシングルページアプリケーションに組み込む方法は、今まで auth0.js を使う方法が一般的でしたが、つい先日シングルページアプリケーションでの利用に特化したモジュール auth0-spa-js が正式リリースされました。 auth0/auth0-spa-js: Auth0 authentication for Single Page Applications (SPA) with PKCE どこが簡単になったの？ Auth0のReactサンプルアプリケーシ
react-redux v7.1＋TypeScriptでconnect, mapStateToProps, mapDispatchToPropsを撲滅する - 文系プログラマによるTIPSブログ
ついに例の定型文3兄弟を除去する事ができるようになりました〜 github.com 先日react-reduxがv7.1にアップデートされ、そこでhooks対応の関数がいくつか追加されました。 今回紹介するものは「useSelector」「useDispatch」の2つです。 react-redux v7.1の新機能 useSelector useDispatch connect関数は不要になる v7.1とそれ以前のコードの比較 v7.1以前のTypeScript + react-reduxのコード v7.1以降のTypeScript + react-reduxのコード 全部入りのサンプルコード 万能ではない点に注意 雑感 react-redux v7.1の新機能 useSelector ざっくり説明すると、mapStateToPropsをhooks対応したものです。 useSelecto
Redux の記述量多すぎなので、 Redux の公式ツールでとことん楽をする。 ( Redux Toolkit) - Qiita
2019/11/20 追記 当記事でメインに取り扱っていたライブラリ名が変更されました。Redux Starter Kit -> Redux Toolkit それに合わせて、本記事もアップデートしています。 追記終わり はじめに Redux Hooks がリリースされたおかげで、Redux の store とコンポーネントのつなぎ込みが簡単になりました。 今回は Redux チームが公式にリリースしている Redux Toolkit を利用すると、Action、Reducer 部分もかなり簡潔に記述できるというお話です。 Redux Hooks については以下の記事を参照してください。 Redux Hooks によるラクラク dispatch & states Redux Toolkit とは？ Redux チームが公式にリリースしているReduxを簡潔に記述するためのライブラリです。 ほ
Reactで読みやすいコードを書くための心得 | ログミーBusiness
2019年1月31日、React.js meetupが主催するイベント、「React.js meetup #6」が開催されました。ReactにまつわるさまざまなテーマでLTを行う本イベント。様々な知見を持ったエンジニアたちが、自身の経験などをもとに発表を行います。プレゼンテーション「読みやすいコードの書き方のススメ」に登壇したのは、わたなべゆう氏。講演資料はこちら 読みやすいコードの書き方のススメわたなべゆう氏：こんばんは。わたなべゆうと言います。今日は「読みやすいコードの書き方のススメ」ということで、読みやすいかどうかを気をつけていこうという内容のLTとなっております。 （スライドを指して）こちらが概要で、あとで見ていただければと思います。ちなみに先ほどTwitterのハッシュタグと、connpassの管理ページにもスライドのURLを貼っておいたので、もしよろしければあわせてご覧になっ
メンテ不能になったフロントエンド環境を立て直す話 - クラウドワークス エンジニアブログ
エンジニアの @suusan2go です。2017年の10月まではクラウドワークスに社員として参画していましたが、現在はフリーランスのエンジニアとして、主にフロントエンド環境の改善・支援を行ったり、ちょっとだけRailsのアップグレードを手伝ったりしています。 Railsのアップグレードを手伝っている様子 Sprocketsを2=>3にあげると数倍メモリ消費増えるのなんなんだろな— すーさん二号 次に夜飲みにいけるのは8月ごろになります (@suusan2go) 2019年5月7日 Sprocketsがメモリを大量に消費する問題、結局よくわからんかったので、馬鹿でかいjsを生成する js.erb をなんとかした— すーさん二号 次に夜飲みにいけるのは8月ごろになります (@suusan2go) 2019年5月17日 今回は、わかるエンジニアがいなくなり無人化してしまいメンテナンス不能になっ
SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷｜ハイクラス転職・求人情報サイト AMBI（アンビ）
こんにちは、小林（@koba04）です。 本記事では、シングルページアプリケーション（以下、SPA）における状態管理について解説します。 GmailやTwitterは、SPAとして構築されている代表的なWebアプリケーションであり、スムーズなページ遷移をSPAによって実現しています。またElectronやPWA（Progressive Web Apps）の登場により、複雑なアプリケーションをWebの技術を使って構築する場面も増えてきました。 これらの複雑なアプリケーションにおいては、既存のページ単位での状態管理の考え方では対応が難しくなります。 そこで今回は、具体的なフレームワークも取り上げながら、Webフロントエンドにおける状態管理のアプローチについて紹介します。 フロントエンドでの状態管理の複雑化 ページの単位を超えた状態の保持 モデルとビューによる処理の分割 イベントの管理が複雑にな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これからはじめるReact Hooks
unstated-next による Redux に頼らない状態管理の考察
A Quick Intro to React Hooks
Medium.comクローンフロントエンドフレーム実装をベンチマークでランク付けする
BFF and Developer Experience
