世界一優しいReactの基本その3 -イベントとスタイルとは-

はじめに

前回はReactのコンポーネント基本を学びました。今回はイベントとスタイルいうところを書いていきたいと思います。
https://qiita.com/k-tetsuhiro/items/88ae3c7eee4aa78942b8

イベント

Reactにおけるイベントは少し書き方が異なります。
例えばクリックイベントはjsの場合onclick=xxxのように書くとおもいますが、
Reactのjsxの場合はonClick=xxxのようにキャメルケースで記載します。

<button onClick={xxx}>ボタン</button>

スタイル

スタイルも同様に記載の仕方が通常のhtmlとは異なります。
Reactでは各タグにstyle属性を当てられるのですが、下記のような書き方をします。

<h1 style={{ color: "red" }}>タイトル</h1>

style={{}}となっているのは、JavaScriptのオブジェクトを値として入れるためです。
ここでいうJavaScriptのオブジェクトは{ color: "red"}になります。
そのため、例えばfont-sizeを変更する際には{ fontSize: "10px" }のような形になります。
JavaScriptオブジェクトとして定義してあげれば下記のように書くことができます。

const contentStyle = {
    color: "red",
    fontSize: "10px"
};

...

<h1 style={contentStyle}>タイトル</h1>

まとめ

jsとhtmlでの記載方法と、jsxでは多少の差分があります。
特にハマりやすいのがキャメルケースでの記載だと思います。
例） font-sizeではなくfontSize, onclickではなくonClick等

基礎的なところですがエラーが出やすいところなのでぜひ気をつけたいです。