はじめに
こんにちは!!@Sicut_studyです!
こちらの記事が嬉しいことに多くの方に見ていただきました。
そこでReactが多くの初心者の方に注目されているんだなということを実感させられました。
私の記事では何度も言っている通り
というのが大事になってきます。そこで 「Reactアプリ100本ノック」 というのに挑戦していこうかと思います。徐々に難易度を挙げていってどこまでお題を作りきれるかの腕試しでやっていただければと思います。
後半はかなり難しい実用的なものを作成することになるため、途中まで行うことでも1つクリアするたびに成長があるはずです。 作りたいものがない という方はぜひ活用してみてください
Reactアプリ100本ノックルール
- 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ(例: Redux, Next.js, Styled Componentsなど)を組み合わせて使用することは自由
- TypeScriptを利用する
01. Hello World
問題
"Hello World" React コンポーネントの作成
目的
Reactを使用して、画面中央に"Hello World"というメッセージを表示するコンポーネントを作成します。
達成条件
- Reactの新しいプロジェクトが正しくセットアップされていること。
- 画面に"Hello World"というテキストが中央に表示されていること。
実際に解いてみた
利用技術
- React
- TypeScript
- Vite
- Emotion
解答時間 : 3分
簡単なのが自明だったので普段あまり利用しないEmotionで中央寄せしてみました
はじめは簡単なお題が多いので利用したことのないライブラリなどを積極的に利用して難易度をすこし上げてみるのも良いかと思います。
次のお題
おわりに
React100本ノックの記事を地道に上げていこうと思いますので、一緒に挑戦したい方は @Sicut_study をフォローいただけるととてもうれしく思います。
ここまで読んでいただけた方はぜひいいねとストックよろしくお願いします。
少し宣伝します🔥🔥🔥🔥🔥
これからエンジニアになろうとしている人を本気でコーチングして3か月の期間で立派なエンジニアにするようなチャレンジをしてみたいなと考えております。
もし、本気でエンジニアを目指してコーチングを受けてみたいという方がいれば、Twitterに「プログラミング教えてほしいです」みたいなリプライ送っていただけたらなと思います!!
以上です。
今週もプログラミング頑張りましょう!
おすすめ記事
参考