【エクササイズ】CSSを反映させたReactコンポーネントを作る

課題
  • Reactコンポーネントを表示させる
  • CSSを使ってReactコンポーネントにスタイルとあてる
  • GitHubに用意した課題の内容を確認して、課題クリアがこの記事でのゴール

課題内容は以下の課題レポジトリに記述しています。

課題レポジトリ

GitHub : js_exercise_for_react_1

今回作成する課題の完成形のイメージは以下のとおりです。

Reactの課題1の完成形Reactの課題1の完成形

課題解決するために参考になる資料

【JavaScript】Reactとは

あわせて読みたい
【JavaScript】Reactとは今回は「React」の概要を解説します。ReactとはWebページの操作に特化したライブラリの1つです。また、Reactの知識はWebのフロントエンドだけでなく、サーバーサイド開発、モバイルアプリ開発でも活用できます。...

そもそも「React」を知らない方は、上記記事でReactの概要や、Reactで出来ることを把握するところから始めることと良いでしょう。

【React】Create React Appで開発環境を構築する

あわせて読みたい
【React】Create React Appで開発環境を構築する今回は「Create React App」を使ってReactの開発環境をセットアップする方法を解説します。またNode.jsをインストールすると使えるようになる「npx」コマンドの説明もしました。...

Reactの開発環境を整えるのに便利なコマンドに「Create React App」というものがあることをこちらの記事で解説しました。

課題レポジトリでは既にReactの開発環境を整えていますが、自分でゼロから構築したい方は、上記記事の内容を元に「Create React App」を使って環境を整えると良いでしょう。

【JavaScript】importとexportの使い方を覚える

あわせて読みたい
【JavaScript】importとexportの使い方を覚える今回は「React」以外でもモダンなJavaScriptアプリ開発で利用する「import」「export」の使い方について解説しました。...

React含め、モダンなJavaScript開発ではファイルの読み込みに「import」「export」を使うのが現在は一般的です。(2019年8月9日現在)

JavaScriptの「import」「export」の使い方がわからない方は、上記記事で「import」「export」の基本的な使い方を学習することをオススメします。

【React】JSXの概要を理解する&必要最小限の環境に修正する

あわせて読みたい
【React】JSXの概要を理解する&必要最小限の環境に修正する今回は「JSXの概要」の説明と、create-react-appコマンド実行後のデフォルトのReact環境を修正して、学習しやすい必要最小限のコードへの修正方法を解説しました。...

Reactで表示パーツ(=コンポーネント)を作成するときは、一般的に「JSX」を使った記法で実装します。

「JSX」については上記記事で取り上げているので、「JSX」を知らない方は上記記事でイメージを掴んでいただけたらと思います。

【React】スタイルを整える主な4つの方法

あわせて読みたい
【React】スタイルを整える主な4つの方法今回はReactで表示コンポーネントのスタイルを整える方法を4つ解説しました。その4つとは「①CSSを使う、②インラインスタイルを使う、③CSS-in-JSを使う、④Bootstrapのような表示パーツを提供しているライブラリを使う」です。...

Reactコンポーネントの見た目を整える方法はCSSファイルを使う方法を含めて、主に4つの方法があります。

Reactでスタイルを整える方法を知りたい方は上記記事を参考にしていただけたらと思います。

質問・答え合わせ受け付けてます

課題に関して質問や答えの確認をしたい方はお気軽にご連絡をいただけたらと思います。

お問い合わせ・TwitterのDM・LINE@で受けつけています。TwitterのDM、LINE@のほうが早く気づけるので早めに返信できるかと思います。

あわせて読みたい
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!プログラミングやWebで困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る