React Server Componentsを理解する | POSTD
私も年を取ったと感じるのは、今年Reactが10年目を迎えたからです。 混乱していた開発コミュニティにReactが初めて紹介されてから10年、以来いくつもの進化を遂げてきました。Reactチームは、急進的な改革ということに関しては躊躇しませんでした。問題に対して、より良い解決策が見つかれば、それを実行してきました。 数か月前、Reactチームは最新のパラダイム・シフトであるReact Server Componentsを発表しました。史上初めて、Reactコンポーネントがサーバーでのみ実行できるようになったのです。 このことに関連してオンライン上では、きわめて大きな混乱が起きています。それが何なのか、どのように機能するのか、利点は何か、そしてSSR（Server Side Rendering）などとどのように連携するのか、多くの人が多くの疑問を抱いています。 私はReact Server
UIの情報構造に合わせたReact Componentを作る、UI Structureパターン
はじめに ReactのComponentを、見通しよく開発しやすい形で設計するパターンを整理しました。 自分がUI Structureパターンと呼んでいるこの手法では、UIの情報設計として存在する要素分だけReact Componentを作ります。 ReactのデザインパターンはContainer/Presentationalパターンが有名ですが、Container/Presentationalパターンではロジックに関わるものを担うContainer Componentと見た目に関わるものを担うPresentational Componentにわけ、再利用性を高めています。 しかしUI StructureパターンではContainer Componentを作らずhooksやlogicsで切り出して対応します。 とはいっても、Reactの開発に慣れている方にとっては特別目新しいものではないか
React で ref ではなく ref.current を操作する理由
🌼 はじめに 2023.02.27 UPDATE） この記事は一部正確ではない内容がありましたので、タイトルと内容を 「React で ref ではなく ref.current を操作する理由」 に変更しました。 既に読んでくださった方々、申し訳ありませんでした。 1. React で DOM にアクセスする React の世界で DOM にアクセスするとき ref を使います。 sometimes you might need access to the DOM elements managed by React—for example, to focus a node, scroll to it, or measure its size and position. There is no built-in way to do those things in React, so you
Reactの基本を知る
はじめに 先日新しく発表された React の公式ドキュメントを皆さんはご覧になられたでしょうか？ この react.dev の前に Beta 版があり、筆者は少しずつ読み進めていました。その中で React の基本や思想をほとんど知らないまま使っていたことに気づきました。 今回読み進めることで公式ドキュメントをしっかりと理解することの重要性を知り、アウトプットとしてまとめてみたので、是非参考にしてもらえると嬉しいです！（GPT の手助けもあります） Props について Props とは親から子コンポーネントに渡す変数（プロパティ）のことです。 関数の引数のように利用でき、かならずオブジェクトとして渡す必要があります。 function Avatar({ person, size }) { // ... } // 渡し方 <Avatar size={100} person={{ name
【React】1度だけ変更されるstateにはuseStateよりuseReducerを使う方が最適
useStateでしょ！ という声が聞こえてきますね。 おっしゃる通りなんですが、それよりも実はそういう時はuseReducerの方がより適しているという話です。 はじめましてスペースマーケットでフロントエンドエンジニア兼リーダーをしています。 はじめに useState / useReducerがなんぞや？という方は公式のリファレンスをご確認ください。 1度だけ変更されるstateでいうと下記のようなイメージでしょうか？ const Hoge: FC = () => { const [finished, setFinished] = useState(false) const onClick = () => { setFinished(true) } if (finished) return <div>送信しました！</div> return ( <div> <button onClic
【脱Redux】SWRやReact Queryを使った状態管理戦略
mutexの桝田です！ Reactのデータフェッチに、Vercel社が提供する「SWR」やTanStackコミュニティが提供する「React Query（TanStack Query）」が使われることが多くなってきています。 これらのライブラリは単なるフェッチだけでなく、キャッシュやデータの更新を担ってくれます。また、Reactが志向する「宣言的」な記述を体現できることも大きなメリットです。 本稿では、（我々が採用する）React Queryにフォーカスし、React Queryを使って実現している状態管理について説明します。SWRを普段お使いの方に関してもかなり共通する部分が多いのではないかと思います。 1. 対象読者 Reactのデータフェッチライブラリの使用を検討している方 普段SWRやReact Queryを使用している方 普段Reactを使用するすべての方
Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか｜ハイクラス転職・求人情報サイト AMBI（アンビ）
Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか Reactを取り巻く状態管理のアプローチは変化を続けていますが、いま知っておくべき手法とはどのようなものでしょうか。小林 徹（@koba04）さんに、現在、そしてこの先の状態管理について執筆いただきました。 こんにちは、小林（@koba04）です。 2019年5月に『SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷』という記事を書きましたが、そこから2年以上が経過し、Reactを用いた状態管理は大きく変わりました。本記事ではReactを取り巻く状態管理の変遷について解説します。 広がるReduxの採用 Hooksの登場 コンポーネントツリーから独立した状態管理 Concurrent Featuresによる新しいユーザー体験 状態とキャ
TypeScriptのもとでuseRefを使うときに知るべきRefObjectとMutableRefObjectについて
TypeScript環境でのReactの useRef は、初期値と型引数の与え方によって返り値の型が RefObject と MutableRefObject のどちらかになります。どういう使い方のときにどう書いてどちらを得るべきかを、 @types/react の更新まわりの議論を追った結果を示します。 この記事は2021年5月現在、React 17.0.2が最新バージョンの時点で記述します。 参考にした情報 https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065#issuecomment-446425911 RefObject と MutableRefObject が別である理由について https://github.com/DefinitelyTyped/DefinitelyTyped/pull/38228#i
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
まず Container より始めよ
React + TypeScriptでpropsと型を便利に扱うTips集