タグ Reactコンポーネント
人気順 10 users 50 users 100 users 500 users 1000 usersNext.jsのApp Routerを学ぶ際、shadcn/uiが参考になったという話 - Qiita
2024/05/11
58 users
Qiita
shadcn
RSC
App Router
コピペ
Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。 shadcn/uiは、フレームワークやライブラリではなく、コピペで利用できるReactコンポーネントのサンプル集という立ち位置になっています。Tailwind CSSでデザインされており、React Server Components(RSC)にも... 続きを読む
ブラウザーにChromeのデベロッパーツールを埋め込めるReactコンポーネントを作ってみた
2024/04/10
18 users
デベロッパーツール
デバッグ
Rea
ブラウザー
Chrome
とてもニッチな用途で使えるコンポーネントですがその場のiframeのデバックができるReactコンポーネントを作ってみました！ まずはこちらのポストをご覧ください！ このポストではChromeのデベロッパーツールを開いているわけではなく、ブラウザー内に直接デベロッパーツールが埋め込まれています！ 今回はこのようなRea... 続きを読む
ReactコンポーネントでレンダリングされるHTML要素の種類を変更可能にするためのパターン
2023/06/04
19 users
UIコンポーネントライブラリ
React
コンポーネント
ReactのUIコンポーネントライブラリを使っていると、あるコンポーネントによってレンダリングされるHTML要素の種類を変更したくなる場面がある。たとえば、通常はbutton要素としてレンダリングされるButtonコンポーネントを使うときに、代わりにa要素を使ってレンダリングしたいというケース。 as prop そのような場合、... 続きを読む
useEffectをやめて、Suspenseを使おう
2023/05/05
132 users
Suspense
useEffect
SWR
React
開発
Reactコンポーネントの開発時、データフェッチは欠かせません。 SPAで開発を行う時、あなたも含めてuseEffect()を使ったことがあるはずです。 あなたがSWRやReact Queryの代わりにuseEffect()を使う理由は、いくつかあるのでしょう。 そんな方のために、Reactが提供する<Suspense>を使ってデータフェッチを行う方法を紹... 続きを読む
ReactコンポーネントをブルブルさせながらReduxのパフォーマンスチューニング - カミナシ エンジニアブログ
2022/11/29
10 users
パフォーマンスチューニング
redux
state
カミナシ
はじめに こんにちは、カミナシ社でソフトウェアエンジニアをやっている浦岡です。 我々は「ノーコードでユーザー独自の現場アプリを作成できる」サービスを開発しています。 そのサービスのフロントエンドの開発にはReact×Reduxを使っているのですが、 サービス特性のため「Reduxのstateがファットになりがち」であった... 続きを読む
Reactコンポーネントにおけるテスト手法の選択肢
サイバー攻撃を想定したクラウドネイティブセキュリティガイドラインとCNAPP及びSecurity Observabilityの未来 続きを読む
React Server Components 総まとめ
2021/02/11
75 users
React Server Components
デモ
概要
先日、React Server Componentsについてまとめる機会がありました。 この記事では、React Server Componentsの概要と、デモを触る中で感じたことについてご紹介します。 React Server Componentsとは React Server Componentsは、Reactコンポーネントをサーバーサイドでレンダーする新しい技術です。 一部のコンポーネン... 続きを読む
Reactコンポーネントの定義にFCではなくVFCを使う - いけだや技術ノート
2020/12/18
21 users
VFC
定義
イケダ
技術ノート
[RFC] React 18 and types-only breaking changes · Issue #46691 · DefinitelyTyped/DefinitelyTyped [@types/react] add VoidFunctionComponent type which does not accept "children" by awmottaz · Pull Request #46643 · DefinitelyTyped/DefinitelyTyped https://react-typescript-cheatsheet.netlify.app/docs/b... 続きを読む
スクロールしてビューポートに要素が入る際に、アニメーションを適用するReactコンポーネント「react-genie」 | コリス
2019/10/08
22 users
ビューポート
コリス
アニメーション
Apple
要素
スクロールしてビューポートに要素が入る際に、さまざまなアニメーションを適用するためのReactコンポーネントを紹介します。Appleのプロダクトページなどで見かけるようなアニメーションが揃っています。 react-genie -GitHub react-genieの特徴 react-genieのデモ react-genieの使い方 react-genieの特徴 react-genie... 続きを読む
フォームのinput要素に電話番号・日付・時間・金額など、数字のフォーマットを定義できるスクリプト -Cleave.js | コリス
2019/02/27
72 users
コリス
Clea
input要素
スクリプト
フォーマット
クレジットカード番号・電話番号・日付・時間・金額などを入力するフォームのinput要素に、数字を区切ったり、記号文字を加えたり、入力する数字のフォーマットを簡単に定義できる軽量スクリプトを紹介します。 単体のスクリプトとしてだけでなく、Reactコンポーネント、AngularJSディレクティブでも利用できます。 Clea... 続きを読む
ハンバーガーメニューを簡単に実装できる、プレーンなHTML/CSSとReactコンポーネント -Animated Burgers | コリス
2019/02/06
147 users
コリス
コピペ
アニメーション
CSS
カスタマイズ
プレーンなHTMLとCSS、またはReactコンポーネントとして利用可能なハンバーガーメニューを紹介します。 コピペで簡単に利用でき、サイズやカラーのカスタマイズも簡単です。ハンバーガーメニューのアニメーションもさまざま...記事の続きを読む 続きを読む
Reactコンポーネントをnpmパッケージとして公開、さらにGitHub pagesにDemoページを公開する手順 | ichimaruni-design
2017/04/12
10 users
ichimaruni-design
npmパッケージ
手順
Reactコンポーネントをnpmパッケージとして公開、さらにGitHub pagesにDemoページを公開する手順 2017年04月11日 WEB制作 フロントエンド , React.js , npm 前回の記事でもご紹介させていただいているのですが、Nimbus-jqueryというCSSフレームワークとNimbus-reactというReactコンポーネントライブラリをnpmに公開したので、その際... 続きを読む
ReactでTDD（テスト駆動開発）を始めよう : 環境構築からテスト作成、機能実装までの詳解ガイド | プログラミング | POSTD
2016/06/17
356 users
TDD
React
POSTD
落とし穴
プログラミング
最小限の設定のTDD手法を使い、「何をテストすべきか？」から、よくある落とし穴の避け方まで、Reactコンポーネントをテストする方法を学びましょう。最小限の設定のTDD手法を使い、「何をテストすべきか？」から、よくある落とし穴の避け方まで、Reactコンポーネントをテストする方法を学びましょう。 導入 まず、 React を触ったことがあり、更にはいくつかのテストも書いた経験があるとしましょう。そ... 続きを読む
Reactコンポーネントをnpmパッケージとして開発する - Hatena Developer Blog
2016/04/09
193 users
アドホック
npmパッケージ
amagitakayosi
2016 - 04 - 09 Reactコンポーネントをnpmパッケージとして開発する こんにちは！ブログチームの id:amagitakayosi です。 今回は、業務で書いた小さなReactコンポーネントをnpmパッケージとして分離した話をします。 今回公開するパッケージ 実装方針 なぜnpmパッケージにするのか 他のコンポーネントの影響で壊れることを防げる アドホックな修正の積み重ねで複雑に... 続きを読む
大規模Reactアプリケーションを構築するためのベストプラクティス | インフラ・ミドルウェア | POSTD
2015/06/17
347 users
React
POSTD
フランケンシュタイン
コンポーネント
この記事では、UI不和を最小限にしながら、コードベースをスケーリングするために役立った技法とベストプラクティスを紹介します。また、一般的なコンポーネントのデザインパターンについて、いくつか説明します。Sift Scienceで製作にReactを使い始めてからほぼ1年になりました。その間、Backbone+Reactというフランケンシュタインのような複合アプリケーションを、Reactコンポーネントか... 続きを読む
React.jsの最新版「React v0.13」リリース。ECMAScript 6のClassをサポート、Reactをさらに高速にしていくと宣言 － Publickey
2015/03/12
28 users
ECMAscript
Publickey
React
宣言
React.jsの最新版「React v0.13」リリース。ECMAScript 6のClassをサポート、Reactをさらに高速にしていくと宣言 Reactは仮想DOMと呼ばれる仕組みによって高速にHTMLの動的な書き換え機能などを提供し、Webアプリケーションのフロントエンド部分の構築を支援してくれるJavaScriptライブラリです。 React v0.13では、Reactコンポーネントの作... 続きを読む