タグ「React Hooks」 - はてブログ

タグ React Hooks

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 29件)

【React】useMediaQuery は最終手段にしよう

2024/07/03 15 users React matchmedia CSS メディアクエリ判定

こんにちは、エンジニアです。本記事ではuseMediaQueryを使うべきではない理由を説明します。 useMediaQueryとは window.matchMediaの判定結果を取得するカスタムフックを指します。 window.matchMediaはCSSでできるメディアクエリの判定をJavaScriptでも可能にするブラウザAPIです。それをReact Hooksと組み合わせるこ... 続きを読む

React Hooks ライブラリ SWR 2.0で追加されたuseSWRMutationを使ってみた | DevelopersIO

2023/01/01 10 users DevelopersIO SWR Vercel エントリ北川

こんにちは。データアナリティクス事業本部サービスソリューション部の北川です。 SWRとは SWRは、データの取得や更新に便利なReact Hooksライブラリになります。Next.jsを開発していることでも有名な、Vercelが提供しています。 developersIOでも以下のエントリが投稿されています。少し前にSWR 2.0が発表されました... 続きを読む

【React】matchMedia で理解する useSyncExternalStore

2022/12/27 9 users redux React matchmedia API フック

React の API で、よくわからないしわかる必要性もあんまりない(かもしれない) React Hooks に useSyncExternalStore があります。Redux のように React 外で管理されているステートオブジェクトを React にインテグレートするためのフックということくらいは耳にしたことがあるのではないでしょうか。そのフックの機能... 続きを読む

アソビュー流、SWRの使い方。可読性・保守性の高いhooks活用法 - asoview! TECH BLOG

2022/12/08 10 users SWR asoview アソビュー REST API 保守性

はじめにアソビュー！ Advent Calendar 2022の8日目です。 2019年ごろから基本的にReact hooksを使用しており、REST APIを呼ぶ際も以前紹介したこちらのようにhooksベースで行っています。今回はその中でSWRに着目してご紹介したいと思います。tech.asoview.co.jp SWRとは？ SWRとはstale-while-revalidateの考えに基づ... 続きを読む

Reactで作るアナログ時計

2022/09/21 11 users React アナログ時計時計勉強メモ JavaScript

2022年9月21日 JavaScript, React 以前よりReactの勉強がてら、1時間を40分で区切った36時間時計というのをモクモクと作っています。その中でReact Hooksの使い方などを学んでいるので、今回はよくあるアナログ時計を作りながら勉強メモとして残しておきます。こんな感じのアナログ時計作ってみたよくある時計ですね！... 続きを読む

React HooksとVue Composition APIの比較

2022/08/15 10 users Vue Composition API 比較

概要 Vueの作者であるEvan You氏は、Vueのデフォルトバージョンが2022年2月7日以降3.x系に切り替わる事を開発者ブログにおいて発表しました。それに伴い、Vue2.x系の最後のマイナーバージョンであるVue2.7が2022年7月1日にリリースされ、こちらの LTS (long-term support)はリリースから18ヶ月であることから、Vue2.x系... 続きを読む

保守性の高いReact hooksコードの指針

2022/03/31 120 users Tips 指針 API 反面教師原則

前提本記事は保守性の高いReact hooksコードの指針を記述します。指針はtipsに近いものから原則に近いものまで雑多に含まれます。総じてReact hooksの標準的なAPIを上手く扱う方法が多めです。これらは保守性の低いコードを反面教師とした私的な経験則に基づきます。（思い出し次第随時追加していきます）ご留意くだ... 続きを読む

Reactのパフォーマンス改善を勉強会で開催しました - JX通信社エンジニアブログ

2021/08/04 6 users React hooks JX通信社エンジニアブログ反面ヘイ

はじめまして、新卒フロントエンドエンジニアのぺいです。 JX通信社でフロントエンドの開発はReactが主流になっており、React Hooksを使った開発が欠かせません。hooksは便利な反面、適材適所使い所を理解していないと逆にパフォーマンスが悪くなってしまう場合があります。そこで今回は普段フロントエンドを書かない人... 続きを読む

React Hooks と TypeScript で簡単 TODO アプリ

2021/04/27 10 users ToDo TypeScript アプリ

$ npx create-react-app todo --template typescript Need to install the following packages: create-react-app Ok to proceed? (y) Creating a new React app in C:\Users\qiita\Downloads\todo. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cr... 続きを読む

React Hooksのみでドラッグ＆ドロップの並び替えを実装する

2021/04/01 22 users ドラッグ＆ドロップ

この記事について上記のようなドラッグ&ドロップを使った並び替えの処理を自作したは良いものの、使うことが無くなってしまったので、供養の意味を込めて、その時に得た知見をこの記事で共有したいと思います? 実装する条件この記事で実装する処理は以下の条件のもと実装してきます。サードパーティ製のライブラリを... 続きを読む

【React+TypeScript】Netflixのクローンを作るチュートリアル

2021/01/22 458 users クローン Netflix React+TypeScript

React+TypeScriptを使ったNetflixの映画一覧を表示するアプリケーションのチュートリアルです。学べる事 - ReactのFunctionComponent（関数コンポーネント）とTypeScriptの使用 - React Hooksによるstate管理 - TypeScriptで外部APIを扱い、非同期通信でデータを取得 - movie-trailerにyoutubeを組み込む - Firebaseで... 続きを読む

【Vue.js】Composition API時代の便利ライブラリ「VueUse」を使ってみた - Qiita

2020/06/20 134 users ロジック Composition API API Qiita

Vue Composition API によって Vue.js にも React Hooks のようなロジックの再利用性の高い開発体験がもたらされようとしています。しかし、まだ「Composition API の良さをわかっていない」という方や「Composition API をうまく利用した書き方がわからない」という方も多いかと思います。本記事では Composition API... 続きを読む

僕のフロントエンド技術に対するスタンス｜erukiti｜note

2020/06/05 178 users TypeScript erukiti ボロクソ Note 日頃

僕は日頃からReact Hooks + TypeScript 最高だの言ってますけど、実のところ、それらを超えるモノが登場したら一瞬で「React Hooksなんて過去の技術だよねー、#にゃーん（社会性フィルター）」とか「TypeScript？へなにそれ？過去の言語ですよね」とかボロクソに言ってる自信があります。僕にとっては技術はただの道具... 続きを読む

React教育の新しいテキストを書いてます - EY-Office

2020/03/03 9 users EY-Office React Redux Toolkit

世の中たいへんな状況ですが、 EY-Office では淡々と新しいReact教育のテキストを書いてます。今回のテキストは現在の主流になりつつある、以下のような技術を使ったReactの入門テキストです。 React Hooks メイン (React.Componentクラスは解説程度) TypeScriptメイン Redux章には、Redux Toolkit を採用これらの技術... 続きを読む

【React】カスタムフックでstatefulなコンポーネントを整理する - yigarashi のブログ

2020/02/25 7 users React yigarashi コンポーネント自作概要

こんにちは。最近は仕事で React を書き始めました。数年前に React を触った時は class component をせっせと書いた覚えがあるのですが、最近は functional component と react hooks を組み合わせて書くこともできるようです。react hooks の概要は公式ドキュメント等を読んでもらうことにして、本記事では、自作のカ... 続きを読む

React Hooksに対応した複数のonChangeハンドラを処理する書き方 | 会津ラボブログ | 会津ラボブログ

2020/01/29 5 users Warning input要素記述コールバック関数操作

Functional Componentにおける複数のonChangeハンドラを一元的に処理するコールバック関数をお伝えしたい。まずフォーム項目の操作は、onChangeハンドラが必要で、記述がなければwarningが発生するケースもある。input要素を有するコンテンツに限れば、必須イベントハンドラといえる。そしてinput要素がひとつというこ... 続きを読む

おまえはReact hooksを知っているか - Qiita

2019/09/16 213 users React おまえ Vue Qiita Pwa

よく来たな。おれは毎日すごい量のコードを書いているが、誰にも読ませる気はない。しかし今回はReact hooks という真の男のためのAPIを発見したのでいてもたってもいられずQIITAに記事を書くことにした。（この記事の文体は、逆噴射聡一郎先生のパロディです。）お前は毎日VUEだとかREACTだとかPWAだとかBBBFFだとか... 続きを読む

宣言的UIはReact Hooksで完成に至り、現代的設計論が必須の時代になる - Qiita

2019/09/06 383 users Qiita React angular パラダイムシフト現代

現代のGUI開発において、必須となった宣言的UIというパラダイムシフトがあります。宣言的UIは、Facebook社が開発したReactに端を発するものです。宣言的UIは既にウェブ開発のライバルであるVue.jsやAngularなどでも当たり前のように使われていますし、Android開発などにも使われています。 2019年6月はじめに開催された... 続きを読む

これからはじめるReact Hooks - Speaker Deck

2019/09/03 78 users Speaker Deck

All slide content and descriptions are owned by their creators. 続きを読む

React Hooks + Redux Hooks + TypeScript で SPA を構築する - 30歳からのプログラミング

2019/07/05 146 users TypeScript サンプルアプリ SPA プログラミング

タイトルに書いた組み合わせで SPA を作るときにどのような設計にするのか、現時点での考えを記録しておく。チュートリアルの次の一歩というか、現実的なアプリを構築する際の基本となる考え方。状態管理とどう向き合うかが、主要なテーマになっている。サンプルアプリ具体的なコードがないと話を進められないので、... 続きを読む

use-react-redux-context で redux 環境下で React Hooks を使う - Qiita

2019/03/01 17 users redux Qiita hooks useContext 余地

で使えます。が、 peer deps として react react-dom react-redux redux がいるので、今までの redux スタック全部盛りでもあります。これは何 ReactRedux connect を、Context API と useContext で置き換えようとしたものです。その過程でパフォーマンスチューニングする余地を大量に入れ込んでいます。 hooks で re... 続きを読む

React HooksとContextAPIでFluxをやってみる - コネヒト開発者ブログ

2019/02/26 46 users Flux コネヒト開発者ブログ

CTO室エンジニアの安達 (@dachi_023) です。React v16.8で待ちに待ったHooksが (20日前に) リリースされました。そんなHooksを使ってFluxやる時ってどうするんだろう？と思ったので調べて写経してみました。 reactjs.org 書いたコード create-react-app して出てきたものをいじって作りました。Flux化するまでに書いたコ... 続きを読む

実践: React Hooks - mizchi's blog

2019/02/08 320 users mizchi's blog 実践

hooks が発表されてから趣味でも現場でもずっと hooks を使っています。おかげでだいぶこなれてきて、だいたいなんのライフサイクルでも表現できるようになってきました。最初は単に useState が state を、 useEffect が componentDidMount/componentDidUpdate を置き換えるもの、と説明を済ますつもりでしたが、 useE... 続きを読む

ブログのReactを16.8にあげてReact Hooksで書き換えてみた - mottox2 blog

2019/02/07 44 users React alpha コンポーネントたくさん解説

2019/02/06にReact16.8がリリースされ、16.7のalphaから入っていたReact Hooksが安定版にやってきました。そこで今回このブログで使われているReactを16.8に上げて、ステートフルなコンポーネントをReact Hooksを使いFunction Compoenentに書き換えてみました。 React Hooksの解説をした記事はたくさんあると思うので、... 続きを読む

(1 - 25 / 29件)

次の25件 »