React

React (リアクト) は、Meta（旧Facebook）とコミュニティによって開発されているユーザインタフェース構築のためのJavaScriptライブラリである。

まずは画面にHello Worldと表示させましょう

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <h1>Hello World</h1>
    );
  }
}

export default App;

JSXは、 JavaScript言語構文の拡張機能であり、 Reactで一般的に使用される多くの開発者にとって馴染みのある構文を使用してコンポーネントのレンダリングを構造化する方法を提供します。見た目はHTMLに似ています。
Reactコンポーネントは通常、JSX を使用して記述されます。

App.js

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
　　　　{/* <h1>タグを用いて、「Hello World」と表示 */}
        <h1>Hello World</h1>
        <p>一緒にReactを学びましょう！</p>
      </div>
    );
  }
}

export default App;

JSXは、HTMLとほとんど同じように記述することができます。
見出しには＜h1＞タグや＜h2＞タグ、文章には＜p＞タグ、その他＜div＞タグなど、HTMLと同様のタグが使えるようになっています。

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

JSXを{/* */}で囲むと、その部分はコメントになります。
コメントにすると、そのJSXは表示されません。

<img src="https://goroinfo.com/image/sample.png"/>

imgタグは、HTMLでは、＜img src=’画像のURL’＞のように閉じタグが必要ありませんでした。
一方、JSXでは閉じタグが必要になります。＜img src=’画像のURL’ /＞のように、タグの終わりにスラッシュ「/」を記述します。

JSXとJS ( JavaScript ) の記述部分は分かれています。
renderメソッドのreturn内のみ、JSXで記述する必要があります。JSXで記述された要素はブラウザに表示されます。

import React from 'react';

class App extends React.Component {
  render() {
    return (
    	<div>
    	  <h1>こんにちは、aaaaaさん！</h1>
        {/* buttonタグ内に、onClickイベントを */}
        <button onClick={() => {console.log('aaaaa')}}>aaaaa</button>
        
        {/* buttonタグ内に、onClickイベントを */}
        <button onClick={() => {console.log('bbbbb')}}>bbbbb</button>
        
      </div>
    );
  }
}

export default App;

まずは、クリックするボタンを作っていきます。
ボタンは＜button＞タグで指定します。ボタンには＜button＞タグで囲まれている文字が表示されます。

イベントの書き方
イベント名={() =＞ { 処理 }}と書くことで、指定したタイミングで処理を実行できます。アロー関数はJavaScriptなので、{}で囲むことを忘れないようにしましょう。

今回は「クリックされた時に処理を実行する」onClickイベントを用います。
よって、イベント名にonClickを指定し、＜button onClick={() =＞ {処理}}＞とします。
アロー関数の処理部分には、イベント時に実行する処理を書きます。

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: '太郎'};
  }
  
  // handleClickメソッドを定義
  handleClick(name) {
    this.setState({name: name});
  }
  
  render() {
    return (
    	<div>
    	  <h1>こんにちは、{this.state.name}さん！</h1>
    	  {/* onClickイベント内の処理を、handleClickメソッドを呼び出す*/}
        <button onClick={() => {this.handleClick('太郎')}}>太郎</button>
        <button onClick={() => {this.handleClick('花子')}}>花子</button>
        
      </div>
    );
  }
}

export default App;

ユーザーの動きに合わせて変わる値のことを、Reactではstateと呼びます。
ボタンを押すとstateが変わり、表示される名前が変わるようにしましょう。

オブジェクトは、複数の値をプロパティという名前をつけて管理できるものです。
stateの定義では、このオブジェクトを使っていきます。

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

this.stateはオブジェクトなので、this.state.プロパティ名とすることで、指定したstateのプロパティ名に対応する値を取得できます。

this.setState({プロパティ名: 変更する値})とすることで、指定されたプロパティに対応するstateの値が変更されます。その結果、「this.state.name」で表示できる値も変更されます。

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

メソッドの定義
メソッドはクラスの中で定義します。メソッド名() { 処理 }とすることでメソッドは定義できます。
メソッドは関数と似たようなもので、中括弧{ }の中に行いたい処理を記述します。