はじめに
ゆかっしゅです。
2021年に事務職からデザイナー/コーダーにジョブチェンジをし、現在はフロントエンドエンジニアにスキルアップするべく、モダンフロントエンドを学習しています。
ReactやTypeScriptの基礎学習は終了したのに、なかなか0から自分だけでアプリを作れないので手を動かすべく「Reactアプリ100本ノック」 に挑戦してみようと思います。
Reactアプリ100本ノックルール
- 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ（例: Redux, Next.js, Styled Componentsなど）を組み合わせて使用することは自由
- TypeScriptを利用する
- なるべくChatGPTなどのAIツールに頼らない（自分独自ルール）
01. Hello World
問題
"Hello World" React コンポーネントの作成
目的
Reactを使用して、画面中央に"Hello World"というメッセージを表示するコンポーネントを作成します。
達成条件
1. Reactの新しいプロジェクトが正しくセットアップされていること。
2. 画面に"Hello World"というテキストが中央に表示されていること。
実際に解いてみた
利用技術
- React(19.0.0)
- TypeScript(5.0)
- Next.js(15.3.1)
- Tailwindcss(4.0)
- Vercel
解答時間:5分
こういう上下中央寄せの場合、皆さんはどんなCSSあててますか。
昔の職場で極力margin-autoとかを使わないで、っていう方針だったので、
flexにしてカラムにしてjustify-contentとalign-itemsにしました。
リンク
おわりに
三日坊主の私が本当に100もできるのか....。
頑張ります。