React入門 - Tips8 - reactstrap

目次

bootstrapとは

HTML／CSS／JavaScriptから構成される最も有名なWEBフレームワークです。
らしいです。
Javascriptも含むんですね。
よく知らんかったです。

Qiita投稿にあたって、CSSフレームワークの選定に少し迷いましたが、一番有名なものを
選べば実務で出会う可能性が高いかもしれないということで選びました。
（変わったやつをやってみたかったってのはあるんですが）

bootstrapとreact-bootstrap

Reactアプリ用に再設計されたUIフレームワーク。
jQueryなど不要な依存関係を除いて、純粋なUIフレームワークとしている。
Reactコンポーネント化している。

なんと！
実装しながら躓きながらreactstrapなるものを見つけました。
react-bootstrapとの比較はググるなりここ見るなりで。

今回は、reactstrapを採用することとします。
なぜなら、躓きながらもそれでうまくいったため。。

インストール

$ yarn add react-bootstrap bootstrap

コーディング

Part9のコードをbootstrap化してみます。

import React, {useState, useLayoutEffect} from 'react';
import { useFormik } from 'formik';
import * as Yup from "yup";
// import {Form, Button, InputGroup} from 'react-bootstrap';   // ★☆★☆react-bootstrapをimport
import 'bootstrap/dist/css/bootstrap.min.css';  // ★☆★☆bootstrapのcssをimport
import {Form, FormGroup, Button, Input, Label} from 'reactstrap'; // ★☆★☆reactstrapをimport

export const FormikTest: React.FC = () => {

  // 入力チェックスキーマ
  const validationSchema = 
    Yup.object({
      id: Yup.string()
        .required("idは必須項目です"),
      pwd: Yup.string().required("パスワードは必須項目です")
    });

  // formik定義
  const formik = useFormik({
      // 初期値の定義
      initialValues: {
        id: 'yokowake',
        pwd: '',
      },
      // バリデーション定義
      validationSchema,
      // サブミット時の処理を記述
      onSubmit: (values) => {
        alert('form data : ' + JSON.stringify(values))
      },
    });

    /** レンダー部分 */
    return (
        <Form onSubmit={formik.handleSubmit}>
          <div>
            <Label htmlFor="id">Id</Label>
            <Input
              type="text"
              id="id"
              name="id"
              onChange={formik.handleChange}
              value={formik.values.id}
            />
            {/* エラー表示 */}
            {formik.touched.id && formik.errors.id ? (
              <div className="error">
                <span style={{color: 'red'}}>{formik.errors.id}</span>
              </div>
            ) : null}
          </div>
          <div>
            <Label htmlFor="pwd">Pwd</Label>
            <Input
              type="text"
              id="pwd"
              name="pwd"
              onChange={formik.handleChange}
              value={formik.values.pwd}
            />
            {/* エラー表示 */}
            {formik.touched.pwd && formik.errors.pwd ? (
              <div className="error">
                <span style={{color: 'red'}}>{formik.errors.pwd}</span>
              </div>
            ) : null}
          </div>
          {/* サブミットボタン */}
          <Button onClick={() => formik.handleSubmit()}>Submit</Button>
        </Form>
    );
};

export default FormikTest;

見た目の確認と動作の確認を行ってみてください。

以上