実績作成【Reactの中級】(Techpit)2巡目

Typescript,CSS in JS(Emotion)

• EmotionのTheming機能を利用して、色切り替えができるように試みる【引き続き検証】
  ThemeProviderにthemeを設定して、useTheme hookを使いtheme の値を取り出すところまではできました。公式ドキュメントをを見ながら、可能な方法で書きました。

import React from "react";
import { css, useTheme } from "@emotion/react";
<!--省略-->
const Button: React.VFC<Props> = ({ status, onStart, onRestart, onStop }) => {
  const theme = useTheme();
  return (
    <div>
      {status === GameStatus.gameover && (
        <button
          css={[
            btn,
            btnGameover,
            {
              background: theme.colors.buttonGameOverColor,
              "&:hover": {
                background: theme.colors.buttonGameOverColor,
              },
            },
          ]}
          onClick={onRestart}
        >
          gameover
        </button>
      )}
	<!--省略-->
    </div>
  );
};

• スタイルを整える【まだ作業中】

そろそろ次の課題を考える

下記の順番で次頑張ろうかなぁと思ってます。

1. 【Techpit】React × TypeScript でマークダウンエディタを作りながらモダンなフロントエンド開発に入門しよう！
   https://www.techpit.jp/courses/111
2. 【Udemy】ReactでTrelloクローンアプリケーションを作ってReactをマスターしよう！
   https://www.udemy.com/share/105BZc3@4-j1Y_BrEbGNpqMlC_-CVp-5bQPo77G3mDEKexY6RkPHR3KyG0xVDVBTnN0YPsn7Ww==/
3. 慣れてきたら自主制作