produced by Classmethod ˗ˏˋ 技術とビジネスの祭典 ˎˊ˗ Classmethod ODYSSEY 事前登録受付中

AI解析を使った画像シェアWEBアプリを超簡単に作る【React/フロントエンド編】#reinvent

AWS re:Invent 2018

2018.12.12

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

*このエントリはシリーズ3番目の記事です。

前章でCognitoのAWSリソース設定をしたので、これからReactと withAuthenticator higher-order React component from AWS Amplify を使ってフロントエンドの実装を進めましょう。はじめにログイン機能から作ります。

この章で作るもの

ユーザーログインフォームを作ります。

作成するフォームは４つです。

ユーザーサインアップフォーム
確認コード入力フォーム
サインインフォーム
パスワードリセットフォーム

新規プロジェクトの作成

Reactプロジェクトの雛形を作成します。

npx create-react-app photo-albums

ディレクトリをプロジェクトRootに移動します。

cd photo-albums

Semantic UI React モジュールの追加

React用のSemaitic UIを追加します。

npm install --save semantic-ui-react

public/index.htmlにモジュールを追加します。

public/index.html

<head>
<!-- ... --> 
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css"></link>
<!-- ... --> 
</head>

ブラウザ上で確認してみる

development serverを起動してみましょう。

npm start

サーバーが立ち上がったらPreviewドロップダウンメニューからPreview Running Applicationを選択します。

サーバーを立てたままにするため、別窓でターミナルを開いてこれからの作業は新しく開いた方で行いましょう。

Hello Worldを表示させてみよう

App.jsを以下のコードに置き換えて’Hello World’を表示させてみましょう。

src/App.js

import React, { Component } from 'react';
import { Header } from 'semantic-ui-react';

class App extends Component { 
    render() { 
        return (
            <div>
                <Header as='h1'>Hello World!</Header>
            </div>
        );
    }
}

export default App;

正しくブラウザが立ち上がっていればリフレッシュしなくても変更が自動的に反映されます。(ちょっと時間差があります。１０秒程)

Amplify NPM dependeicyを追加

AWS Amplify Reactフレームワークをインストールし、src/App.jsに加えます。

npm install --save aws-amplify aws-amplify-react

App.js

import React, { Component } from 'react';
import { Header } from 'semantic-ui-react';

import Amplify from 'aws-amplify';
import aws_exports from './aws-exports';
import { withAuthenticator } from 'aws-amplify-react';
Amplify.configure(aws_exports);


class App extends Component { 
    render() { 
        return (
            <div>
                <Header as='h1'>Hello World!</Header>
            </div>
        );
    }
}

export default withAuthenticator(App, {includeGreetings: true});

６行目と２０行目のコードを足すだけでサインイン、サインアップ、パスワードリセット、ログインの四つのフォームを作成できたことになります。

早速ブラウザで確認してみましょう。このようなフォームが表示されれば成功です。