LoginSignup
121
116

【Reactアプリ100本ノック】01 Hello World

Last updated at Posted at 2023-10-17

bandicam 2023-10-18 05-44-01-573.jpg

はじめに

こんにちは!!@Sicut_studyです!

こちらの記事が嬉しいことに多くの方に見ていただきました。
そこでReactが多くの初心者の方に注目されているんだなということを実感させられました。

私の記事では何度も言っている通り

最速で学ぶならとにかく何か作る

というのが大事になってきます。そこで 「Reactアプリ100本ノック」 というのに挑戦していこうかと思います。徐々に難易度を挙げていってどこまでお題を作りきれるかの腕試しでやっていただければと思います。

後半はかなり難しい実用的なものを作成することになるため、途中まで行うことでも1つクリアするたびに成長があるはずです。 作りたいものがない という方はぜひ活用してみてください

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

  • 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ(例: Redux, Next.js, Styled Componentsなど)を組み合わせて使用することは自由
  • TypeScriptを利用する

01. Hello World

image.png

問題

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

目的

Reactを使用して、画面中央に"Hello World"というメッセージを表示するコンポーネントを作成します。

達成条件

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

実際に解いてみた

利用技術

  • React
  • TypeScript
  • Vite
  • Emotion

解答時間 : 3分

簡単なのが自明だったので普段あまり利用しないEmotionで中央寄せしてみました
はじめは簡単なお題が多いので利用したことのないライブラリなどを積極的に利用して難易度をすこし上げてみるのも良いかと思います。

次のお題

おわりに

React100本ノックの記事を地道に上げていこうと思いますので、一緒に挑戦したい方は @Sicut_study をフォローいただけるととてもうれしく思います。
ここまで読んでいただけた方はぜひいいねストックよろしくお願いします。

少し宣伝します🔥🔥🔥🔥🔥

これからエンジニアになろうとしている人を本気でコーチングして3か月の期間で立派なエンジニアにするようなチャレンジをしてみたいなと考えております。

もし、本気でエンジニアを目指してコーチングを受けてみたいという方がいれば、Twitterに「プログラミング教えてほしいです」みたいなリプライ送っていただけたらなと思います!!

以上です。
今週もプログラミング頑張りましょう!

bandicam 2023-10-04 20-58-54-525.jpg

おすすめ記事

参考

121
116
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
121
116