UIコンポーネントの大きさは外から制御しよう - Qiita
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
React Compiler – React
This page will give you an introduction to the new experimental React Compiler and how to try it out successfully. These docs are still a work in progress. More documentation is available in the React Compiler Working Group repo, and will be upstreamed into these docs when they are more stable. React Compiler is a new experimental compiler that we’ve open sourced to get early feedback from the com
巷の「ReactとNext.jsの比較」はここがおかしい、というか比較すること自体が微妙 - honey32
(WIP まとまったら Qiita とかに上げるかも) TLDR; 「React と Next.js を比較」という記事で、 Next.js と比較できるのは「フレームワークなしで React を使うという選択肢」であって、「React そのもの」ではない。 ✅️ React を使うのに 「フレームワークあり」 vs 「フレームワークなし」 ❌️「React」 vs 「Next.js」 それはそうと、「create-react-app の機能・特徴」のことを、「React の機能・特徴」であるかのように書いてしまっている記事が多い create-react-app 自体が擬似的なフレームワーク（といえそう） そもそも、create-react-app は今は更新されてないので create-vite-app を使うべき フレームワークあり or フレームワークなし 【フレームワークあり】
Navigation API による「JS での画面遷移」と SPA の改善 | blog.jxck.io
プロンプトでUIを生成してくれるAIサービス「v0」をUIUXデザイナーが使ってみた
生成AI で思い通りのサイトを出力しよう - Qiita
Fixing Race Conditions in React with useEffect - Max Rozen
So you've got a component that fetches data in React. The component accepts an id as a prop, uses the id to fetch data with useEffect, and display it. You notice something strange: sometimes the component displays correct data, and sometimes it's invalid, or out of date. Chances are, you've run into a race condition. You would typically notice a race condition (in React) when two slightly differen
Reactのさまざまなデータフェッチ方法を比較して理解して正しく使用する - SWR・TanStack Query編
「Reactのさまざまなデータフェッチ方法を比較して理解して正しく使用する」シリーズの2記事目です。今回は「SWR・TanStack Queryを用いたデータフェッチ」について理解していきます。 イントロ+useEffectを用いたデータフェッチ SWR・TanStack Queryを用いたデータフェッチ ← 👀この記事 Pages Routerでのデータフェッチ+App Routerでのデータフェッチ+まとめ Repository 以下は今シリーズで用いたリポジトリです。 🔽クライアントサイドフェッチの調査に用いたリポジトリ：React+Vite（useEffect, SWR・TanStack Query） 🔽サーバーサイドフェッチの調査に用いたリポジトリ：Next.js Pages Router, App Router SWRを用いたクライアントサイドフェッチ SWRを用いてデー
Reactのさまざまなデータフェッチ方法を比較して理解して正しく使用する - useEffect編
昨今のReact・Next.js界隈では様々なデータフェッチの仕組みが提供されていますが、一体どのような場面でどのデータフェッチ方法を使用したらベストなのでしょうか？ 開発のためにたくさんの選択肢が出てきた今、きちんとそれぞれの特長を知って正しく適当に使ってあげたいものですね🌟 そこで、 ☝🏻CSRで基本的な「クライアントサイドデータフェッチ」として useEffect hooksを用いたデータフェッチ ✌🏻「クライアントサイドデータフェッチ」に加えて「クライアントサイドキャッシュの仕組みを利用して状態管理ができる」ことで有名なデータフェッチライブラリのSWR, TanStack Query 🤟🏻「サーバサイドデータフェッチ」として(1)Next.jsでのgetServerSidePropsを利用したデータフェッチ・(2)App Router組み込みのキャッシュ機構とRSCを用い
驚くほど簡単に3Dシーンを構築！React Three Fiberを使ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Manipulating the DOM with Refs – React
React automatically updates the DOM to match your render output, so your components won’t often need to manipulate it. However, 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 will need a ref to the DOM node. You will learn How to access a
React hooks: not magic, just arrays – Rudi Yardley – Medium
I am a huge fan of the new hooks API. However, it has some odd constraints about how you need to use it. Here I present a model for how to think about using the new API for those that are struggling to understand the reasons for those rules. Unpacking how hooks workI have heard some people struggling with the ‘magic’ around the new hooks API draft proposal so I thought I would attempt to unpack ho
Scaling Up with Reducer and Context – React
Reducers let you consolidate a component’s state update logic. Context lets you pass information deep down to other components. You can combine reducers and context together to manage state of a complex screen. You will learn How to combine a reducer with context How to avoid passing state and dispatch through props How to keep context and state logic in a separate file Combining a reducer with co
Extracting State Logic into a Reducer – React
Components with many state updates spread across many event handlers can get overwhelming. For these cases, you can consolidate all the state update logic outside your component in a single function, called a reducer. You will learn What a reducer function is How to refactor useState to useReducer When to use a reducer How to write one well Consolidate state logic with a reducer As your components
Preserving and Resetting State – React
State is isolated between components. React keeps track of which state belongs to which component based on their place in the UI tree. You can control when to preserve state and when to reset it between re-renders. You will learn When React chooses to preserve or reset the state How to force React to reset component’s state How keys and types affect whether the state is preserved State is tied to
Start a New React Project – React
If you want to build a new app or a new website fully with React, we recommend picking one of the React-powered frameworks popular in the community. You can use React without a framework, however we’ve found that most apps and sites eventually build solutions to common problems such as code-splitting, routing, data fetching, and generating HTML. These problems are common to all UI libraries, not j
Thinking in React – React
React can change how you think about the designs you look at and the apps you build. When you build a user interface with React, you will first break it apart into pieces called components. Then, you will describe the different visual states for each of your components. Finally, you will connect your components together so that the data flows through them. In this tutorial, we’ll guide you through
フロントエンド開発のためのテスト入門 - サンプルの紹介 -
昨年から執筆を続けていた書籍が 4/24 に刊行します。「フロントエンド開発のためのテスト入門」という本です。 書籍ならではのテストコード解説を目指して 次の投票結果は、書籍企画時に持ち込んだ筆者のツイートです。フロントエンドテストに関していえば、8 割近くの方が何かしら不安や不足を感じている、という結果になりました。 不安や不足の原因は様々なものがあるかと思います。そのうち、筆者が着目したのは「テスト手法の豊富さ」です。「単体テスト・結合テスト・E2E テスト、何をどれほど書けばよいのか？」という疑問は、フロントエンドに限らず、はじめて自動テストに取り組まれる方が通る関門ではないでしょうか。 自動テストを書くには「テスト対象」を明確にしたうえで、テスト対象に適したテストコードを書く必要があります。本書は、現場で書かれるものに近い「テスト対象 = アプリケーションコード」をサンプルとして用
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Customised confirm navigation prompt with React-Router v6
React Router: Declarative Routing for React