GitHub - missive/emoji-mart: 🏪 One component to pick them allYou 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
React19はforwardRef絡みの長ったらしい型記述を無くしてくれる - Qiita
TL;DR （3行まとめ） React 18 までは、TypeScript で forwardRef するために、ref の型を書いたり、引数の順番・型引数の順番を気にしたり、めんどくさかった React 19 では、forwardRef が不要になり、普通に ref Prop を受け取れる TypeScript 型の記述量がかなり減って、書き間違いやすい部分も削減された React18までの書き方 React 18 以前では、ref Prop を指定できるコンポーネントを書くために、forwardRef を使う必要がありました。 生の button と同じように、属性、ref を設定できるカスタマイズ性を保つ カスタマイズ性を保ったまま、CSS Modules でスタイルを設定する という要件を満たす「button をラップしたカードUIコンポーネント」を作成するためには、以下のようなコ
useEffect: 基礎から使用すべきでない例まで
はじめに useEffect について、きっちり調べようと思い調べてみた。公式ドキュメントのまとめ記事になっている。 useEffect 基礎編 useEffect とは Effect を用いるとレンダリングの後にコードを走らせることができ、React 外のシステムの要素と同期することが可能になる。 なぜ必要か まず、React コンポーネントの二種類のロジックについて整理する。 レンダリング レンダリングをする際、コードはpropsとstateを受け取り、変換し、画面で表示したいJSXを返す。コードのレンダリングは結果のみを計算するべきでそれ以上のことをするべきではない。 イベントハンドラ イベントハンドラはコンポーネントの中にある関数で、Input Field の更新やユーザを他の画面へ誘導したり等、単純な計算以上の役割を担う。イベントハンドラはユーザの行動（ボタンクリック等）による、
React.ComponentProps 型を積極的に使おう
Atomic Design でいう Atoms に相当する、汎用コンポーネントについての小話です。次の様に Props 型定義を用意し、解説している記事をよく見かけます。<input />タグを使わずコンポーネント化している理由は style を施すためかと思いますが、このコンポーネントが受け取れる Props は限定的で、メンテナンスコストが高いためお勧めできません。 type Props = { value: string; onChange?: React.ChangeEventHandler<HTMLInputElement> onBlur?: React.FocusEventHandler<HTMLInputElement> } export const Input = ({ value, onChange, onBlur }: Props) => ( <input value=
How React 18 Improves Application Performance - Vercel
Learn how concurrent features like Transitions, Suspense, and React Server Components improve application performance. React 18 has introduced concurrent features that fundamentally change the way React applications can be rendered. We'll explore how these latest features impact and improve your application's performance. First, let's take a small step back to understand the basics of long tasks a
Reactの公式ドキュメントを読む
2023/3に正式リニューアルされたreactのドキュメントを改めて読む。 https://react.dev/learn のLEARN REACTの部分で気になったところをまとめていく。 Describing the UI Your First Component 特になし Importing and Exporting Components componentをdefault exportとnamed exportどっちにするかは、チームで統一する場合もあるが、特に公式でどちらかを推してるわけではない。 Writing Markup with JSX JSXの利点: ロジックにマークアップをsyncできる。マークアップ上のコンポーネントごとにロジックを分離できる HTMLをJSXに変換してくれる便利ツールがある。class -> classNameとかの属性名変換もやってくれる Jav
バックエンド Web API に管理画面/管理機能を追加するアーキテクチャパターン - valid,invalid
プレゼンテーションレイヤ、いわゆるフロントエンドがクライアントサイドで実装・実行されるアーキテクチャ (注 1) において、管理画面/管理機能をあとから追加する際にどのような実装パターンがあるのかを整理してみます。 注 1: Presentation Domain Separation の実践の中でも、物理的にプレゼンテーションロジックとドメインロジックを分離しているアーキテクチャです。 用語の整理 プレゼンテーションレイヤ 三層アーキテクチャにおける、システムの利用者へユーザインターフェイスを提供する層です。本記事では"フロントエンド"とほぼ同義で使います。 OSI 参照モデルの第六層ではないです。 バックエンド Web API とは プレゼンテーションを持たない Web API (HTTP プロトコルを用いてネットワーク越しに呼び出すアプリケーション) とします。 プレゼンテーションレ
React Adminの感想 - valid,invalid
marmelab.com A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design. Previously named admin-on-rest. Open sourced and maintained by marmelab. React Admin 管理画面を作るのに最適化された React アプリケーションフレームワーク France のMarmelab社によってメンテナンスされている OSS がコア Enterprise Edition もある OSS として公開していない便利な private modules が使えたり、開発サポートが受けられ
React.js in patterns
Check out "Do you speak JavaScript?" - my latest video course on advanced JavaScript. Language APIs, Popular Concepts, Design Patterns, Advanced Techniques In the Browser Long time I was searching for a good front-end framework. Framework that will help me write scalable and easy to maintain UI. Even though React is just a library for rendering it comes with so many benefits that I can easily say
React.jsを触った感想 - axross blog
2014-12-25 React.jsを触った感想 Javascript React.js Virtual DOM クライアントサイドJS ここ二週間ほどReact.jsを触っていて、業務でも今の案件で使うことにしたので、簡単な紹介と、触ってみた感想。 React.jsについて A JavaScript library for building user interfaces | React React.jsは、Facebook製のクライアントサイドJSフレームワーク。 Angular.jsなどの並べられがちだけど、ああいう俗にいう「MV*」でフルスタックなものとは違って、View層に特化している。 3つの特徴 UIに特化 ここでいうUIとは、UI部品のことで、つまりは複数のDOMを内包する1つの部分的なDOMツリーのこと。これをReactではComponentと呼んでいる。 このComp
The Mental Model That Finally Helped Me Understand ReactJS
TL;DR I struggled for a long time trying to understand React. This is what I wish someone had told me. What is React?How does React compare to Angular, Ember, Backbone, et al? How do you handle data? How do you contact the server? What the heck is JSX? What is a "component"? Stop. Stop it right now. React is MAINLY THE VIEW LAYER. React is mentioned in the same breath as other Javascript framework
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
