【React】基礎編⓵

今回は【React】基礎編⓵としてReactにおける、
JSXについて、イベントについて、stateについての３つを主体として、
注意点等も混ぜながら、詳細に説明できればと思います。


#雛形

まずはファイルの構成から見ていきましょう。
① Reactをimport
② React.Componentを継承するクラスの定義
③ JSXを戻り値とするrenderメゾットの定義
④ JSXの範囲
⑤ クラスをexport

```App.js
import React from 'react';  ❶
class App extends React.Conponent {  ❷
  render() {  ❸
    return(  ❹  
         .
       JSX部分
         .
    );
  }
}

export default App;  ❺
```

#JSXの書き方

JSXは、HTMLとほとんど同じように記述することができます。
下図のように記述することでブラウザ上にHELLO!!と表示されます。

```App.js
// 省略
class App extends React.Conponent {  
  render() {  
    return( 
      <h1>HELLO!!<h1>
    );
  }
}
// 省略
```

#JSXの注意点①

JSXはほとんどHTMLと同じですが、いくつか違いがあります。
return内に複数の要素があるとエラーになります。
複数の要素がある場合は、＜div＞タグで囲んで、1つの要素にまとめてあげましょう。

```App.js
// 省略
class App extends React.Conponent {  
  render() {  
    return( 
-------------------------
      <h1>h1です</h1>
      <h2>h２です</h2>         ✖️悪い記述
      <p>pです</p>
-------------------------
      <div>
        <h1>h1です</h1>
        <h2>h２です</h2>       ◯良い記述
        <p>pです</p>
      </div>
-------------------------
    );
  }
}
// 省略
```

#JSXの注意点②

HTMLでは、imgタグ、inputタグ等は閉じタグが必要ありませんでした。
一方で、JSXでは閉じタグが必要になります。

```App.js
// 省略
class App extends React.Conponent {  
  render() {  
    return( 
      <img src="---url---" />  // スラッシュが必要
      <input type="text" />
    );
  }
}
// 省略
```

#JSXにJavaScriptを埋め込む

クラス内はJSの範囲内なので、JavaScriptで変数や定数を定義することができます。
また、JavaScriptで定義した変数や定数をJSX内で埋め込むことも可能です。

```App.js
// 省略
class App extends React.Conponent {  
  render() {  
   // JSXの範囲外で定義したJavaScriptの定数をJSX内で埋め込むことができる
   
    const text = "HELLO!!"; 
    return( 
      // 埋め込む方法は{}で囲みましょう
      <h1>{text}</h1>
    );
  }
}
// 省略
```

#イベント

イベントの書き方は下図の通りになります。
JavaScriptのアロー関数を使用して記述するので、{}を忘れないように気をつけましょう。

```App.js
  <button イベント名 = {() => { 処理 }}></button>
```

クリックイベントを使用する場合は下図の通りになります。
JSXではキャメルケースを使ってイベントの記述を行います。

```App.js
// 省略
class App extends React.Conponent {  
  render() {  
    return( 
      <button onClick={()=>{console.log("Aボタンをクリックしました")}}>Aボタン</button>
      // Aボタンをクリックすると、コンソールで"Aボタンをクリックしました"が出力されます
    );
  }
}
// 省略
```
#stateの定義

constructorとは、初期化処理が実行されるメソッドです。
stateは、constructorの中で、オブジェクトとして定義します。
ここで定義したオブジェクトがstateの初期値となります。
「constructor(props)」や「super(props);」といった処理はいつも同じ記述をするため、定型文として覚えておけば大丈夫です。

```App.js
// 省略
class App extends React.Conponent {  
  constructor(props) { 
    super(props); // 親クラスのconstructorを呼ぶためにsuper(props);を記述する
    this.state = {プロパティ名: "値"}; // オブジェクトの内容をthis.stateに代入している
  } 
}
// 省略
```

#stateの取得

stateが取得できるか確認してみます。
console.logでthis,stateの中身を見てみましょう。

```App.js
// 省略
class App extends React.Conponent {  
  constructor(props) { 
    super(props); 
    this.state = {name: "りんご"}; 
  } 
  render() {
    return( 
      console.log(this.state); // {name: "りんご"}が出力される
    );
  }
}
// 省略
```

#stateの表示

stateを表示してみましょう。
this.state.プロパティ名とすることで、値を取り出すことができます。

```App.js
// 省略
class App extends React.Conponent {  
  constructor(props) { 
    super(props); 
    this.state = {name: "りんご"}; 
  } 
  render() {
    return( 
      <p>この果物は{this.state.name}です</p>
      // ブラウザに出力　ー＞　この果物はりんごです
    );
  }
}
// 省略
```

#stateの変更

constructorで定義したstateの初期値を変更してみましょう。
ここではボタンをクリックした時に、果物の名前を変更できるように処理をしていきます。
値の変更にはsetStateを使用します。

```App.js
// 省略
class App extends React.Conponent {  
  constructor(props) { 
    super(props); 
    this.state = {name: "りんご"}; 
  } 
  render() {
    return( 
      // ボタンをクリックすると、果物の名前がりんごからぶどうに変更されます
      <p>この果物は{this.state.name}です</p>
                        // {this.setState({プロパティ名: "変更する値"})}
      <button onClick={()=>{this.setState({name: "ぶどう"})}}>ボタン</button>
    );
  }
}
// 省略
```

#stateの変更の注意点

stateの変更には、注意点があります。
Reactでは、下図のように「stateの値に直接代入することで値を変更してはいけない」という決まりがあります。
値を変更したい場合は、setStateを使いましょう。

```App.js

  悪い例

  this.state = {name: "みかん"}; ×
  this.state.name = "みかん"; ×
```

```App.js

  良い例

  this.setState({name: "みかん"}); ◯
```

#メソッド化

クリックイベントの処理をメソッド化して、わかりやすくしてみましょう。
今回は、stateのnameプロパティの値を変更する処理を行うhandleClickメソッドを作ります。
handleClickメソッドを定義し、setStateで変更する処理を追加しましょう。

```App.js
class App extends React.Conponent {  
  constructor(props) { 
    super(props); 
    this.state = {name: "りんご"}; 
  } 
  // 引数nameを使って、stateのnameプロパティの値を変更する
  handleClick(name) { 
    this.setState({name: name});
  }

  render() {
    return( 
      <p>この果物は{this.state.name}です</p>
                            // handleClickメソッドを呼び出す部分で、引数を渡します
      <button onClick={()=>{this.handleClick("もも")}}>ボタン</button>
    );
  }

// 出力内容: この果物はももです //
```

長くなるので以上になります。
Componentやpropsなどは【React】基礎編⓶で紹介します。