React.js クリックによりテキストを切り替える

作成日 2022.03.16
React
React.js

React.jsで、クリックによりテキストを切り替える手順を記述してます。

1. 環境
2. react.js環境構築
3. クリックによりテキストを切り替え
4. デザイン適応

環境

OS windows 11 home
node v16.13.2
npm 8.1.2
yarn 1.22.17
React 17.0.2
ブラウザ Edge 99.0.1150.39

react.js環境構築

下記のコマンドで構築してます。ここでは、「react-test」という名前でプロジェクトを作成してます。

> yarn global add create-react-app
> npx create-react-app react-test

※「yarn」は以下のコマンドでインストール可能です。

> npm install -g yarn

作成したプロジェクトに移動しておきます。

> cd react-app

フォルダ構成

クリックによりテキストを切り替え

クリックによりテキストを切り替えるには「useState」を使用して、変数の状態により切り替えを行います。

「App.js」を、以下ように編集します。

三項演算子を使ってif文を1行で書く

import { useState } from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {

  const [a, b] = useState(false);

  const foo = () => {
    b(!a);
  };

  return (
    <div className="App">
      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />
        
        <h1>{a ? "hello" : "world"}</h1>
        
        <button onClick={foo}>button</button>

      </header>
    </div>
  );
}

export default App;

実行します。

> yarn start

ブラウザから http://プライベートIP:3000にアクセスすると、ボタンによりテキストが切り替えされていることが確認できます。

デザイン適応

ちょっと、ボタンのデザインがよくないので、CSSフレームワークである「material-tailwind」を使用します。

> yarn add @material-tailwind/react -E

インストールが終われば適応します。

import { useState } from "react";
import Button from "@material-tailwind/react/Button";
import "@material-tailwind/react/tailwind.css";
import logo from "./logo.svg";
import "./App.css";

function App() {

  const [a, b] = useState(false);

  const foo = () => {
    b(!a);
  };

  return (
    <div className="App">
      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />
        
        <h1>{a ? "hello" : "world"}</h1>
        
        <Button color="lightBlue" onClick={foo}>button</Button>

      </header>
    </div>
  );
}

export default App;

これで少し見映もよくなりました。