つくるもの

ツ◯ッターのフォローボタンをパクったリスペクトしたものをつくります。仕様はだいたい同じだと思いますが、仕組みは異なります。 クリックでフォロー／フォロー中とテキストが切り替わる、フォロー中の時にホバーした場合は解除というテキストを出す。これだけです。 やや装飾にこだわって全体に無駄なCSSが設定されていますが、その辺は適宜スタイルシートを調整してください。

必要な知識

• Reactの導入方法及び簡易的なコンポーネント作成方法
• jsxとbabelについての多少の知識と理解

環境

• React・・・v15.3.0
• babel・・・コンパイラ（jsxもコンパイルしてくれるそうです）

htmlとcssを先に用意

※パスは適宜調整してください！ (直すのめんどくさかった)

id名contentのdiv内にフォローボタンのコンポーネントを生成していきます。 cssのfollow-buttonのクラスは生成するフォローボタンのスタイルです。 （挙動だけ確認したい方はcssはスルーしても問題ないでしょう）

フォローボタンのコンポーネントをつくる

所感

Reactチュートリアル並のコンポーネントをつくれるようになるにはまだ場数が必要なようです_(:3」∠)_

参考

• React で要素のクラスを動的に付け外しするなら JedWatson さんちの classnames が便利
• Reactのコード事例から学ぶ初心者向けReact入門と事例集・・・段階を踏んでReactを学べます！おすすめ！