[B! react.js] [3ページ] heavenshellのブックマーク

Web ページの背景を動く星空にした話 (with react-three-fiber)

TL;DR モチベーションウェブページの背景に星空を見せたかった。それがちゃんと実際の星空の、リアルタイムの状況を反映していたら面白いよねと思った。スタート時の状況主に愛情のこもった手打ち HTML5 と手打ち CSS でシンプルな Web ページを作っていた https://web.archive.org/web/20210212085818/celestian.io この前にどうやら React が世間では流行ってるらしいということで React と TypeScript を使った小さい 1 ページアプリを作った https://web.archive.org/web/20201202100627/https://celestian.io/ssr/ 今の https://celestian.io/sushi の前身 C# で WPF のデスクトップアプリとか作ってたことがあった

heavenshell 2022/08/15

react.js

リンク

React コンポーネントの「制御・非制御」を意識しない方法

React でフォームを作るとき「制御・非制御」コンポーネントに関する知識は必須です。デザインシステムを作成するにあたり、どちらを採用するか検討されたこともあるかと思います。「制御・非制御」コンポーネントの差分を一言でまとめると、次のとおりです。制御コンポーネントはライブラリ（React）が「入力要素の状態」を管理非制御コンポーネントは「入力要素の状態」を DOM 自身が保持「制御・非制御」コンポーネントと Form ライブラリ React Hook Form は、非制御コンポーネントを使うことで、少ないコード量で高パフォーマンスの Form 実装が実現できる人気のライブラリです。「非制御コンポーネント」として作成された<Checkbox>コンポーネントの例を見てみましょう。次の方法で<input type="checkbox" name="test" />がレンダリングされ、Fo

heavenshell 2022/08/14

react.js

リンク

【保存版】「そのuseEffectの使い方あってる？」と言われる前に

参考目的プロジェクトで使用されている不適切なuseEffectを減らす本題 Reactの公式ドキュメントにuseEffectは必要ないかもしれない，というようなページがありとても勉強になったので記事にしようと思いました．データフェッチングアプリのデータフェッチングをuseEffect内で行うのはよく知られている方法です． Bad 💣 function SearchResults({ query }) { const [results, setResults] = useState([]); const [page, setPage] = useState(1); useEffect(() => { // 🔴 Avoid: クリーンアップなしでのフェッチング fetchResults(query, page).then(json => { setResults(json); }

heavenshell 2022/08/12

react.js

リンク

React, Polaris, App Bridge, GraphQLを使ったShopify在庫表示アプリを作ってみる

この記事はShopifyアドベントカレンダーの8日目の記事です。はじめに 2021/12/05時点での、Shopifyでのアプリケーションの作成チュートリアルを参考に在庫表示アプリを作ってみます(公式ドキュメント参考)。公式ドキュメントはクラスコンポーネントを使ってますが、個人的に古い書き方のように感じるので関数コンポーネントをつかった実装に書き換えてます。公式ドキュメントの内容は定期的に更新されているようなので、困ったら公式ドキュメントを見ることをおすすめします。 Prerequired shopify cli ツールのインストールをします。

heavenshell 2022/08/09

react.js

リンク

Examples of large production-grade, open-source React apps - Max Rozen

Examples of large production-grade, open-source React apps It's bloody hard to find a good example of a large production-grade, open-source React app. There are a few reasons for this: No one writes amazing code the first time they write itExperienced product engineers know there's a trade-off between quality and getting features in the hands of customers. You're more likely to find ugly tech debt

heavenshell 2022/08/04

react.js

リンク

ReactRouter6のuseNavigateはlocationが変わると別物を返す

const navigate = useNavigate(); useEffect(() => { navigate(`/it ems/${it emId}`); }, [navigate, it emId]); のように書くのですが、v6ではこのuseEffectはブラウザバックなどで戻ってきた場合にも発火してしまいます。 https://github.com/remix-run/react-router/issues/7634 https://github.com/remix-run/react-router/issues/8349 どうやらlocationが変わった時にuseNagivateが別の参照を返すようになったらしく、これまでと同じ動作を期待していると予期せぬ不具合を招いてしまいます。 issueではいくつかのworkaroundも提唱されていますが、簡単にシュッと解決できる雰囲気

heavenshell 2022/07/22

react.js

リンク

GitHub - s-yadav/react-number-format: React component to format numbers in an input or as a text.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

heavenshell 2022/07/20

react.js

リンク

ReactのSuspense対応非同期処理を手書きするハンズオン

ReactのConcurrent Renderingで本格的に実用化されるSuspenseは、ライブラリを通して使うことになりがちでその裏側が見えにくいものです。この本では、手を動かしながら生のSuspenseの使い方を学びます。

heavenshell 2022/07/19

react.js

リンク

useEncapsulation | Kyle Shevlin

Update November 22nd, 2021: I added a recording of my CascadiaJS on this topic to the end of this post. Enjoy! Recently, I shared this tweet: 🔥 take I haven't fully thought through incoming: Every use of useEffect should be in a custom hook with a damn good name. It's frequently difficult to read & comprehend intention of the code when effects are strewn about. Better to encapsulate and provide c

heavenshell 2022/07/14

react.js

リンク

GitHub - vadimdemedes/ink: 🌈 React for interactive command-line apps

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

heavenshell 2022/07/13

react.js

リンク

Reactに有利なベンチマークを作ってみた - Qiita

皆さんこんにちは。現在、フロントエンドでは宣言的UIが大流行しており、そのためのライブラリもReactを筆頭に複数存在しています。ライブラリが複数存在するところには当然のように比較や論争が起こるものですが、UIライブラリの場合はパフォーマンスがよく焦点となります。筆者はReactの信者ですが、Reactは古株ということもあってか、最近の議論ではReactは他のライブラリと比較されるかませ犬のような役割を担うのがよく見られます。「仮想DOMは必要ない」といった類のものです。しかし、筆者の考えではReactは今でも、もっとも真剣にパフォーマンスに取り組んでいるUIライブラリです。特に、Reactはパフォーマンスを高いユーザーエクスペリエンスのための手段として捉えており、ドキュメントにもユーザーエクスペリエンスという言葉が多く出てきます。そこで、今回はReactが最も有利になるようなベン

heavenshell 2022/07/13

react.js

リンク

The new wave of React state management

The new wave of React state managementUnderstand the core probl ems state management libraries need to solve. And how the proliferation of modern libraries address them in new ways. IntroductionAs React applications grow in size and complexity, managing shared global state is challenging. The general advice is to only reach for global state management solutions when needed. This post will flesh out

heavenshell 2022/07/05

react.js

リンク

GitHub - callstack/reassure: Performance testing companion for React and React Native

heavenshell 2022/07/01

react.js

リンク

GitHub - ozanyurtsever/verbum: Verbum is a fully flexible text editor based on lexical framework.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

heavenshell 2022/06/29

react.js

リンク

ProviderタワーをRecoilに置き換える

ReactアプリケーションではProviderタワーがよく見られます。Providerタワーは、アプリの上の方で次のコードのように複数のProviderが積み重なっている状態のことです（一般的な呼称かどうかは知りません）。 const App: React.FC = () => { return ( <FooProvider> <BarProvider> <BazProvider> <MainContents /> </BazProvider> </BarProvider> </FooProvider> ); }; Providerは、コンテキストに対して値を供給する役割を担っており、コンポーネントツリー内でProviderより内側に配置されたコンポーネントからはそのコンテキストの値を参照することができます。コンテキストは、Reactにおいて外部ライブラリを使わずにステート管理（特にアプリ

heavenshell 2022/06/27

react.js

リンク

GitHub - bvaughn/react-highlight-words: React component to highlight words within a larger body of text

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

heavenshell 2022/06/22

react.js

リンク

GitHub - react-hook-form/error-message: 📋 Error message component

heavenshell 2022/06/14

react.js

リンク

GitHub - glideapps/glide-data-grid: 🚀 Glide Data Grid is a no compromise, outrageously react fast data grid with rich rendering, first class accessibility, and full TypeScript support.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

heavenshell 2022/06/08

リンク

GitHub - UgnisSoftware/react-spreadsheet-import: Import flow for Excel (.xlsx) and CSV file with automated column matching and validation.

heavenshell 2022/06/01

react.js

リンク

GitHub - onderonur/react-infinite-scroll-hook: React hook for creating infinite scroll components.

This is a hook to create infinite scroll components! Live demo is here. Basically, we need to set a sentry component to trigger infinite loading. When sentry becomes visible on the screen or it comes near to be visible (based on our config of course), it triggers infinite loading (by calling onLoadMore callback) all with the help of IntersectionObserver. sentry should be some component which will

heavenshell 2022/06/01

react.js

リンク

はてなブックマーク

タグ

関連タグで絞り込む (36)

react.jsに関するheavenshellのブックマーク (546)

お知らせ

今週のはてなブックマーク数ランキング（2025年7月第3週）

今週のはてなブックマーク数ランキング（2025年7月第2週）

今週のはてなブックマーク数ランキング（2025年7月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス