以前も同じ記事を書いたのですが、人の記事をなぞっただけなので自分で書いてみました。
さらに、実案件を想定して、ファイルアップロードやカレンダーも含めたCRUDを試してみました。

追記

ここの内容はCRUDとしては少々Formが複雑すぎるので、簡単版を作成しました。そちらもご利用ください。

仕様・完成イメージ

CRUDといいつつ、Editページに詳細表示機能を兼ねさせたり削除機能を追加することにより、以下の３ページを作成することでことは足ります。

Create（新規登録）
Index（一覧）
Edit（編集＋詳細画面を兼ねる＋削除機能追加）
Show（いらないけど参考実装）

完成版のgithubのリポジトリはこちら。

実装の手順

データがないと始まらないのでまずCreateを実装します。
次に一覧を実装します。
最後にEditを実装します。

準備

作業場所作成とモジュールのインストール

作業場所を作成し、必要なモジュールをインストールします。

create-react-app crud
cd crud

yarn add bootstrap firebase formik moment react-datepicker react-firebase-file-uploader react-router-dom reactstrap yup

必要なファイルの作成

必要なファイルを生成しておきます。ファイルはsrc以下に作成します。

mkdir src/screens
touch src/screens/Create.js
touch src/screens/Index.js
touch src/screens/Edit.js
touch src/screens/Show.js

touch src/Firebase.js

bootstrapのcssを提供する

index.js

import React from 'react';
import ReactDOM from 'react-dom';
+import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';

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

実装

まずはApp.jsでルーティングの設定を行います。
各コンポーネントが無いとエラーがでるので、作成の順番に注意してください。

App.js

App.js

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

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

//screens
import Index from './screens/Index';
import Create from './screens/Create';
import Show from './screens/Show';
import Edit from './screens/Edit';

class App extends React.Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route exact path="/" component={Index} />
                    <Route exact path="/create" component={Create} />
                    <Route exact path="/show/:uid" component={Show} />
                    <Route exact path="/edit/:uid" component={Edit} />
                    <Route render={() => <div>Page not found.</div>} />
                </Switch>
            </Router>
        );
    }
}

export default App;

Create.js

ちょっと複雑にはなりますが、ここでは実践で利用する各種Form要素を利用してみたいと思います。
主な要素は

普通のInput
Select
Radioボタン
カレンダー
ファイルアップロード
チェックボックス

あたりです。

Create.js

import React from 'react';
import { Form, FormGroup, FormFeedback, Label, Input, Button, Spinner } from 'reactstrap';
import { Formik } from 'formik';
import * as Yup from 'yup';
import { Link } from 'react-router-dom';

import firebase, { db } from '../Firebase';

import FileUploader from "react-firebase-file-uploader";

import moment from 'moment';

//react-datepicker
import DatePicker, { registerLocale } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
//for locale ja
import ja from 'date-fns/locale/ja';
registerLocale('ja', ja);

class Create extends React.Component {

    state = {
        avatarUrl: '',
        avator: '',
        isUploading: false,
        progress: 0,
        spinnerHidden: true,
    }

    handleOnSubmit = async (values) => {
        // alert(JSON.stringify(values));
        this.setState({ spinnerHidden: false });

        //dbへ書き込み
        const docId = db.collection("members").doc().id;
        await db.collection("members").doc(docId).set({
            docId: docId,
            email: values.email,
            area: values.area,
            gender: values.gender,
            birthday: firebase.firestore.Timestamp.fromDate(new Date(values.birthday)),
            avatarUrl: values.avatarUrl,
            agree: values.agree,
            createdAt: firebase.firestore.FieldValue.serverTimestamp(),
        });

        this.setState({ spinnerHidden: true });
        alert("登録しました。");
    }

    //upload
    handleUploadStart = () => this.setState({ isUploading: true, progress: 0 });
    handleUploadError = error => {
        this.setState({ isUploading: false });
        console.log(error);
    }
    handleUploadSuccess = async filename => {
        await this.setState({ avator: filename, isUploading: false });
        const url = await firebase.storage().ref("images").child(filename).getDownloadURL();
        await this.setState({ avatarUrl: url });
        return url;
    }
    handleProgress = progress => this.setState({ progress: progress });

    render() {
        return (
            <div className="container">
                <h3 className="text-center my-5">新規登録</h3>
                <div className="text-right my-3 mr-5"><Link to="/">一覧へ戻る</Link></div>
                <Formik
                    initialValues={{ email: '', area: '', gender: '', birthday: moment(new Date()).format('YYYY/MM/DD'), avatarUrl: '', agree: '' }}
                    onSubmit={this.handleOnSubmit}
                    validationSchema={Yup.object().shape({
                        email: Yup.string().email().required(),
                        area: Yup.string().oneOf(['関東', '関西']).required(),
                        gender: Yup.string().oneOf(['male', 'female']).required(),
                        avatarUrl: Yup.string().required(),
                        agree: Yup.boolean().oneOf([true]).required(),
                    })}
                >
                    {
                        ({ handleSubmit, handleChange, handleBlur, values, errors, touched, setFieldValue }) => (
                            <Form className="col-8 mx-auto" onSubmit={handleSubmit}>
                                <FormGroup>
                                    <Label for="email">■Email</Label>
                                    <Input
                                        type="email"
                                        name="email"
                                        id="email"
                                        value={values.email}
                                        onChange={handleChange}
                                        onBlur={handleBlur}
                                        invalid={Boolean(touched.email && errors.email)}
                                    />
                                    <FormFeedback>
                                        {errors.email}
                                    </FormFeedback>
                                </FormGroup>
                                <FormGroup>
                                    <Label>■お住いの地域</Label>
                                    <Input
                                        type="select"
                                        name="area"
                                        id="area"
                                        value={values.area}
                                        onChange={handleChange}
                                        onBlur={handleBlur}
                                        invalid={Boolean(touched.area && errors.area)}
                                    >
                                        <option value="選択して下さい">選択して下さい</option>
                                        <option value="関東">関東</option>
                                        <option value="関西">関西</option>
                                    </Input>
                                    <FormFeedback>
                                        {errors.area}
                                    </FormFeedback>
                                </FormGroup>
                                <FormGroup className="mb-4">
                                    <legend className="col-form-label">■性別</legend>
                                    <FormGroup inline check>
                                        <Label check>
                                            男性：<Input
                                                type="radio"
                                                name="gender"
                                                id="male"
                                                value="male"
                                                onChange={handleChange}
                                            />
                                        </Label>
                                    </FormGroup>
                                    <FormGroup inline check>
                                        <Label check>
                                            女性：<Input
                                                type="radio"
                                                name="gender"
                                                id="female"
                                                value="female"
                                                onChange={handleChange}
                                            />
                                        </Label>
                                    </FormGroup>
                                    <span className="text-danger small">{touched.gender && errors.gender ? errors.gender : null}</span>
                                </FormGroup>
                                <FormGroup>
                                    <legend className="col-form-label">■直近の誕生日</legend>
                                    <DatePicker
                                        locale="ja"
                                        name="birthday"
                                        id="birthday"
                                        value={values.birthday}
                                        dateFormat="yyyy/MM/dd"
                                        customInput={<Input invalid={Boolean(errors.birthday)} />}
                                        onChange={date => setFieldValue("birthday", moment(date).format('YYYY/MM/DD'))}
                                    />
                                </FormGroup>
                                <FormGroup>
                                    <legend className="col-form-label">■プロファイル画像</legend>
                                    <FileUploader
                                        accept="image/*"
                                        name="avatarUrl"
                                        randomizeFilename
                                        storageRef={firebase.storage().ref("images")}
                                        onUploadStart={this.handleUploadStart}
                                        onUploadError={this.handleUploadError}
                                        onUploadSuccess={async (filename) => {
                                            const path = await this.handleUploadSuccess(filename); //ここもawaitにしないとurl取得できない
                                            setFieldValue("avatarUrl", path); //値のセットとエラーの削除
                                        }}
                                        onProgress={this.handleProgress}
                                    />
                                    <span className="text-danger small">{touched.avatarUrl && errors.avatarUrl ? errors.avatarUrl : null}</span>
                                    {this.state.isUploading ? <p>Uploading... {this.state.progress}%</p> : null}
                                    {this.state.avatarUrl ? <img src={this.state.avatarUrl} width="120" alt="" className="my-2"/> : null}
                                </FormGroup>
                                <FormGroup className="my-4">
                                    <legend className="col-form-label">■規約に同意して下さい。</legend>
                                    <FormGroup inline check>
                                        <Input
                                            type="checkbox"
                                            name="agree"
                                            id="agree"
                                            value={values.agree}
                                            onChange={handleChange}
                                        />
                                        <Label for="agree" check>同意する。</Label>
                                        <span className="text-danger small">{touched.agree && errors.agree ? errors.agree : null}</span>
                                    </FormGroup>

                                </FormGroup>
                                <div>
                                    <Button type="submit" color="primary">
                                        <Spinner color="light" size="sm" className="mr-1" hidden={this.state.spinnerHidden} />
                                        登録する
                                        </Button>
                                </div>
                            </Form>
                        )
                    }
                </Formik>
            </div>
        );
    }
}

export default Create;

Index.js

ひとまず一覧表示してEditやShowにリンクするだけです。

Index.js

import React from 'react';
import { Button } from 'reactstrap';
import { Link } from 'react-router-dom';

import firebase, { db } from '../Firebase';

class Index extends React.Component {

    state = {
        listData: [],
    }

    //db変化時のコールバック
    onCollectionUpdate = (querySnapshot) => {
        const docs = querySnapshot.docs.map(doc => doc.data());
        this.setState({ listData: docs });
    }

    componentDidMount = () => {
        //dbの変化を監視（変化が無くても初回は実行される）
        this.unsubscribe = db.collection("members")
            .orderBy('createdAt','desc')
            .onSnapshot(this.onCollectionUpdate);
    }

    componentWillUnmount = () => {
        //subscribe停止
        this.unsubscribe();
    }

    render() {
        return (
            <div className="container">
                <h3 className="text-center my-5">メンバー一覧</h3>
                <Link to="/create"><Button color="primary" className="m-2">新規登録</Button></Link>
                <table className="table">
                    <thead>
                        <tr>
                            <th>UID</th>
                            <th>Email</th>
                            <th>Avatar</th>
                            <th>詳細</th>
                            <th>編集</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            this.state.listData.map(member => (
                                <tr key={member.docId}>
                                    <td>{member.docId}d</td>
                                    <td>{member.email}</td>
                                    <td><img src={member.avatarUrl} height="30" width="30" alt="" /></td>
                                    <td><Link to={`/show/${member.docId}`}><Button size="sm" color="primary">詳細</Button></Link></td>
                                    <td><Link to={`/edit/${member.docId}`}><Button size="sm" color="success">編集</Button></Link></td>
                                </tr>
                            ))
                        }
                    </tbody>
                </table>
            </div>
        );
    }
}

export default Index;

Edit.js

Create.jsの画面をベースに指定したメンバー（ドキュメント）の情報をデフォルト値としてセットし、更新があれば更新することになります。削除ボタンもEditに実装します。

Edit.js

import React from 'react';
import { Form, FormGroup, FormFeedback, Label, Input, Button, Spinner } from 'reactstrap';
import { Formik } from 'formik';
import * as Yup from 'yup';
import { Link } from 'react-router-dom';

import firebase, { db } from '../Firebase';

import FileUploader from "react-firebase-file-uploader";

import moment from 'moment';

//react-datepicker
import DatePicker, { registerLocale } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
//for locale ja
import ja from 'date-fns/locale/ja';
registerLocale('ja', ja);

class Edit extends React.Component {

    state = {
        avatarUrl: '',
        avator: '',
        isUploading: false,
        progress: 0,
        spinnerHidden: true,
        member: { email: '', area: '', gender: '', birthday: '', avatarUrl: '', agree: false }, //初期値ないとWarning出る
    }

    handleOnSubmit = async (values) => {
        // alert(JSON.stringify(values));
        this.setState({ spinnerHidden: false });

        //dbへ書き込み
        const docId = this.props.match.params.uid;
        await db.collection("members").doc(docId).update({
            email: values.email,
            area: values.area,
            gender: values.gender,
            birthday: firebase.firestore.Timestamp.fromDate(new Date(values.birthday)),
            avatarUrl: values.avatarUrl,
            agree: values.agree,
        });

        this.setState({ spinnerHidden: true });
        alert("更新しました。");
    }

    //upload
    handleUploadStart = () => this.setState({ isUploading: true, progress: 0 });
    handleUploadError = error => {
        this.setState({ isUploading: false });
        console.log(error);
    }
    handleUploadSuccess = async filename => {
        await this.setState({ avator: filename, isUploading: false });
        const url = await firebase.storage().ref("images").child(filename).getDownloadURL();
        await this.setState({ avatarUrl: url });
        return url;
    }
    handleProgress = progress => this.setState({ progress: progress });

    //for Edit
    getMember = async (uid) => {
        const docRef = db.collection("members").doc(uid);
        const doc = await docRef.get();
        if (doc.exists) {
            this.setState({
                member: doc.data(),
            });
        } else {
            alert("メンバーが見つかりませんでした。");
        }
    }

    componentDidMount = () => {
        this.getMember(this.props.match.params.uid);
    }

    deleteMember = async (uid) => {
        if (window.confirm('本当に削除しますか？')) {
            await db.collection("members").doc(uid).delete();
            this.props.history.push("/");
        } else {
            return;
        }
    }

    render() {
        return (
            <div className="container">
                <h3 className="text-center my-5">情報編集</h3>
                <div className="text-right my-3 mr-5"><Link to="/">一覧へ戻る</Link></div>
                <Formik
                    enableReinitialize //これがポイント
                    initialValues={{
                        email: this.state.member.email, //各初期値にdbからの値（このためにenableReinitializeが必要）
                        area: this.state.member.area,
                        gender: this.state.member.gender,
                        birthday: moment(this.state.member.birthday.seconds * 1000).format('YYYY/MM/DD'),
                        avatarUrl: this.state.member.avatarUrl,
                        agree: this.state.member.agree,
                    }}
                    onSubmit={this.handleOnSubmit}
                    validationSchema={Yup.object().shape({
                        email: Yup.string().email().required(),
                        area: Yup.string().oneOf(['関東', '関西']).required(),
                        gender: Yup.string().oneOf(['male', 'female']).required(),
                        avatarUrl: Yup.string().required(),
                        agree: Yup.boolean().oneOf([true]).required(),
                    })}
                >
                    {
                        ({ handleSubmit, handleChange, handleBlur, values, errors, touched, setFieldValue }) => (
                            <Form className="col-8 mx-auto" onSubmit={handleSubmit}>
                                <FormGroup>
                                    <Label for="email">■Email</Label>
                                    <Input
                                        type="email"
                                        name="email"
                                        id="email"
                                        value={values.email}
                                        onChange={handleChange}
                                        onBlur={handleBlur}
                                        invalid={Boolean(touched.email && errors.email)}
                                    />
                                    <FormFeedback>
                                        {errors.email}
                                    </FormFeedback>
                                </FormGroup>
                                <FormGroup>
                                    <Label>■お住いの地域</Label>
                                    <Input
                                        type="select"
                                        name="area"
                                        id="area"
                                        value={values.area}
                                        onChange={handleChange}
                                        onBlur={handleBlur}
                                        invalid={Boolean(touched.area && errors.area)}
                                    >
                                        <option value="選択して下さい">選択して下さい</option>
                                        <option value="関東">関東</option>
                                        <option value="関西">関西</option>
                                    </Input>
                                    <FormFeedback>
                                        {errors.area}
                                    </FormFeedback>
                                </FormGroup>
                                <FormGroup className="mb-4">
                                    <legend className="col-form-label">■性別</legend>
                                    <FormGroup inline check>
                                        <Label check>
                                            男性：<Input
                                                type="radio"
                                                name="gender"
                                                id="male"
                                                value="male"
                                                onChange={handleChange}
                                                checked={values.gender === "male"} //追加
                                            />
                                        </Label>
                                    </FormGroup>
                                    <FormGroup inline check>
                                        <Label check>
                                            女性：<Input
                                                type="radio"
                                                name="gender"
                                                id="female"
                                                value="female"
                                                onChange={handleChange}
                                                checked={values.gender === "female"} //追加
                                            />
                                        </Label>
                                    </FormGroup>
                                    <span className="text-danger small">{touched.gender && errors.gender ? errors.gender : null}</span>
                                </FormGroup>
                                <FormGroup>
                                    <legend className="col-form-label">■直近の誕生日</legend>
                                    <DatePicker
                                        locale="ja"
                                        name="birthday"
                                        id="birthday"
                                        value={values.birthday}
                                        dateFormat="yyyy/MM/dd"
                                        customInput={<Input invalid={Boolean(errors.birthday)} />}
                                        onChange={date => setFieldValue("birthday", moment(date).format('YYYY/MM/DD'))}
                                    />
                                </FormGroup>
                                <FormGroup>
                                    <legend className="col-form-label">■プロファイル画像</legend>
                                    <FileUploader
                                        accept="image/*"
                                        name="avatarUrl"
                                        randomizeFilename
                                        storageRef={firebase.storage().ref("images")}
                                        onUploadStart={this.handleUploadStart}
                                        onUploadError={this.handleUploadError}
                                        onUploadSuccess={async (filename) => {
                                            const path = await this.handleUploadSuccess(filename); //ここもawaitにしないとurl取得できない
                                            setFieldValue("avatarUrl", path); //値のセットとエラーの削除
                                        }}
                                        onProgress={this.handleProgress}
                                    />
                                    <span className="text-danger small">{touched.avatarUrl && errors.avatarUrl ? errors.avatarUrl : null}</span>
                                    {this.state.isUploading ? <p>Uploading... {this.state.progress}%</p> : null}
                                    {/* sateからvaluesへ参照を切り替え */}
                                    {values.avatarUrl ? <img src={values.avatarUrl} width="120" alt="" className="my-2" /> : null}
                                </FormGroup>
                                <FormGroup className="my-4">
                                    <legend className="col-form-label">■規約に同意して下さい。</legend>
                                    <FormGroup inline check>
                                        <Input
                                            type="checkbox"
                                            name="agree"
                                            id="agree"
                                            value={values.agree}
                                            onChange={handleChange}
                                            checked={values.agree === true}
                                        />
                                        <Label for="agree" check>同意する。</Label>
                                        <span className="text-danger small">{touched.agree && errors.agree ? errors.agree : null}</span>
                                    </FormGroup>

                                </FormGroup>
                                <div>
                                    <Button type="submit" color="success">
                                        <Spinner color="light" size="sm" className="mr-1" hidden={this.state.spinnerHidden} />
                                        更新する
                                        </Button>
                                </div>
                            </Form>
                        )
                    }
                </Formik>
                <div className="col-8 mx-auto my-3">
                    <Button color="danger" onClick={() => this.deleteMember(this.props.match.params.uid)}>データを削除</Button>
                </div>
            </div>
        );
    }
}

export default Edit;

Show.js

Editと表示内容はほぼ同じなので、いらないのですが参考まで。
テキストベースで表示するため型変換等が必要になります。

Show.js

import React from 'react';
import firebase, { db } from '../Firebase';
import { Link } from 'react-router-dom';
import moment from 'moment';


class Show extends React.Component {

    state = {
        member: {}
    }

    getMember = async (uid) => {
        const docRef = db.collection("members").doc(uid);
        const doc = await docRef.get();
        if (doc.exists) {
            this.setState({
                member: doc.data(),
            });
        } else {
            alert("メンバーが見つかりませんでした。");
        }
    }

    componentDidMount = async () => {
        await this.getMember(this.props.match.params.uid);
    }

    render() {

        if(this.state.member.createdAt === undefined){
            return <p>Loading...</p>
        }

        return (
            <div className="container">
                <h3 className="text-center my-5">メンバー詳細</h3>
                <div className="text-right my-3 mr-5"><Link to="/">一覧へ戻る</Link></div>
                <table className="table">
                    <tbody>
                        <tr>
                            <th>UID</th>
                            <td>{this.state.member.docId}</td>
                        </tr>
                        <tr>
                            <th>Email</th>
                            <td>{this.state.member.email}</td>
                        </tr>
                        <tr>
                            <th>居住地域</th>
                            <td>{this.state.member.area}</td>
                        </tr>
                        <tr>
                            <th>Avatar</th>
                            <td><img src={this.state.member.avatarUrl} width="200" alt="" /></td>
                        </tr>
                        <tr>
                            <th>性別</th>
                            <td>{this.state.member.gender}</td>
                        </tr>
                        <tr>
                            <th>生年月日？</th>
                            <td>{moment(this.state.member.birthday.seconds * 1000).format('YYYY/MM/DD')}</td>
                        </tr>
                        <tr>
                            <th>同意</th>
                            <td>{String(this.state.member.agree)}</td>
                        </tr>
                        <tr>
                            <th>登録日時</th>
                            <td>{ moment(this.state.member.createdAt.seconds * 1000).format('YYYY-MM-DD HH:mm:dd:ss')}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        );
    }
}

export default Show;