[React]ボタンを押した時表示される文字を変えたい！

React(リアクト)とは？

UIを作ることに特化したJavaScriptライブラリ
現在、数多くあるJavaScriptのフレームワーク・ライブラリ群の中でも、Webサービスにおいて世界的に圧倒的な導入率を誇るのがReactです。

Reactの４つの特徴

1. 画面の更新が速くてスムーズ
   普通のウェブサイトだと、データが変わるたびに全部の画面を更新しますが、Reactでは「仮想DOM」という仕組みを使います。これにより、変わった部分だけを効率的に更新できるので、画面がスムーズに動きます。
2. 宣言的なView
   Reactでは、「こういう見た目になります」と宣言するようにUIを実装できます。たとえば、「いいね」の数が増えたら、その数が自動で画面に反映されるようになります。開発者が手動で画面を更新する必要がなく、UIの管理がシンプルです。
3. コンポーネントベース
   Reactでは、画面を「コンポーネント」という部品に分けて作ります。ボタンやナビゲーションバーなどを部品として作り、それを組み合わせて複雑な画面を簡単に構築できます。部分ごとに作っているので、改修や再利用がしやすく、管理も効率的です。
4. 一度学習すれば、どこでも使える
   Reactは、既存のプロジェクトにも簡単に追加できる設計になっています。新しい機能を追加する際、既存のコードを大きく変更する必要がなく、どんなWebアプリにも導入しやすいのが特徴です。学んだスキルは幅広く応用できます。

使い方

• 前提
• ruby on railsで作成中のアプリケーションにReact機能を追加したい。
• Webpackerは導入済み

1. WebpackerにReactを追加する
   まず、RailsにReactをセットアップするために以下のコマンドを実行します。

rails webpacker:install:react

2. Reactのエントリーポイント（App.js）を作成する
   app/javascript/packs/ディレクトリに作成します。

app/javascript/packs/App.js

import React from "react";

const App = () => {
  return <div>Hello, React with Rails!</div>;
};

export default App;

3. index.jsに置いてJSXからHTMLに変換（id名指定）

app/javascript/packs/index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";  // App.jsをインポート

ReactDOM.render(<App />, document.getElementById("root"));

3. RailsのViewにReactを表示する
   表示したい場所に下記を記載（id名で表示する）

view

<div id="root"></div>
<%= javascript_pack_tag 'App' %>

何故変換が必要？は下記の記事にして参照

https://zenn.dev/takeda_kaho/articles/17cec88b653af8

補足

書き換える場所は

app/javascript/packs/App.js

//default
const App = () => {
  return <div>Hello, React with Rails!</div>;
};

変更例

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      buttonText: '+'
    };
  }

  handleClick = () => {
    this.setState(prevState => ({
      count: prevState.count + 1,
      buttonText: prevState.buttonText === '+' ? '-' : '+'
    }));
  }

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.handleClick}>{this.state.buttonText}</button>
      </div>
    );
  }
}

document.addEventListener("DOMContentLoaded", () => {
  ReactDOM.render(<App />, document.getElementById("root"));
});

下のプラスのボタン押したら数字増える！

App.jsの構成

// Reactをインポート
import React from 'react';

// Appクラスを定義
class App extends React.Component {
  render (){
    return (
      <h1>Hello React</h1>
    );
  }
}

// Appクラスをエクスポート
export default App;

記載方法の基本

1. JSXの書き方
   JSX（App.js）は、HTMLとほとんど同じように記述することができる。
   見出しには<h1>タグや<h2>タグ、文章には<p>タグ、その他<div>タグなど、HTMLと同様のタグが使える。

例

<h1>見出し</h1>
<p>これは段落です。</p>
<div>これはdivタグです</div>

ただreturn内に複数の要素があるとエラーになる。
複数の要素がある場合は、右の図のように<div>タグで囲んで、1つの要素にまとめる。
短縮記法の<>...</>での記載でもいける🐝

3. imgタグを使用するときは閉じたぐが必要

<img src='画像のURL' />
<img src="画像のURL" alt="説明文" />

3. 書く場所
   関数コンポーネントの場合は、return 文を使ってUIを返します。
   ReactでUIを作成するための簡潔な方法で、クラスコンポーネントよりも軽量でシンプル。

function MyComponent() {
  return <h1>Hello, World!</h1>;
}

クラスコンポーネントの場合は、render メソッド内にJSXを記述します。

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

render メソッド
Reactコンポーネントの中で、表示内容を定義するために使われます。
このメソッド内で、条件に基づいて変数やJSX要素を定義できます。

return の中
render メソッド内で定義された内容を実際に画面に出力する部分です。
return の中には、最終的に表示したいJSXコードを含めます。

補足

renderメソッドの、returnの外（青）にはJavaScriptを記述でき、定義もできる。
JSX内（緑）でJavaScriptの式や変数を埋め込む場合は {} を使います。

例

import React from 'react';

class App extends React.Component {
  render() {
    // 定数nameを定義
    const name = "練習太郎";

    return (
      // JSX内で変数を埋め込む
      <h1>僕の名前は{name}です</h1>
    );
  }
}

export default App;

本題：ボタンを押した時表示される文字を変えたい！

初期状態と状態の変更

• 初期状態: コンポーネントが初めてレンダリングされるときの状態を設定します。
  これを constructor メソッド内で this.stateを使って定義。
• 状態の変更: ボタンをクリックしたり、ユーザーのアクションによって状態が変わるときには、this.setState を使って状態を更新する。

まずは基本的なコードから。
初期状態で表示される文字を練習太郎として設定し、ボタンを押すことで文字を変える方法を見てみる。

import React from 'react';
class App extends React.Component {
  constructor(props) {
    super(props);
    // 初期状態を定義
    this.state = { name: '練習太郎' };
  }
  
  render() {
    return (
      <div>
        <h1>こんにちは、{this.state.name}さん！</h1>
        
        {/* ボタンをクリックするとnameが'A'に変わる */}
        <button onClick={() => { this.setState({ name: 'A' }) }}>A</button>
        {/* ボタンをクリックするとnameが'B'に変わる */}
        <button onClick={() => { this.setState({ name: 'B' }) }}>B</button>
        
      </div>
    );
  }
}

export default App;

[STEPUP]もう少し可読性よくしよう！

javaの範囲でhandleClickを定義してreturn内をシンプルなコードにする！

handleClick メソッド
状態更新を簡潔にするために使います。引数として渡された値を状態に設定します。

追記コード

handleClick(name) {
    this.setState({ name: name });
  }

左側のnameは状態オブジェクトのプロパティ名、
右側のnameはメソッドの引数として渡される値。
name の値には、例えば 'A' や 'B' を指定できます。
これにより、ボタンのクリックに応じて表示される名前を変更することができます。

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>
        
        <button onClick={() => { this.handleClick('A') }}>A</button>
        <button onClick={() => { this.handleClick('B') }}>B</button>
        
      </div>
    );
  }
}

export default App;

---

とりあえずここまで〜〜〜🐶