Reactの超基礎的な文法

前提

Reactをさらっと勉強した時に、印象に残ったことや覚えておいた方が良さそう、と思ったことをまとめているものになります。
量としてはそこまでありません。
importやexport等、前後のコードは省略しています。

概要

今回説明する内容は以下の5つです。

• jsxは複数の要素がある場合は、divタグで囲んで一つの要素にまとめる。
• jsx内にJavaScriptを埋め込むには、JavaScriptの部分を中括弧{ }で囲む。
• stateの値を変更する場合は、直接代入するのではなく、setStateを使う。
• 同じクラスに定義したメソッドをjsx内で呼び出す時は、メソッド名の前にthis.をつける。
• jsxで要素にクラス名をつける場合、className='クラス名'とする。

divタグで囲んで一つの要素にまとめる

jsxは複数の要素がある場合（h1タグとpタグ等）は、エラーになるため、divタグで囲んで一つの要素にまとめる必要があります。
以下にエラーとなる例を記載します。

App.js

render() {
  return(
    <h1>要素1</h1>
    <p>要素2</p>
  );
}

これを下記のようにdivタグで一つの要素にまとめる必要があります。

render() {
  return(
+   <div>
      <h1>要素1</h1>
      <p>要素2</p>
+   </div>
  );
}

中括弧{ }で囲む

jsx内にJavaScriptを使うためには、JavaScriptの部分を中括弧{ }で囲みます。

App.js

render() {
  const name = 'Alice';
  return (
    <h1>Hello { name }</h1>
  );
}

setStateを使う

stateの値を変更する場合は、直接代入するのではなく、setStateを使います。
下記のような書き方はしません。

App.js

this.state = { name: 'Alice'};

this.state.name = 'Bob';

直接代入ではなく、下記のようにsetStateを使います。

App.js

this.state = { name: 'Alice'};

this.setState({name: 'Bob'});

メソッド名の前にthisをつける

同じクラス内に定義したメソッドをjsx内で呼び出す時は、メソッド名の前にthis.をつけます。
気付いたら忘れてるなんてことがありました。

App.js

class App extends React.Component {
  sample() {
  // sampleメソッドの処理
  }
  render() {
    return(
      // sampleメソッドの呼び出し
      {this.sample()}
    );
  }
}

クラス名の付け方

jsxで要素にクラス名をつける場合、className='クラス名'と書きます。
HTMLではclassなので混ざらないように気を付けましょう。

App.js

render() {
  const name = 'Alice';
  return (
    <h1 className='heading'>Hello { name }</h1>
  );
}

終わりに

少しだけReactの勉強をした段階で書いているものなので、おかしな部分があるかもしれません。
そういったところが何かありましたらコメントお願いいたします。