Help us understand the problem. What is going on with this article?

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

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

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

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

イメージ図

1.Create画面

スクリーンショット 2020-03-27 1.01.33.png

2.一覧表示

スクリーンショット 2020-03-27 1.01.43.png

それでは、イクゾー!(デッデッデデデデ カーン)

初期設定

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 git@github.com: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選ぶ時間でした。勉強も兼ねてるから仕方ないね(レ)
(更新部分を残す走者の鑑)

aion0721
mdc
”自己研鑽のサイクル”を応援するコミュニティです。外の世界に発信&フィードバックを受け、コミュニティの仲間と共に頑張りましょう。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした