「React入門」の前回はBableを利用してJSXの変換を行いました。今回はJSXについてもう少し深く解説を行います。

まずはこれまで紹介してきた基本形。

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('app')
);

このようにJSXでは基本的にHTMLと同じ記法が利用できますが、少しだけルールが違うところを紹介していきます。

最上位の要素

JSXでは最上位に複数の要素を並列で配置することはできません。

ReactDOM.render(
  <h1>Hello, world!</h1>
  <h2>texttext</h2>
  ,document.getElementById('app')
);

この場合は以下のように、最上位にdivなどの要素を配置してその内側に複数の要素を並列で配置してきます。

ReactDOM.render(
  <div>
    <h1>Hello, world!</h1>
    <h2>texttext</h2>
  </div>
  ,document.getElementById('app')
);

コメントアウト

JSX内にHTMLのコメントアウトは利用できません。

ReactDOM.render(
  <div>
    <!-- comment -->
    <h1>Hello, world!</h1>
  </div>
  ,document.getElementById('app')
);

波括弧内にJavaScriptのコメントアウトでコメントが記述できます。

ReactDOM.render(
  <div>
    {/*  comment */}
    <h1>Hello, world!</h1>
  </div>
  ,document.getElementById('app')
);

空要素

空要素を以下のように記述するとことはできません。

ReactDOM.render(
  <div>
    <h1>Hello, world!</h1>
    <img src="foo.jpg" alt="">
  </div>
  ,document.getElementById('app')
);

XHMTLのように要素末に/を入れなくてはいけません。

ReactDOM.render(
  <div>
    <h1>Hello, world!</h1>
    <img src="foo.jpg" alt="" />
  </div>
  ,document.getElementById('app')
);

class属性

HTMLのclass属性はそのまま利用できません。

ReactDOM.render(
  <div>
  <h1 class="foo">Hello, world!</h1>
  </div>
  ,document.getElementById('app')
);

className属性として記述する必要があります。

ReactDOM.render(
  <div>
  <h1 className="foo">Hello, world!</h1>
  </div>
  ,document.getElementById('app')
);

for属性

HTMLのfor属性はそのまま利用できません。

ReactDOM.render(
  <div>
    <label for="name">Hello, world!</label>
  </div>
  ,document.getElementById('app')
);

htmlFor属性として記述する必要があります。

ReactDOM.render(
  <div>
    <label htmlFor="name">Hello, world!</label>
  </div>
  ,document.getElementById('app')
);

value属性

input要素などのvalue属性でフォームの初期値を設定すると値の変更ができなくなります。

ReactDOM.render(
  <div>
    <input type="text" value="aaa" />
  </div>
  ,document.getElementById('app')
);

値を変更したい場合はdefaultValue属性を利用します。

ReactDOM.render(
  <div>
    <input type="text" defaultValue="aaa" />
  </div>
  ,document.getElementById('app')
);

checked属性

ラジオボタンやチェックボックスでもcheckedを付与してしまうとチェックが変更できなくなります。

ReactDOM.render(
  <div>
    <input type="radio" name="radio1" value="1" checked="checked" />
    <input type="radio" name="radio1" value="2" />
  </div>
  , document.getElementById('app')
);

値を変更したい場合はdefaultChecked属性を利用します。

ReactDOM.render(
  <div>
    <input type="radio" name="radio1" value="1" defaultChecked="checked" />
    <input type="radio" name="radio1" value="2" />
  </div>
  , document.getElementById('app')
);

style属性

style属性も直接利用できません。

ReactDOM.render(
  <div>
    <h1 style="color:red,font-size:12">Hello, world!</h1>
  </div>
  ,document.getElementById('app')
);

{{…}}内にオブジェクト記法で指定する必要があります。

ReactDOM.render(
  <div>
    <h1 style={{color:'red',fontSize:'12px'}}>Hello, world!</h1>
  </div>
  ,document.getElementById('app')
);

名前空間

属性に名前空間が必要な場合、たとえばsvgのxlink:hrefはエラーがでます。

ReactDOM.render(
  <div>
    <svg>
      <use xlink:href="/svg/svg-sprite#my-icon"></use>
    </svg>
  </div>
  ,document.getElementById('app')
);

これはキャメルケースに変換して書く必要があります。

ReactDOM.render(
  <div>
    <svg>
      <use xlinkhref="/svg/svg-sprite#my-icon"></use>
    </svg>
  </div>
  ,document.getElementById('app')
);

JavaScript

{}内にはJavaScriptの記述が適用できます。

const text="Hello, world!";
ReactDOM.render(
  <div>
    <h1>{text}</h1>
    {1+2+3}
  </div>
  ,document.getElementById('app')
);

スプレッド演算子( … )を用いてオブジェクトを展開して設定することもできる。
下記の場合はh1要素にはid属性「bar」とclass属性「foo」が設定されている。

const props={
  id:"bar",
  className:"foo"
};
ReactDOM.render(
  <div>
    <h1 {...props}="">Hello, world!</h1>
  </div>
  ,document.getElementById('app')
);

次回はReactのコンポーネントについて解説を行います。