世界を旅して人生を楽しもう。Componentsを試してみようReactを中心とするコンポーネントベースのWebアプリケーション開発は、CSSをモジュール化しようとする動きにも影響を与えています。Componentsを簡単に試してみましょう。関連記事はじめにCSSのモジュール化の流れは自然な発想です。そもそもCSSはグローバルスコープであるため、あるCSSファイルに書いた内容は全てのCSSファイルに影響を及ぼします。誰かが書いたCSSを見てどれがどこに影響を及ぼしているかの全容を把握するのはそもそも難しいのです。そこで近年、SASS等のCSSフレームワークやBEM等の命名規約を用いることでローカルスコープっぽく扱おうとするモジュール化の動きが盛んになりました。Modulesがよく使われるようになってきました。Webpackのcss-loaderのmoduleオプションを有効にすることで、CSSのクラス名を一意に変換し、あるReactコンポーネント用のCSSファイルが他のCSSファイルに影響を及ぼすことを回避できるようになりました。Componentsです。Componentsを適用して違いを見ていきましょう。Modulesを使ってcreate-react-appで自動生成されたサンプルアプリケーションを書き直してみましょう。Modulesを有効化しましょう。Modulesで書き直します。Modulesで書き直しましょう。startOKですね。CSSのクラス名に一意の値が自動的に設定されています。Componentsを使ってcreate-react-appで自動生成されたサンプルアプリケーションを書き直してみましょう。準備create-react-appでサンプルアプリケーションを作り、必要なパッケージをインストールしましょう。styled-componentsindex.js(old)index.cssの内容をinjectGlobalを使って書き直します。Componentsを使って書き直しましょう。Componentsを使って書き直しましょう。index.cssの内容はcreateGlobalStyleを使って書き直します。start表示もアニメーションもOKです。CSSのクラス名には一意の値が自動的に設定され、スタイルが正しく適用されています。Componentsをざっくりではありますが、理解できたのではないでしょうか。新しいプロジェクトでは積極的に使っていきましょう。最新の記事KD世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。Layoutで4カラムのレイアウトを一瞬で作る方法4カラムのレイアウトは基本的なレイアウトであり、あらゆる場面で必要になります。Layoutは今...PythonでWebスクレイピング入門(Scrapy+Selenium編)機械学習が流行している近年において、データを集める手段としてのWebスクレイピングもまた注目を集めています。5日間ブートキャンプElectronに入門したいエンジニア向けにこのブログの記事の中から厳選した記事を紹介します。)フルスタックエンジニアの需要はスタートアップであればあるほど強いものです。エンジニアにとってフロントエンドとバッ...FacebookログインをExpressとPassportでサクッと実装する方法ソーシャルログインの実装はスタートアップ起業にとっては無くてはならないログイン実装の代替となっています。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。AuthorKD世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。0.0010このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。最新の記事KD世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。Layoutで4カラムのレイアウトを一瞬で作る方法4カラムのレイアウトは基本的なレイアウトであり、あらゆる場面で必要になります。Layoutは今...PythonでWebスクレイピング入門(Scrapy+Selenium編)機械学習が流行している近年において、データを集める手段としてのWebスクレイピングもまた注目を集めています。5日間ブートキャンプElectronに入門したいエンジニア向けにこのブログの記事の中から厳選した記事を紹介します。)フルスタックエンジニアの需要はスタートアップであればあるほど強いものです。エンジニアにとってフロントエンドとバッ...FacebookログインをExpressとPassportでサクッと実装する方法ソーシャルログインの実装はスタートアップ起業にとっては無くてはならないログイン実装の代替となっています。