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
TanStack | High Quality Open-Source Software for Web Developers
Powerful asynchronous state management, server-state utilities and data fetching Powerful asynchronous state management, server-state utilities and data fetching. Fetch, cache, update, and wrangle all forms of async data in your TS/JS, React, Vue, Solid, Svelte & Angular applications all without touching any "global state"
The property 'value' does not exist on value of type 'HTMLElement'
I am playing around with typescript and am trying to create a script that will update a p-element as text is inputted in a input box. The html looks as following: <html> <head> </head> <body> <p id="greet"></p> <form> <input id="name" type="text" name="name" value="" onkeyup="greet('name')" /> </form> </body> <script src="greeter.js"></script> </html> And the greeter.ts file: function greeter(pers
Reactの"要素の型"、それぞれの特性理解していますか？
はじめに 普段React・Next.jsを用いた開発に際して、UIコンポーネントを作成する際にReact.FCやJSX.Element、ReactNodeなどの"要素やコンポーネントに関する型"を使用する場面が多々あるかなと思います。 昨今のReactコンポーネント開発において、実際には要素やコンポーネントの型を「何を使うか」をあまり意識しないでもちゃんと開発できてしまいます。とはいえ、それぞれの型には微妙に異なる特徴や特性がありますので、今回はよく見かける以下の四つの型について、それぞれの違いや特性を紹介していきたいと思います。 JSX.Element ReactElement ReactNode React.FC
GitHub - twobin/react-lazyload: Lazy load your component, image or anything matters the performance.
すぐに使える！Reactテンプレート15選 - Qiita
はじめに WebサイトやWebアプリケーションを作る際に、Reactを使って開発をする方も多いのではないでしょうか。 世界で人気があり、学習も比較的容易だと言われているReactですが、1からかっこいいUIを構築するのは難しいですよね... 今回はReactで開発をする際に使えるコンポーネントセットやデザインテンプレートを紹介します。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 Reactとは Facebook社（現Meta社）が開発したUI構築のためのJavaScriptライブラリです。 「Facebook」「Instagram」「Yahoo!」「Airbnb」「Netflix」「Slack」など、世界中で多く採用
ReactコンポーネントでレンダリングされるHTML要素の種類を変更可能にするためのパターン
ReactのUIコンポーネントライブラリを使っていると、あるコンポーネントによってレンダリングされるHTML要素の種類を変更したくなる場面がある。たとえば、通常はbutton要素としてレンダリングされるButtonコンポーネントを使うときに、代わりにa要素を使ってレンダリングしたいというケース。 as prop そのような場合、一般的には、Buttonコンポーネントにas propを実装して対処することが多い。 function Button({ as: Component = 'button', ...props }) { return <Component {...props} />; } render( <> <Button type="button"> I’m a <code>button</code> element </Button> <Button as="a" href="
React.js: The Documentaryで振り返るReact普及の歴史 - laiso
www.youtube.com Meta(当時Facebook)のReact Core Teamの主要人物たちに直接インタビューしたドキュメンタリー動画 タイムライン 2012年まで 最初はFacebook社内でReactが普及するまでの道程。 当時世の中的にはクロスブラウザの解決策はjQueryに落ち着き、モバイルアプリ化の流れでAPIサーバーとViewは切り離される傾向にあり、JavaScriptのクライアントサイドで大きいアプリケーション作るためにMVCフレームワークとか取り入れないとね〜という雰囲気だった Facebook社はマーク・ザッカーバーグがHTML5に賭けていた頃*1にBolt.jsというFacebook版Backbone.jsを開発していた 広告プラットフォームのコードは当時Bolt.jsを中心に構成されていたが、Jordan Walkeが関数型プログラミングのアイデア
CSSを持たない Headless な UI ライブラリと ChatGPT によるマークアップ生成を試してみる
いまさら気づいたけど Headless 系のUIライブラリが一番 AI と相性いいのではないか。 ロジックはプログラマで書けて自由度高いし、コンポーネントのネスト構造から意図を読み取れるだろうし、class 名は自由に書けるから意図を表明しやすい。 それをプロンプトとして ChatGPT or Codex にそのまま投げて書かせる、ができる。 というわけで vite + react + radix-ui + vanilla-extract で実験してみた。 プロンプト あなたは凄腕のマークアップエンジニアです。 radix-ui は Headless UI ライブラリで、UIとしてのセマンティクスのみを持っています。 次のコードは React + radix-ui + vanilla-extract で書かれた React コンポーネントです。 // Popover.tsx import
booleanを極力使わないReactの書き方 | HireRoo Tech Blogs
UIの状態を表すために、複数のbooleanが条件に利用される場合、各状態に名前をつけて状態を表現するほうが、可読性が高く、必要最小限の実装で済みます。
How do I render raw HTML with React?
So is this the only way to render raw html with reactjs? // http://facebook.github.io/react/docs/tutorial.html // tutorial7.js var converter = new Showdown.converter(); var Comment = React.createClass({ render: function() { var rawMarkup = converter.makeHtml(this.props.children.toString()); return ( <div className="comment"> <h2 className="commentAuthor"> {this.props.author} </h2> <span dangerousl
Headless UI + Tailwind CSS で Twitter 風のドロワーを作ってみた
Headless UI + Tailwind CSS を組み合わせてドロワーを楽に実装できたので紹介します。 以下のような Twitter っぽいのドロワーを作成しました。 Headless UI とは Headless UI はスタイルを排除したコンポーネント集で、Tailwind CSS と相性がいいとのことです。 スタイルを排除した設計 各コンポーネントのスタイルを切り替えるタイミングを抽象化してくれていて、タイミングごとに適用したいスタイルを prop で渡す設計になっています。 以下のようなイメージです。 <SomeHeadlessUIComponent tapDown="tapDownStyleClass" // <= タップ開始時のスタイル tapUp="tapUpStyleClass" // <= タップ終了時のスタイル /> このような設計になっているため、クラスを使用し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React TanStack Query React/load More Infinite Scroll Example | TanStack Query Docs
React Virtual Infinite Scroll Example | TanStack Virtual Docs
How can a infinite scroll item have a dynamic height? · TanStack/virtual · Discussion #479
React Virtual Dynamic Example | TanStack Virtual Docs
How To Structure React Projects From Beginner To Advanced
Top 5 React Lazy-Loading Libraries | Syncfusion Blogs
headless-ui-dialog - CodeSandbox
React + Headless UI - Dialog (modal) - CodeSandbox