【React】アプリ100本ノックやってみた 001 Hello World

はじめに

Reactでアプリを作る経験を積みたいと思っていたところ、以下の記事を見つけました。

せっかくなので、できる限り挑戦していきたいと思います。

ルール・問題・達成条件は上記の記事から引用します。

Reactアプリ100本ノックルール

React、TypeScriptを使用する
その他のツール・ライブラリの使用は自由

001.Hello World

問題

"Hello World" React コンポーネントの作成

達成条件

1. Reactの新しいプロジェクトが正しくセットアップされていること。
2. 画面に"Hello World"というテキストが中央に表示されていること。

解いてみた

完成品

ソースコード

利用技術

• React
• TypeScript
• Vite
• Emotion
• GitHub Actions

解答時間：3時間程度

感想

課題の内容自体は簡単だったため、Emotionの使用とGitHub Actionsでのデプロイに挑戦しました。
Emotionがなかなか効かず、解答時間の98%はそれに費やしました。。

Emotionの件については別途まとめました。

おわりに

不定期ですが今後も少しずつ100本ノックに挑戦していきたいと思います。

参考

Emotion

Vite