react-to-web-component を使って React コンポーネントを Web Components に変換する

2024/10/20 24 users ライブラリ HTML Web Components 要素

react-to-web-component を使って React コンポーネントを Web Components に変換する 2024.10.20 @r2wc/react-to-web-component は React コンポーネントを Web Components に変換するためのライブラリです。このライブラリを使用することで、React コンポーネントを任意の HTML 要素として使用することが可能になります。 続きを読む

CSS から React コンポーネントを生成する MistCSS

2024/03/23 52 users フロントエ CSS 昨今 パフォーマンス コンセプト

CSS から React コンポーネントを生成する MistCSS 2024.03.23 MistCSS は CSS in JS になぞらえた JS from CSS というコンセプトで、CSS から React コンポーネントを生成するツールです。ピュアな CSS を記述できるので、学習コストが低い、パフォーマンスに影響がないといったメリットがあります。 昨今のフロントエ... 続きを読む

チームで同じような React コンポーネントを書く

2024/02/12 13 users チーム

はじめに 「eslint-plugin-react の plugin:react/recommended に含まれていないルールにも有効なものがあるよ！みんなで同じようなコンポーネント書いて、レビューを楽にして保守性も上げよう！」という内容の記事です。 この記事では React の関数コンポーネント、TypeScript、Prettier を使っている前提で書いていま... 続きを読む

React コンポーネントの定義の仕方によって VSCode の定義元ジャンプの挙動が変わる - mizdra's blog

2022/12/03 7 users vscode TypeScript 挙動 関数宣言 定義

この記事は「はてなエンジニア Advent Calendar 2022」の3日目の記事です。2日目は id:pokutuna さんの「Slack チャンネルのロボット帝国化を防ぐ feed-pruning-proxy」でした。 blog.pokutuna.com さて、TypeScript で React コンポーネントを定義する時、皆さんはどういう書き方をしてますか? 関数宣言/アロー関数どち... 続きを読む

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

2022/08/12 60 users 制御 方法

一方「制御コンポーネント」として作成された<Checkbox>コンポーネントの例を見てみましょう。React Hook Form で制御コンポーネントを扱うとき、<Controller>コンポーネントやuseControllerフックを中継する必要があります。冗長ですが、外部ライブラリなど、デザインシステムがそもそも制御コンポーネントで作られてい... 続きを読む

一番文句言われなさそうな React コンポーネントの書き方

2021/04/15 15 users 書き方 VFC React children アロー関数

最近 React コード生成機を作っていて「一番文句言われなさそうな React コンポーネントの書き方ってなんだ…？」と改めて疑問に思ったので考えてみました。 結論から言うと以下の形をデフォルトにするのが良さそうかなと思いました。 function vs. アロー関数 -> アロー関数 型は基本的に VFC でつけて、 children が欲... 続きを読む

WAI-ARIA 対応のアクセシブルなタブ UI を React で実装する ::ハブろぐ

2015/06/13 30 users 二の次 アクセシブル ツッコミ WAI-ARIA React

タブ UI のアクセシビリティ対応 この記事は、下記の点に留意してご覧いただきたい。 タブ UI におけるアクセシビリティ対応（主に WAI-ARIA）の参考実装であること React コンポーネントとしての機能性は二の次のサンプルであること アクセシビリティ実装についてのツッコミは歓迎であること ひさびさにPCキーボード的なアクセシビリティ対応が必要そうな性質のサービスを開発することになったので... 続きを読む