$ npx create-react-app notessample
$ cd notessample

$ npm install -g @aws-amplify/cli

$ amplify configure

Scanning for plugins...
Plugin scan successful
Follow these steps to set up access to your AWS account:

Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue

Specify the AWS Region
? region:  ap-northeast-1
Specify the username of the new IAM user:
? user name:  amplify-0ZWUt
Press Enter to continue

Enter the access key of the newly created user:
? accessKeyId:  ********************
? secretAccessKey:  *****************************************
This would update/create the AWS Profile in your local machine
? Profile Name:  default

Successfully set up the new user.

$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project notessample　→　React Webアプリのディレクトリと同じにしておきます。
? Enter a name for the environment dev
? Choose your default editor: None
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using none
? Source Directory Path:  src
? Distribution Directory Path: dist
? Build Command:  npm run-script build
? Start Command: npm run-script start
Using default provider  awscloudformation
・・・
? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use default
・・・

$ amplify add api
? Please select from one of the below mentioned services: REST　→ REST API を選択
? Provide a friendly name for your resource to be used as a label for this category in the project: notessamp
leapi　→ APIの名前を指定します。設定した名前は、API Gateway の名前になります。 
? Provide a path (e.g., /book/{isbn}): /notes　→　API呼び出しのパス名を指定
? Choose a Lambda source Create a new Lambda function　→　新しくLambda functionを生成します。
? Provide an AWS Lambda function name: notessamplefunction　→　Lambda functionの名前を指定。
? Choose the runtime that you want to use: NodeJS　→　Lambda runtime はNodeJSを選択。
? Choose the function template that you want to use: Serverless ExpressJS function (Integration with API Gate
way) →　Lambda funcrion のテンプレートは Serverless ExpressJSを選択。

Available advanced settings:
- Resource access permissions
- Scheduled recurring invocation
- Lambda layers configuration

? Do you want to configure advanced settings? No
? Do you want to edit the local lambda function now? Yes
Successfully added resource notessamplefunction locally.
・・・
? Restrict API access No　→　注意。今回はサンプルなのでNoを選択。運用で利用する場合は別途認証機能を追加してください。
? Do you want to add another path? No
Successfully added resource notessampleapi locally
・・・

$ npm install axios

var axios = require('axios')
var express = require('express')
・・・

// declare a new express app
var app = express()
app.use(bodyParser.json())
app.use(awsServerlessExpressMiddleware.eventContext())
・・・

/****************************
* Example post method *
****************************/

app.post('/notes', function(req, res) {
  const apitoken = '<kintone APIトークン>'; // kintoneのAPIトークンをセット
  const config = {
    headers: {
      'Content-Type': 'application/json',
      'X-Cybozu-API-Token': apitoken,
    },
  }
  axios.post('https://<sub-domain>.cybozu.com/k/v1/record.json', req.body, config)
  .then(response => {
    res.json({
      success: true,
      notes: response.data
    })
  })
  .catch(error => {
    res.json({
      success: false,
      error
    })
  })
});

app.post('/notes/*', function(req, res) {
  // Add your code here
  res.json({success: 'post call succeed!', url: req.url, body: req.body})
});
・・・

import React, { useState } from 'react';
import API from '@aws-amplify/api';
import Amplify from 'aws-amplify';
import config from './aws-exports';
import './App.css';

Amplify.configure(config);

const initialFormState = { id: '', name: '', description: '', owner: '' }

function App() {
  const [notes, setNotes] = useState([]);
  const [formData, setFormData] = useState(initialFormState);

  async function createNote() {
    console.log(formData);
    const myInit = {
      body: {
        app: 216,
        record: {
          name: {value: formData.name},
          description: {value: formData.description},
        }
      },
    };
    const result = await API.post('notessampleapi', '/notes', myInit);
    console.log(result);
    formData.id = result.notes.id;
    setNotes([ ...notes, formData ]);
    setFormData(initialFormState); 
    alert(JSON.stringify(result));
  }

  return (
    <div className="App">
      <p>My Note Sample</p>
      <form>
        <label>name :</label>
        <input
          type="text"
          id="name"
          onChange={e => setFormData({ ...formData, 'name': e.target.value})}
          value={formData.name}
        />
        <label>description :</label>
        <input
          type="text"
          id="description"
          onChange={e => setFormData({ ...formData, 'description': e.target.value})}
          value={formData.description}
        />
        <button type="button" onClick={createNote}>Create Note</button>
      </form>
    </div>
  );
}
export default App;

git add .
git commit -m "initial commit"
git push origin master