Next.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コンポーネントにおけるテスト手法の選択肢

2022/08/17 68 users 選択肢 テスト手法

サイバー攻撃を想定したクラウドネイティブセキュリティガイドラインと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コンポーネントの作... 続きを読む