React学習｜JSX｜React

  • 投稿日
  • 著者 kngsmym
  • カテゴリー react

JSX

ReactではhtmlをJSXでjs内に記述する。

複数のタグを最上位に記述することはできない。以下の記述はエラーとなる。

    return (
        <h1>Welcome!!!!</h1>
        <h2>Welcome!!!!</h2>
    );

以下のようにラップするタグがあって、それが一つであればOK

    return (
      <div>
        <h1>Welcome!!!!</h1>
        <h2>Welcome!!!!</h2>
      </div>
    );

変数、数式、関数などを{}で囲んで表示できる。

class Layout extends React.Component {
  render() {
    let name = "ken"
    return (
      <div>
        <h1>Welcome!!!!</h1>
        <h2>Welcome!!!!</h2>
        <p>{name} says</p>
        <p>{1+2}</p>
        <p>{this.get_result(2)}</p>
      </div>
    );
  }
  get_result(num) {
    return num * 100
  }
}