React でお問い合わせフォームを EmailJS と統合する

React は、フロントエンド アプリケーションのユーザー インターフェイスを構築するためのフロントエンド ライブラリです。また、React は再利用可能なコンポーネントを使用するため、アプリケーションを作成するときに役立ちます。 フロントエンド開発者にとって常に存在する問題は、バックエンド機能の記述や知識がなくても、フォーム データからの要求を処理する方法です。バックエンド サーバーの構築は面倒な場合があり、ロジックを記述する手間を軽減するために、このタスクにはサードパーティ サービスを使用する必要があります。 EmailJS とは何ですか? EmailJS は、React、Vue、Angular などのクライアント側アプリケーションを使用してメールを送信するのに役立つサービスで、構成とセットアップ中にサーバーを使用しません。 このチュートリアルでは、フロントエンド ライブラリの React を EmailJS に接続して、ゼロから構築するストレスなしに Web サイトやモバイル アプリケーションでユーザー メッセージを受信する方法を学習します。 デモ のスターター コードで有利なスタートを切るか、新しい React アプリケーションを作成してください。 このリポジトリ 前提条件 チュートリアルを進めるには、次のものが必要です。 がローカル マシンにインストールされている ノード >= 14.0.0 および npm >= 5.6 React の基本の理解 サービスを試すための 。 EmailJS アカウント 入門 新しいプロジェクトを構築する最初のステップは、構築を簡単にする開発ツールを用意することです。ターミナルで、次のコマンドを実行します。 npx create-react-app react-contact-form-with-emailjs 上記のコマンドは、react アプリのすべてのファイルとパッケージを含む コマンドを使用してボイラープレートを作成します。 create-react-app EmailJS のインストール 依存関係として、コマンドを実行して EmailJS SDK を React アプリにインストールします。 npm install @emailjs/browser プロジェクトの実行 React アプリケーションを実行するには、プロジェクト ディレクトリに移動し、ホット リロード機能を備えた開発サーバーを実行します。これにより、開発中に加えられた変更でアプリケーションが更新されます。 次のコマンドを実行します。 cd react-contact-form-with-emailjs npm start アプリケーションは でアクセスできます。 http://localhost:3000 お問い合わせフォームの作成 連絡先フォームを介してユーザーからの応答を収集して受信することは、訪問者の目には信頼できるものになるため、Web サイトに必要な重要な機能です。 それでは、お問い合わせフォームを作成しましょう。 App.js ファイルに、次のコードをコピーして貼り付けます。 // src/App.js import React from 'react' import './App.css'; function App() { return ( Contact Form ); } export default App; お問い合わせフォームのスタイリング アプリケーションのユーザー インターフェイスは、ユーザーにとって美しく見える必要があるため、 ファイルに次のコードをコピーして貼り付けます。 App.css // src/App.css @import url(https://fonts.googleapis.com/css?family=Merriweather); html, body { background: #f1f1f1; font-family: 'Merriweather', sans-serif; padding: 1em; } h1 { text-align: center; color: #a8a8a8; } form { max-width: 600px; text-align: center; margin: 20px auto; } input, textarea { border: 0; outline: 0; padding: 1em; border-radius: 8px; display: block; width: 100%; margin-top: 1em; font-family: 'Merriweather', sans-serif; resize: none; } #input-submit { color: white; background: #e74c3c; cursor: pointer; } #input-submit:hover { box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2); } textarea { height: 126px; } .half { float: left; width: 48%; margin-bottom: 1em; } .right { width: 50%; } .left { margin-right: 2%; } @media (max-width: 480px) { .half { width: 100%; float: none; margin-bottom: 0; } } .cf:before, .cf:after { content: ' '; display: table; } .cf:after { clear: both; } すべてが正しく行われたページは次のようになります。 EmailJS のセットアップ メッセージを送信する機能のないお問い合わせフォーム ページが完成したら、フォームの内容をメールで送信するサービスを設定しましょう。 メール サービスを追加する このセクションでは、EmailJS とメール サーバーの統合について説明します。 EmailJS ダッシュボードで、[ ] タブから サービスを選択すると、 という新しいページが開きます。 メール サービス Gmail config service 次に、 と パラメーターを変更します。 は、後で連絡先フォームを初期化して EmailJS に接続する際に使用されます。 [ して ] ボタンをクリックして、変更を確認してください。 名前 サービス ID サービス ID アカウントを接続 サービスを作成 メール テンプレートの作成 メール テンプレートは、ユーザーが Web サイトのクライアント側からメッセージを送信するときに、メールの件名、メールに含まれるコンテンツ、受信トレイの宛先を含める場合に不可欠です。 ダッシュボードで、[ をクリックし、[ ] をクリックします。 Email Template] タブ Create New Template 次に、 ] タブをクリックして、[ ] と [ ] を任意のものに変更する必要があります。次の図に示すように、 は後で使用されます。 [設定 名前 テンプレート ID テンプレート ID [コンテンツ] タブに戻ると、波括弧内の値は、 、 、および など、コンタクト フォームの 要素で定義されているものと同じ値を持つ必要がある動的変数です。 message user_name user_email 環境変数の作成 環境変数 は、共有したくない公開鍵とその他の値を格納するファイルであり、あなただけに公開されます。 .env プロジェクト ディレクトリのルートで、ファイル を作成し、次を貼り付けます。 .env // .env REACT_APP_TEMPLATE_ID=TEMPLATE_ID REACT_APP_SERVICE_ID=SERVICE_ID REACT_APP_PUBLIC_KEY=API_PUBLIC_KEY 公開鍵については、[ ] タブをクリックし、 セクションに示されている値をコピーすることで見つけることができます。 Account public key EmailJS の初期化 React アプリケーションで、インストール済みパッケージ パッケージをインポートします。 @emailjs/browser 以下をコピーして貼り付けます。 // src/App.js import React from 'react' import emailjs from '@emailjs/browser'; function App() { return ( // form element ); } export default App; フォーム送信の処理 フックは、連絡先フォームの送信を処理します。 useRef ファイルのコードをコピーして更新します。 App.js // src/App.js import React, { useRef } from 'react'; // imports function App() { const form = useRef(); const sendEmail = (e) => { e.preventDefault(); emailjs .sendForm( process.env.REACT_APP_SERVICE_ID, process.env.REACT_APP_TEMPLATE_ID, form.current, process.env.REACT_APP_PUBLIC_KEY ) .then( (result) => { alert('message sent successfully...'); console.log(result.text); }, (error) => { console.log(error.text); } ); }; return ( Contact Form // div container with input element ); } export default App; 上記のコードでは、次のことが起こります。 フックがインポートされ、form という変数で初期化されます。 useRef フック は参照として使用され、 要素に割り当てられます useRef 関数で、フォームにはページの更新を停止する メソッドがあります。 sendEmail preventDefault それでも、 関数では、 関数が呼び出され、 、 、 の プロパティ、および で初期化されます。 sendEmail sendForm service ID template ID ref form .current public key メソッドで発生する成功ケースと失敗ケースのコールバック関数 .then() では、このプロジェクトの結果を見てみましょう。 確認メール 結論 アプリケーションのクライアント側でデータ リクエストを処理するために EmailJS を使用することは、連絡フォームからの応答を受け取る優れた方法です。 EmailJS は探索する他の機能を提供し、サーバーを構築したり、バックエンド開発の知識がなくても、堅牢なエクスペリエンスを提供します。ボンネットの下ですべてを行います。 以前に EmailJS を使用したことがありますか?上記の私のアプローチについてどう思いますか？以下のコメントでお知らせください！

HackerNoon Mobile

React でお問い合わせフォームを EmailJS と統合する

長すぎる; 読むには

Company Mentioned

@terieyenike

関連ストーリー