#50 Reactの学習 render()とJSX

Reactはじめました！という人の為に。基本の中の基本、renderメソッドとJSXについて簡単に解説します。初心者は必見です。いまいちよくわからない人でも、簡単なので是非Reactを覚えよう！

メソッド　render()とはJSXを戻り値とするメソッドです。じゃあ、JSXとはなんだ？ってなりますよね。
JSXとはHTMLみたいのなもです。「みたいなもの」なので、もちろんHTMLではありません。returnの中に記述します。複数の要素を記述することはできません。



render() {
  return(
    <div>
      <h1>見出し</h1>
      <p>段落</p>
    </div>
  );
}
//要素を１つにまとめること

このようにreturnの中に記述している<div>から</div>が「JSX」です。そしてこの内容を戻り値として受け取るのがrenderメソッドというわけです。

次はエラーの例です。



render() {
  return(
    <h1>見出し</h1>
    <p>段落</p>
  );
}
//要素が複数あるとエラーになります

このように、return内のJSXは要素を複数記述することはできません。必ず１つにまとめましょう。

また、img,input,textareaタグはそれぞれ<img/><input/><textarea/>という風にスラッシュ「/」が必要です。

これがReactのrender()とJSXです。基本中の基本です。