【React】超基礎！Reactの特徴とコードの追い方を知るにはログイン・ログアウト機能を実装するのが吉

はじめに

今回はReact.jsの学習をはじめたて１〜２ヶ月目程度の私のアウトプット兼、同様に初学者の方にとって何かしらの手助けとなればといった経緯で投稿いたします。
ちなみに、今回取り上げるログイン・ログアウト機能は、React.jsの特徴でもある非同期のページ切り替えが可能ということに加えて、普段我々にとって身近なログイン・ログアウトの仕組みが理解できればおもしろいかなと思ったので、ピックアップしました。
修正点等ございましたら、ぜひ教えてください！

完成形

Twitterにあげてみました！

完成こんな感じです。
めちゃシンプルw pic.twitter.com/O71idAE5KB

— シュウヘイ=コモリ (@syuupiyon95) April 25, 2020

目次

1.各コンポーネント
2.ログイン・ログアウトコンポーネントの実装
3.App.jsでのimport
4.クラスコンポーネント内での状態管理
5.setStateでログイン・ログアウト情報更新
6.renderを使ってif文でログイン・ログアウトの表示内容切り替えの実装
7.render内での表示内容実装
8.各コンポーネントの表示

1.各コンポーネント

今回使用するコンポーネント
・Login
-Login.jsx|Login.css
・Logout
-Logout.jsx|Logout.css
これらをMain.js内に組み込んでいきます。
そして最終的に表示されるのはindex.jsに渡していきますが、今回はこの下りは割愛していきます。

2.ログイン・ログアウトコンポーネントの実装

それでは、早速各コンポーネント内の実装をしていきたいと思います！
基本的にはLogin・Logoutコンポーネントの内容は同じようなものとなります。

Login.jsx

import React from 'react';
import './Login.css';

const Login = () => {
  return (
    <div className="Login">
      <h2>ログイン</h2>
      <h3>成功！おめでとう</h3>
    </div>
  );
};

export default Login;

Logout.jsx

import React from 'react';
import './Logout.css';

const Logout = () => {
  return (
    <div className="Logout">
      <h2>ログアウト</h2>
      <h3>ログインして！！</h3>
    </div>
  );
};

export default Login;

コードを追っていくと、一番はじめにReactとCSSをインポートします。
そこから、Login/Logoutをアロー関数で定義して、returnで表示したい内容を記述していきます。
最後にexportするのを忘れないようにしましょう！
これがないと、App.js内での読み込みができなくなってしまいます。

3.App.jsでのimport

そしたら、とりあえずLogin/Logoutコンポーネントは追いておいて大丈夫です。
先ほどexportしておいた各コンポーネントをApp.jsに取り込んいきます。
App.js内のimport内容は以下のようになります。

App.js

import React, { Component } from 'react';
import './App.css'
import Logout from './Logout/Logout';
import Logout from './Login/Login';

これで、先ほど作成したコンポーネントを読み込むことができるようになりました。

4.クラスコンポーネント内での状態管理

ここからやることは、クラスコンポーネントのを定義して、その中でログイン・ログアウトの状態管理をするためのstateを作成します。

App.js

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: false
    };
    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
  }

  login() {
    this.setState({isLoggedIn: true});
  }
  logout() {
    this.setState({isLoggedIn: false});
  }
//まだ続きます。。

最初にthis.stateで初期設定を行いますが、その際のデフォルトはfalseにしておきます。
なぜなら、ログイン前はログインできていない状態だからです（）。

5.setStateでログイン・ログアウト情報更新

4.クラスコンポーネント内での状態管理の続きとなってしまい申し訳ないのですが、ここではthis.stateで設定した値を　setStateで状態切り替えしていく様を解説していきます。

App.js

  login() {
    this.setState({isLoggedIn: true});
  }
  logout() {
    this.setState({isLoggedIn: false});
  }

このlogin・logoutメソッドが呼ばれた時に、状態が切り替わっていくのですが、その判別としてsetStateを用いて、this.stateしたisLoggedInに対して、loginであればtrue、logoutであればfalseと切り替えていきます。

6.renderを使ってif文でログイン・ログアウトの表示内容切り替えの実装

それでは、実際にここからはrenderを用いて、表示していくための実装をしていきます。

App.js

render() {
    if(this.state.isLoggedIn) {
      return this.renderLogin();
    }
    return this.renderLogout();
  }

シンプルにif文を使って、先ほどのisLoggedInがtrueであればrenderLoginを実行し、反対にfalseであればrenderLogoutが実行されて、ログイン・ログアウトの切り替えが可能となります
。
肝心の表示内容は次に記していきます。

7.render内での表示内容実装

ここからは実際に表示内容を記していきたいと思います。
記述していく内容はそれぞれrenderLogin、renderLogoutで実際に表示していきたい内容となります。

App.js

  renderLogin() {
    return (
      <div>
        <Login />
        <button onClick={this.login}>ログイン</button>
      </div>
    ); 
  }

  renderLogout() {
    return (
      <div>
        <Logout />
          <button onClick={this.logout}>ログアウト</button>
      </div>
    );
  }
}
//ここでclass App extends Component中身はおしまい。

中身はいたってシンプルで、それぞれの中でreturnを用いて表示内容を実装していきます。ここでは、Login・Logoutコンポーネントで実装した内容が表示されるようにそれぞれで組み込んでいきます。
パーツとして使えるので便利ですよね。

8.各コンポーネントの表示

7.render内での表示内容実装の続きとなってしまうのですが、切り替えのためのボタンを実装していくだけです。
タグでonClickを使って、その中でlgoin,logoutを切り替えていく機能を実装して完成です。

まとめ

このReact.jsを使ったログイン・ログアウト機能の作り方はシンプルかつReact.jsらしさ（知りませんが）がよくわかる仕組みとなっていておもしろいですね。
解説の至らないところも多かったと思うので、よろしければドキュメントを参考にしながら勉強してみてください。
また、修正点等ございましたらご指摘ください。