react-transition-group - Qiita
react-transition-groupドキュメント react-transition-groupはReactでCSSアニメーションを扱う為のライブラリです。 見栄えのするモーション自体を提供してくれるわけではなく、CSSを適用するタイミングを提供してくれるので、自分でアニメーションのCSSを書いてアニメーションさせます。 下記の4つのコンポーネントが提供されます。 Transition CSSTransition SwitchTransition TransitionGroup 今回はcreate-react-appを使い、CSS(SCSS)はCSSModulesを使っていきます。 ※レンダリング回数削減などパフォーマンス面については扱いません。 インストール # create-react-appのインストール npx create-react-app プロジェクト名 # プロジェク
ButtonとLink、どう実装する？
ButtonとLink、どう実装する？ 2023/08/30 Encraft #6 @yoshiko_pg 1
App Router時代のゼロランタイムCSS in JSに何を使えばいいの？
はじめに こんにちは！ 犬専用の音楽アプリ オトとりっぷでエンジニアしています、足立です！ この記事では、Next.jsのReact Server Components(RSC) で使用可能なゼロランタイムCSS in JSライブラリを比較します。 目次 モチベーション 使えるライブラリたち 選定基準 選定結果 比較結果 書き味 パフォーマンス Dynamic Styling 結論 モチベーション みなさん、Next.jsのReact Server ComponentsのStyleをどうやるか問題に悩んでおられますね？ 私もどれを使えばいいのかわからずNext.js公式に見に行くと、App Routerで使用できるものとして、以下のライブラリを上げています。 が、React Server Componentsではnot supportedと記載されており、まだまだ未整備な状況のようです。
コンポーネントベースで開発する時の CSS の書き方とコンポーネントの分類 (自己流)
React や Svelte でコンポーネントベースで開発するとき特有の CSS ノウハウってあんまり効かない気がする Twitter に書いたら反響があったので、自己流だけどまとめておく React Component の管理単位と、CSS としてのレイアウトの管理ポリシーは違うよね、みたいな話をマークアップエンジニアに時折されるが、そんな話は無視して完全一致させる。そういう星のもとで開発している コンポーネントの分類 ロジックコンポーネント レイアウトコンポーネント ブロックコンポーネント インラインコンポーネント 定義 ロジックコンポーネント Provider や hooks などのデータ処理だけを扱い、子に渡すコンポーネント 一切の CSS や DOM 実体を持たない レイアウトコンポーネント レイアウトコンポーネントは複数の子ブロックコンポーネント(または slot)を持ち、子ブ
CSS Modulesの歴史、現在、これから - Hatena Developer Blog
マンガメディア開発チームの id:mizdra です。半年ほど前から「フロントエンドエキスパート」という肩書きをもらい、社内でフロントエンドの啓蒙活動をしています。具体的にどんな活動をしているかについては、社内のポッドキャストで少し話しましたので、興味があれば聞いてみてください。 developer.hatenastaff.com 最近、私はReactを採用する社内プロダクトでのCSSの書き方を検討していました。最終的にそのプロダクトでは、CSS Modulesを採用するに至りました。しかしその過程で、CSS Modulesのメンテナンス体制に対して懸念があり、将来的な存続を危ぶむ声が界隈にあることを知りました。 ただし、実際にメンテナンス体制について調べてみたところ、万全ではないものの引き続きメンテナンスがされていて、使用もできることが分かりました。そこで、今回はCSS Modulesに
型安全な CSS Modules？「vanilla-extract」
はじめに絶賛、CSS Modules を使ったプロジェクトで作業している kimizuy です。最近、vanilla-extract という良さげな CSS フレームワークの 1.0.0 がリリースされたので、本記事では CSS modules と vanilla-extract を比較して、この新しいフレームワークの利点について書きたいと思います。 CSS Modules で作業するときの辛さCSS Modules はローカルスコープがデフォルトの CSS フレームワークです。CSS の名前衝突の問題を回避できて、これ自体はとても強力な機能です。 ただ問題なのは、作業する際に CSS ファイルでクラスネームを追加したり変えたりしてもコンポーネント側でエラーが出ないので気づけないこと、これに尽きます。 つまり、コンポーネント側でクラスネームが間違っていてもエラーが出ないため、実行するまでス
Reactにおけるスタイリング手法まとめ
開発初期に「どのスタイリング手法でいくべきか」などとよく悩むと思います。 筆者ならそこで「悩むよりもとりあえず書き始めよう」と言いたいところですが、規模が大きいプロジェクトなどでは途中でスタイリング手法を変えようとすると大きな負担になったりと柔軟な変更ができないことがあります。 だがしかし！！ Google先生で調べようものなら 「CSS-in-JSをやめた理由」 「CSS Modulesをやめた話」 などなど... じゃあ何ならええねん！ そもそもReactにおけるスタイリング手法は多種多様で、時代によって流行が移り変わっていくものでもあり、Googleのトップに来るのは古い情報ばかりです。 そんな悩めるあなたにこの記事では筆者が利用したことのあるスタイリング手法を、CSS-in-JSやCSS Modulesに限らず、筆者の使用感もふまえて紹介していきます。 古い情報だけでなく、zero
React Component 分業の覚書
フロントエンドを Next.js 化する機会が多くなってきた昨今。いざ取り組むにしても、スタイリング込みで実装出来るエンジニアが不足気味ではないでしょうか？また、縦割り分業している現場ではこれまで、マークアップ（フロントエンド）エンジニアが html + css を納品し、それを元にサーバーサイドエンジニアがテンプレートエンジンに組み込むという業務フローも少なくありませんでした。 この様な業務フローの場合、同じリポジトリで作業してもらうという事が難しいこともあります。Next.js 移行期のこれからも同様のことが多々起きると予想しており、完全分業するうえでの最適化を考える必要があります。この件について少しまとめたくなったので、メモ書きとして残します。 前提条件 以下の座組みは React Component 分業で最適だと考えている組み合わせです。マークアップエンジニアはこれまでと変わらず
Next.jsにおけるCSSの取り扱い方法 2020年9月版
はじめに CSSとしたがNext.jsにおけるスタイルの取り扱い方について。 公式ドキュメント見れば基本的なことはわかるのだがIssuesやDiscussionsを追わないと分かりにくいことも多いのでまとめる。 2020年9月版としたのはすぐにでも動きがありそうなため。将来的なこともなるべく記載する。 追記 2020/12/01 時点で特に情報が古くなっていないことを確認しています。 2020/12/10 Tailwind Support について記載しました。 Build-in CSS Support Basic Features: Built-in CSS Support | Next.js デフォルトでCSSのサポートがされている。かつては @zeit/next-css を導入する必要があったが今は必要ない。 Sassについても Before you can use Next.js'
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.jsとCSS - Qiita
Styled-componentsでEmmetが効かない - Qiita