「モダンJavaScriptの基本から始めるReact実践の教科書」の感想・備忘録2

モダンJavaScriptの基本から始める　React実践の教科書

posted with ヨメレバ

じゃけぇ（岡田　拓巳） SBクリエイティブ 2021年09月18日頃

CSS

ReactでのCSSの書き方

6種類くらい書き方がある。

インライン
style属性にオブジェクトで指定する
CSS Modules
xxx.modules.cssで定義
Styled JSX
styled-jsxライブラリを使う
styled components
styled-componentsライブラリを使う
Emotion
@emotion/reactと@emotion/styledライブラリを使う
Tailwind CSS

CSS Modules

.title {
  color: red;
}
// SASSを使う場合はnpm install node-sass

import classes from './CssTest.module.css';

function CssTest() {
  return (
    <>
      <h1 class={classes.title}>CssModules</h1>
    </>
  );
}

export default CssTest;

Styled JSX

npm install styled-jsxでインストール

function CssTest() {
  return (
    <>
      <style jsx="true">{`
        h2 { color: blue }
      `}</style>
      <h2>Styled JSX</h2>
    </>
  );
}

export default CssTest;

styled components

npm install styled-componentsでインストール

import styled from 'styled-components';

function CssTest() {
  // コンポーネント名の先頭は大文字でなければならない
  const STitle = styled.h3`
    color: green;
  `;
  return (
    <>
      <STitle>styled components</STitle>
    </>
  );
}

export default CssTest;

Emotion

npm install @emotion/reactでインストール
※ styled components方式で記述する場合は@emotion/styledも必要。

/** @jsxImportSource @emotion/react */はJSX pragmaと呼ばれる記述であり、Emotionを使うために必要なものと思っていればよい
Emotionではインライン・Styled JSX・styled componentsと同じ書き方が用意されている
※css関数に渡す引数が、インライン方式ではオブジェクト、Styled JSX方式ではタグ付きテンプレートリテラルになるので注意
Styled JSX方式ではSCSSもそのまま使うことができる
ルールを決めずに運用してしまうと複数の記述方法が混在してしまう

/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
import styled from "@emotion/styled";

function CssTest() {
  /*Emotion(インライン方式)*/
  const pStyle = css({
    color: 'pink',
  });

  /*Emotion(styled JSX方式)*/
  const pStyle2 = css`
    color: orange;
  `;
  
  /*Emotion(styled components方式)*/
  const SP = styled.p`
    color: purple;
  `;
  return (
    <>
      <p css={pStyle}>Emotion(インライン方式)</p>
      <p css={pStyle2}>Emotion(styled JSX方式))</p>
      <SP>Emotion(styled components方式)</SP>
    </>
  );
}

export default CssTest;

Tailwind CSS

導入手順

npm install --save-dev tailwindcss
Tailwind CSSのv2まではpostcssとautoprefixerも必要だったが、v3では不要になった
npx tailwindcss init
生成されたtailwind.config.jsを修正
content: [ "./src/**/*.{js,jsx,ts,tsx}", ],
index.cssに追加
@tailwind base;
@tailwind components;
@tailwind utilities;
npm start

function TailwindTest() {
  return (
    <>
      <div className="border border-gray-400 rounded-2xl p-2 m-2 flex justify-around items-center">
        <h1 className="bg-blue-500">TailwindTest</h1>
        <button className="bg-gray-300 border-0 p-3 rounded-md hover:bg-gray-400 hover:text-white">ボタン</button>
      </div>
    </>
  );
}

export default TailwindTest;

CDNを使う場合

public/index.htmlに<script src="https://cdn.tailwindcss.com"></script>を追加する。
特定のコンポーネント内だけで使う場合はuseEffectを使って読み込む。

useEffect(()=>{
  const head = document.querySelector('head');
  const script = document.createElement('script');
  script.src = 'https://cdn.tailwindcss.com';
  head.appendChild(script);
}, []);