【React -- jsx】jsxでスタイル付け(CSS)をする際のメモ

スクールのチーム開発の際に学んだ、jsxでスタイル（CSS）付けをする方法について記載します。
初学者が作業を進める上で知ったこと/ぶち当たったことが主で、jsxの注意点が網羅されているわけではありません。ご容赦ください。

##対象読者
・ほぼ初めてjsxに触れる方
（ごく初歩的な内容のため、すでにReactを使いこなしているという方には既知の内容と思われます）

##環境
React.js 16.13.1
Node.js 12.13.1

---

###１、スタイルのつけ方
・ライブラリ'emotion'をインポートしてcssという名前をつける
（※スタイル付けをするためのライブラリは他にもあるようです）
・スタイルを付けたいタグに任意のclassNameをつける。（この場合、”titleClass”）
・つけたclassNameを定義する形で `` の内にスタイルを記述。

example.js

import React from 'react';
import { css } from 'emotion';

const App = () => {
  return(
    <div className={hoge}>
      <h1 className={titleClass}>Hello World</h1>
    </div>
);
};

const textClass = css`
  color:red;
`;

###２、通常のHTMLやCSSと違うこと
・1つのコンポーネントにつき、大元の親となるタグは1つだけ。
（上記のexample.jsでいうと、return()の一つ下の階層に配置できる要素は<div className={hoge}>の一つだけで、その<div>の内部の階層なら複数のタグを配置できる。）
・<img>や<input>など、通常のHTMLでは閉じタグがないタグでも、セルフクロージングタグが必要。

<img>NO
<img>NO</img>
<img />Available!

###３、スタイルのつけ方---タグ内に記述する場合
style={{プロパティ名："値"}}

・{{}}内はオブジェクトである
・プロパティ名にハイフンが含まれる場合は、キャメルケースの記載に直す
　例： margin-bottom => marginBottom
・プロパティが複数ある場合は、","でつなぐ

example2.js

<div style={{marginBottom:"20px", color:"white"}}>example2</div>

###４、タグの属性の値に、JSの記述を使う
単純なことですが、つまづいたのでメモ。
例：オブジェクト"user"の、プロパティ"friendName"の値を、placeholderに表示されるようにする。
方法１

<input type="text" placeholder={"友達の" + user.friendName + "さんを紹介する"}></input>

方法２

<input type="text" placeholder={`友達の${user.friendName}さんを紹介する`}></input>

以上。

---

アウトプットの練習も兼ねて、学んだことを記事にしました。
React自体の理解が不十分な状態で書いておりますので、記事中に誤りなどあればご指摘頂けますと幸いです。