[React] 初心者なら必ず知っておくべきJSX

JSX

reactを開発した経験のある人なら、一度は聞いたことがあると思います。

私はいつも初心者を相手に説明するので、あまり理論的なことはさておき、理解しやすく説明します。

まずは文書です。
公式文書を探してみるのは良い習慣です。
JSX

結論から言えばJSXはreactで使う言語です。（正確には構文拡張です）

これまでjavascriptだけで開発してきたら戸惑うかもしれませんので
たくさん使う文法と特徴をいくつか紹介します。

1. タグを変数に貯蔵できる

const divTag = <div>hello world</div>;

2. 変数を中括弧で

変数を中括弧でどこにでも入れることができる。

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

甚だしくはタグの属性やスタイルにも可能だ。

const style = {
      backgroundColor: 'white',
      fontSize: '10px',
      fontWeight: 'bold'
  }

  	<div style={style}>test</div>

3. class -> className

タグのclassはclassNameに変更すること。

<h1 className="greeting">
    Hello, world!
</h1>

4. タグを必ず閉めること。

既存のinputタグなどは閉じなくても良いが、jsxでは必ず閉じなければならない。

<input></input>
<input />

これくらいがjsxでよく使われる文法と概念です。