ReactでサーバーへのHTTPリクエスト #React

はじめに

Reactを使用してサーバーへHTTPリクエストを送る方法に関する備忘録です💁
初心者です😅
間違えてる部分多々あると思います。
もし見つけた場合、ツッコミいただけると助かります🙇

内容

LPを作成している際のお問い合わせフォームを作成しています。
お問い合わせフォームのシステムを構築しています。このシステムでは、ユーザーからの「お問い合わせ内容」を受け取り、それを自分宛てのメールとして送信します。

Reactはフロントエンド開発のためのJavaScriptライブラリのためサーバー側の機能を提供しておりません。

よって「Node.js」「Python」などを用いて作成するサーバーを構築する。

私は今回、Pythonにてサーバー構築を作成したが、そのサーバーに対してのアクションを学んだのでまとめました。

Contact.js

const emailSend = () => {
    console.log('ただいま、メールを送信してます', user);

    fetch('http://localhost:5000/send-email', {
        method: 'POST',
        // HTTP リクエストのメソッド
        headers: {
            'Content-Type': 'application/json',
        },
        // サーバーへ送るファイルはJSONファイルであることを宣言
        body: JSON.stringify(user)
        // 送るデータをJSON形式に変換する
    })
    .then(response => response.json())
    .then(data => {
        // .thenは成功した時の処理を示す場合に使う。
        console.log('Success:', data);
    })
    .catch((error) => {
        // .catchは失敗の時の処理を示す場合に使う。
        console.error('Error:', error);
    });
}

Contact.js

    fetch('http://localhost:5000/send-email', {

「fetch」の押さえておくべき点🧠

fetchは JavaScript におけるメソッドの一つ。ネットワークリクエストを送信し、リソース（通常はサーバーからのデータ）の取得を行うために使用。サーバーとのデータのやり取りに使用する。
fetchは非同期操作を行うため、サーバーからの応答を待っている間にも、他のコードの実行も可能。
fetch は Promise オブジェクトを返すことができるため非同期操作の成功時とエラー時の処理を .then() や .catch() などのメソッドでチェーンできる。
fetch はHTTPリクエストを行うために使用され、様々なHTTPメソッド（GET、POST、PUT、DELETEなど）をサポートしている。

「('http://localhost:5000/send-email', 」のコードで押さえておくべき点🧠

http://localhost:5000　このアドレスは開発してるサーバーに対して利用する。
localhost : とは自身のコンピュータを指す特別なホスト名。
:5000 : 今回、Flaskを利用してる開発。その場合に一般的には5000番ポートを使用する。
/send-email : エンドポイント。サーバー上の特定のパスや機能にアクセスするために使われる。
開発が完了し外部サーバー（AWS、GCPなど）にデプロイした後はこのURLは変更する。
デプロイした後のURLに”/send-email”を入れることで/send-emailに関連付けられた処理が実行される。

Contact.js

        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(user)
    })

押さえておくべき点🧠

method: 'POST',　HTTP リクエストのメソッド。POSTは送信することを表してる。
headers: {'Content-Type': 'application/json',},サーバーへ送るファイルはJSONファイルであることを宣言。
body: JSON.stringify(user)送るデータをJSON形式に変換。

Contact.js

.then(response => response.json())
.then(data => {
 // .thenは成功した時の処理を示す場合に使う。
console.log('Success:', data);
})
.catch((error) => {
 // .catchは失敗の時の処理を示す場合に使う。
console.error('Error:', error);
});

押さえておくべき点🧠

.thenは成功した時の処理を示す場合に使う。
response => response.json()はレスポンスできたJSONファイルをJavaScriptオブジェクトに変換する。
dataはresponseによるデータ（サーバーからレスポンス）によるものを指す。
.catchは失敗の時の処理を示す場合に使う。