JSXの基本 – React入門

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

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

ReactDOM.render(
  Hello, world!,
  document.getElementById('app')
);

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

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

ReactDOM.render(
  Hello, world!
  texttext,
  document.getElementById('app')
);

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

ReactDOM.render(
  
    Hello, world!
    texttext
  ,
  document.getElementById('app')
);

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

ReactDOM.render(
  
    
    Hello, world!
  ,
  document.getElementById('app')
);

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

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

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

ReactDOM.render(
  
    Hello, world!
    
  ,
  document.getElementById('app')
);

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

ReactDOM.render(
  
    Hello, world!
    
  ,
  document.getElementById('app')
);

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

ReactDOM.render(
  
    Hello, world!
  ,
  document.getElementById('app')
);

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

ReactDOM.render(
  
    Hello, world!
  ,
  document.getElementById('app')
);

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

ReactDOM.render(
  
    Hello, world!
  ,
  document.getElementById('app')
);

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

ReactDOM.render(
  
    Hello, world!
  ,
  document.getElementById('app')
);

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

ReactDOM.render(
  
    
  ,
  document.getElementById('app')
);

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

ReactDOM.render(
  
    
  ,
  document.getElementById('app')
);

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

ReactDOM.render(
  
    
    
  ,
  document.getElementById('app')
);

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

ReactDOM.render(
  
    
    
  ,
  document.getElementById('app')
);

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

ReactDOM.render(
  
    Hello, world!
  ,
  document.getElementById('app')
);

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

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

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

ReactDOM.render(
  
    
  ,
  document.getElementById('app')
);

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

ReactDOM.render(
  
    
  ,
  document.getElementById('app')
);

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

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

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

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

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