Reactで外部のjsファイルを読み込めない

やりたいこと

ReactでGoogle Calender APIを実装しようとしています。
こちらのサイトを参考にしました。
JavaScriptでGoogle Calendar APIを実装する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
このサイトと同じように、画面に日本の祝日一覧をテキストで表示させたいです。

App.js
1import { Component } from 'react';
2import * as React from 'react';
3
4import './App.css';
5
6require('https://apis.google.com/js/api.js')
7
8function App() {
9        
10    const API_KEY = '/*自分のAPIキー*/'
11    const CALENDAR_ID = 'ja.japanese#holiday@group.v.calendar.google.com';
12
13    function start() {
14      gapi.client.init({
15        'apiKey': API_KEY,
16      }).then(function() {
17        return gapi.client.request({
18          'path': 'https://www.googleapis.com/calendar/v3/calendars/' + encodeURIComponent(CALENDAR_ID) + '/events'
19        })
20      }).then(function(response) {
21        let resultArea = document.getElementById('resultArea');
22        let items = response.result.items;
23        for(let i = 0; i < items.length; i++){
24          resultArea.insertAdjacentHTML('beforeend', items[i].summary + items[i].start.date + '<br>');
25        }
26      }, function(reason) {
27        console.log('Error: ' + reason.result.error.message);
28      });
29    };
30
31    gapi.load('client', start);
32
33    
34
35  return (
36    <div className="App">
37      {<button onClick={() => gapi.load('client', start)}>Events</button> }
38    </div>
39  );
40}
41
42export default App;

困っていること

https://apis.google.com/js/api.js を読み込む必要があるのですが、うまく読み込めていないせいか

'gapi' is not defined

というエラーが出ます。

試したこと

React 外部ライブラリ読み込み方法 - Qiita
上のコードの通り、require('https://apis.google.com/js/api.js') を追加してみましたが、変わりませんでした。

Reactで、<script>でインポートするタイプのスクリプトをJSX内部で使う方法
こちらにある通り、public/index.html内に<script src="https://apis.google.com/js/api.js"></script>を記述しましたが、変わりませんでした。

index.html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="utf-8" />
6  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
7  <meta name="viewport" content="width=device-width, initial-scale=1" />
8  <meta name="theme-color" content="#000000" />
9  <meta name="description" content="Web site created using create-react-app" />
10  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
11  
12  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
13  
14  <title>React App</title>
15
16</head>
17
18<body>
19  <noscript>You need to enable JavaScript to run this app.</noscript>
20  <div id="root"></div>
21  
22</body>
23
24<script src="https://apis.google.com/js/api.js"></script>
25</html>

プログラミング初心者です。至らないところが多々あると思いますが、お答えいただけると幸いです。よろしくお願いします。

行動規範の内容に同意します

回答1件

下記のような記事

ReactでGoogle Calendar連携を超簡単に実装する方法

を参考にしながら、以下のモジュールを使うとよいのではないかと思います。

react-google-calendar-api

投稿2022/07/11 11:59

退会済みユーザー

総合スコア0

Tajika

2022/07/12 02:34

ご回答ありがとうございます。そちらのサイトを参考にし、googleアカウントのログインをするところまではできたのですが、 GET https://content.googleapis.com/calendar/v3/calendars/primary/events?timeMax=2022-07-22T02%3A31%3A52.711Z&timeMin=2022-07-12T02%3A31%3A52.711Z&orderBy=updated&showDeleted=true&maxResults=10&key=/*自分のキー*/ 404 Uncaught というエラーが出て何も表示されませんでした。

Tajika

2022/07/12 02:38

追記です。上記の、GETの後に書かれてあるのURLでは、このようなテキストが表示されました。 { "error": { "errors": [ { "domain": "global", "reason": "notFound", "message": "Not Found" } ], "code": 404, "message": "Not Found" } }

行動規範の内容に同意します