amplify+react로 앱 작성 RTA 해 갑니다.
우리 쪽 기반 엔지니어입니다. (단, 해커슨에서 앱 작성 경험이 있습니다.)
예, 좋은 시작

레귤레이션 (또한 이름을 전제)

AWS를 타기 때문에 amplify 사용 (이전에도 사용했기 때문에)

번거롭기 때문에 인증 없음 (전에는 Cognito라든지 구현했다)

GraphQL을 사용하고 싶다 (백엔드 생각하는 것이 어렵다.)

필요한 기능은 CRUD (알기 쉬움 중시)

측정 기간은 react의 병아리 생성에서 배포하여 첫 번째 액세스까지

Google 박사는 다용한다.

실종하지 않는다

이미지 다이어그램

1.Create 화면



2. 일람표시



그럼 익조! (데데데데데데데칸)

초기 설정

1. 평소대로 react의 병아리 작성
자세한 내용은 다음을 참조하십시오. 정중 정중 정중하게 기재되어 있으므로 추천입니다.
htps : // 이 m / G-Awa / ms / A 5b2-c7017b1 에세에 b002

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 [email protected]: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 선택하는 시간이었습니다. 공부도 겸하고 있기 때문에 어쩔 수 없네 (레)
(갱신 부분을 남기는 주자의 감)