Amplify+ReactでCRUDアプリ作成RTA(Any%)Part.1

amplify+reactでアプリ作成RTAやっていきます。
当方基盤エンジニアです。(ただ、ハッカソンでアプリ作成経験ありです。)
はい、よーいスタート

レギュレーション(又の名を前提)

• AWSに乗っかるのでamplify利用(前も使ったから)
• 面倒なので認証なし(前はCognitoとか実装した)
• GraphQLを使いたい(バックエンド考えるの大変だからね。)
• 必要機能はCRUD(わかりやすさ重視)
• 計測期間はreactの雛形作成からデプロイして初回アクセスまで
• Google先生は多用する。
• 失踪しない

イメージ図

1.Create画面

2.一覧表示

それでは、イクゾー！（デッデッデデデデ　カーン）

初期設定

1.いつも通りreactの雛形作成
詳細は以下を参考にしてください。丁寧丁寧丁寧に記載されているのでおすすめです。
https://qiita.com/G-awa/items/a5b2cc7017b1eceeb002

npx create-react-app <アプリ名>
cd <アプリ名>

2.色々インストール
いろんなUI使ってみたいので今回はevergreen-uiを利用してみました。
(大胆なチャート変更)

yarn add react-dom evergreen-ui
yarn add aws-amplify aws-amplify-react

3.amplify設定

amplify init

4.GraphQLスキーマ作成

amplify add api
amplify push

graphqlのスキーマは入力速度を考慮して以下としました。ほぼ変えてないです；；
(Postの方が良かったですね、、、複数形にするとPostssになってしまいますた。)

/amplify/backend/api/~~~AppName~~~/schema.graphql

type posts @model {
  id: ID!
  name: String!
  url: String!
  description: String
}

コーディング準備

気持ちよくアプリを作成していくために準備をしていきます。
あちなみに、筆者の環境はVSCodeです。ちなみにVimmerです。(宗教戦争)

0.GitHubのリポジトリ登録しておく
リポジトリ作成は割愛します。適当でもOKです

git remote add origin [e-mail]:aion0721/ozadoc.git

1.不要ファイル削除
以下ファイルはフヨウラ！
ただ普通に消すとgitの管理もありややこしくなるのでgitコマンドで消します。

git rm logo.svg
git rm App.css

2.index.js
変更点とかだけ抜き出します。全文はgithub参照してください。
（え、URLはどこかだって？ヒントをあげているので自分で考えてください。）

index.js

import * as serviceWorker from "./serviceWorker";
import Amplify from "aws-amplify";
import config from "./aws-exports";
Amplify.configure(config);

3.app.js
師匠の教えを守りcomponentsフォルダを作りますので、以下の記載にします。
(正直ファイル分ける必要なかったのでここ600fpsぐらいロスですね。)

App.js

import Top from "./components/Top";

function App() {
  return (
    <div>
      <Top />
    </div>
  );
}

4.Top.js作成
メインディッシュです。

mkdir ./components
touch ./components/Top.js

Top.js

import React from "react";

function Top(){
    return(
        <div>
            Hello, World!!!~素晴らしきこの世界~
        </div>
    );
}

export default Top;

5.起動確認
とりあえず起動してみます。

yarn start

文字が出たらOK

次回へ続く

短いですがPart.1としてはここまでにします。
区間ラップは1.5時間です。ほぼ、UI選ぶ時間でした。勉強も兼ねてるから仕方ないね(レ)
(更新部分を残す走者の鑑)