ホームページ >ウェブフロントエンド >jsチュートリアル >React ログイン ページ テンプレートのソース コード
React ログイン ページ テンプレートのソース コード
- PHPzオリジナル
- 2024-08-16 06:01:02586ブラウズ
今日の Web 開発環境では、魅力的でユーザーフレンドリーなログイン ページを作成することが、どのアプリケーションにとっても重要です。この記事では、React を使用して機能豊富でスワイプ可能なログイン ページを構築するプロセスについて説明します。ログイン モードとサインアップ モードの間でシームレスに移行し、アニメーションによる移行やソーシャル メディア ログイン オプションを備えた、最新の応答性の高いデザインを作成します。
ログインページのプレビュー
サインアップページのプレビュー
プロジェクトのセットアップ
まず、プロジェクトに React がセットアップされていることを確認します。また、いくつかの追加ライブラリも使用します:
- アニメーション用のフレーマー モーション
- アイコン用 Lucide React
- スタイリング用の Tailwind CSS
これらの依存関係は、npm または Yarn を使用してインストールできます。
npm install react framer-motion lucide-react # or yarn add react framer-motion lucide-react
プロジェクトでも Tailwind CSS が設定されていることを確認してください。
ログイン/サインアップコンポーネントの作成
メインコンポーネントである LoginSignupPage を作成することから始めましょう。このコンポーネントは、ログイン/サインアップ フォームの状態とレンダリングを処理します。
import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Mail, Lock, User, ArrowRight, Github, Twitter } from 'lucide-react';
const LoginSignupPage = () => {
const [isLogin, setIsLogin] = useState(true);
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [name, setName] = useState('');
const toggleMode = () => setIsLogin(!isLogin);
// ... (rest of the component)
};
export default LoginSignupPage;
ここでは、必要な依存関係をインポートし、フォームフィールドの状態変数とログインモードとサインアップモードを切り替えるためのトグルを使用してコンポーネントを設定しています。
再利用可能な入力フィールドの作成
コードを DRY (同じことを繰り返さない) に保つために、再利用可能な InputField コンポーネントを作成しましょう:
const InputField = ({ icon: Icon, placeholder, type, value, onChange }) => (
<div className="flex items-center bg-gray-100 p-3 rounded-lg">
<Icon className="text-gray-500 mr-3" size={20} />
<input
type={type}
placeholder={placeholder}
value={value}
onChange={onChange}
className="bg-transparent outline-none flex-1 text-gray-800"
/>
</div>
);
このコンポーネントは、アイコン、プレースホルダー テキスト、入力タイプ、値、および onChange 関数を小道具として受け取ります。アイコン付きのスタイル付き入力フィールドをレンダリングし、フォームを洗練された一貫したものにします。
フォームの構築
次に、ログイン/サインアップ フォームのメイン構造を作成しましょう。
return (
<div className="flex flex-col md:flex-row h-screen bg-gray-100">
<div className="w-full md:w-1/2 bg-white flex items-center justify-center p-8 md:p-16">
<div className="w-full max-w-md">
<AnimatePresence mode="wait">
<motion.div
key={isLogin ? 'login' : 'signup'}
initial="hidden"
animate="visible"
exit="hidden"
variants={formVariants}
transition={{ duration: 0.3 }}
>
<h1 className="text-3xl md:text-4xl font-bold mb-8 text-gray-800">
{isLogin ? 'Welcome back' : 'Create account'}
</h1>
<div className="space-y-4">
{!isLogin && (
<InputField
icon={User}
placeholder="Full Name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
)}
<InputField
icon={Mail}
placeholder="Email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<InputField
icon={Lock}
placeholder="Password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
{/* ... (submit button and social login options) */}
</motion.div>
</AnimatePresence>
</div>
</div>
{/* ... (right side panel) */}
</div>
);
このコードは、左側にフォームを備えたレスポンシブ レイアウトを作成します。 Framer Motion の AnimatePresence と motion.div を使用して、ログイン モードとサインアップ モードを切り替えるときにスムーズな遷移を追加します。
送信ボタンとソーシャルログインオプションの追加
フォームに送信ボタンとソーシャル ログイン オプションを追加しましょう:
<div className="mt-8">
<button
className={`text-white px-6 py-3 rounded-lg w-full flex items-center justify-center ${isLogin ? 'bg-blue-600' : 'bg-green-600'}`}
>
{isLogin ? 'Sign In' : 'Sign Up'} <ArrowRight className="ml-2" size={20} />
</button>
</div>
{isLogin && (
<div className="mt-6 flex justify-center space-x-4">
<button className="p-2 bg-gray-200 rounded-full">
<Github className="text-gray-700 hover:text-white" size={24} />
</button>
<button className="p-2 bg-gray-200 rounded-full">
<Twitter className="text-gray-700 hover:text-white" size={24} />
</button>
</div>
)}
このコードは、現在のモード (ログインまたはサインアップ) に基づいて色とテキストを変更する送信ボタンを追加します。ログイン モードについては、GitHub と Twitter のソーシャル ログイン オプションも追加しました。
スワイプ可能なサイドパネルの作成
スワイプ可能なログイン ページを完成させるために、ユーザーがログイン モードとサインアップ モードを切り替えられるようにするサイド パネルを追加しましょう。
<div
className={`w-full md:w-1/2 flex items-center justify-center p-8 md:p-16 ${isLogin ? 'bg-blue-600' : 'bg-green-600'}`}
>
<div className="text-center">
<h2 className="text-3xl md:text-4xl font-bold mb-6 text-white">
{isLogin ? 'New here?' : 'Already have an account?'}
</h2>
<p className="text-gray-200 mb-8">
{isLogin
? 'Sign up and discover a great amount of new opportunities!'
: 'Sign in to access your account and continue your journey!'}
</p>
<button
className="bg-white px-6 py-3 rounded-lg"
style={{ color: isLogin ? '#2563EB' : '#059669' }}
onClick={toggleMode}
>
{isLogin ? 'Sign Up' : 'Sign In'}
</button>
</div>
</div>
このサイドパネルは、現在のモードに基づいて内容と色を変更します。このボタンを使用すると、ユーザーはログイン モードとサインアップ モードを切り替えることができ、前に定義した toggleMode 関数をトリガーできます。
アニメーションの追加
ログイン ページをより魅力的なものにするために、アニメーションに Framer Motion を使用しました。アニメーションのバリアントを定義する方法は次のとおりです:
const formVariants = {
hidden: { opacity: 0, x: -30 },
visible: { opacity: 1, x: 0 },
};
これらのバリアントは、フォームをラップする motion.div に適用され、ログイン モードとサインアップ モードを切り替えるときにスムーズな移行効果を作成します。
結論
このガイドに従うと、React を使用して機能豊富でスワイプ可能なログイン ページが作成されました。このログイン ページには次のものが含まれます:
- モバイルとデスクトップの両方で動作するレスポンシブデザイン
- ログイン モードとサインアップ モードを切り替えるときのスムーズなアニメーション
- アイコン付きの再利用可能な入力コンポーネント
- ソーシャルログインオプション
- 簡単にモードを切り替えられるスワイプ可能なサイドパネル
このモダンで魅力的なログイン ページは、アプリケーションに優れたユーザー エクスペリエンスを提供します。適切なフォーム検証を追加し、フォーム送信をバックエンド認証システムに接続して機能を完了することを忘れないでください。
自由に色をカスタマイズしたり、フィールドを追加したり、追加機能を組み込んだりして、このログイン ページを特定のプロジェクトのニーズに最適なものにしてください!
よくある質問 (FAQ)
この記事を読んだ後、初心者も上級開発者もいくつかの質問があるかもしれません。よくある FAQ をいくつか示します:
初心者向け:
Q: このログイン ページを実装するには、Tailwind CSS を知る必要がありますか?
A: この例ではスタイル設定に Tailwind CSS を使用していますが、必ずしも使用する必要はありません。 Tailwind クラスを独自の CSS スタイルに置き換えることができます。ただし、Tailwind CSS を学習すると、開発プロセスをスピードアップできます。Q: Framer Motion とは何ですか?このプロジェクトには必要ですか?
A: Framer Motion は、React 用の人気のあるアニメーション ライブラリです。このプロジェクトでは、ログイン モードとサインアップ モード間のスムーズな移行を作成するために使用されます。厳密には必須ではありませんが、ユーザー エクスペリエンスは大幅に向上します。必要に応じて、アニメーションなしでログイン ページを実装することもできます。Q: フォームの送信と検証はどのように処理すればよいですか?
A: この例には、フォームの送信や検証は含まれていません。 onSubmit ハンドラーをフォームに追加し、検証ロジックを実装する必要があります。より複雑なフォーム処理には、Formik や React-hook-form などのライブラリの使用を検討してください。Q: このログイン ページはどのバックエンドでも使用できますか?
A: はい、このログイン ページはフロントエンド専用であり、あらゆるバックエンドと統合できます。リクエストを特定のバックエンド API に送信するには、フォーム送信ロジックを変更する必要があります。Q: ソーシャル ログイン オプションをさらに追加するにはどうすればよいですか?
A: ソーシャル ログイン オプションをさらに追加するには、GitHub ボタンや Twitter ボタンと同様の追加のボタンを作成できます。実際の認証ロジックはプロバイダーごとに個別に実装する必要があります。
上級開発者向け:
-
Q: このコンポーネントのパフォーマンスを最適化するにはどうすればよいですか?
A: 最適化戦略には次のものがあります。- React.memo を使用した InputField コンポーネントのメモ化
- イベント ハンドラーに useCallback フックを使用する
- ソーシャル ログイン コンポーネントをオンデマンドで読み込むためのコード分割の実装
-
Q: アクセシビリティに関してどのような考慮が必要ですか?
A: アクセシビリティを向上するには:- 入力とボタンに適切な aria ラベルを追加します
- 正しい見出し階層を確認してください
- スワイプ可能なインターフェイスにキーボード ナビゲーションを実装します
- アイコンのみのボタンに代替テキストを提供する
-
Q: このコンポーネントをさまざまなプロジェクト間で再利用しやすくするにはどうすればよいですか?
A: 再利用性を高めるには:- 配色とスタイルをテーマ構成に抽出します
- 認証ロジックを処理するための上位コンポーネントまたはカスタム フックを作成します
- API エンドポイントとクライアント ID に環境変数を使用する
-
Q: このコンポーネントに対してどのようなテスト戦略をお勧めしますか?
A: 以下の実装を検討してください:- Jest および React テスト ライブラリを使用した個々のコンポーネントの単体テスト
- フォーム送信とモード切り替えの統合テスト
- Cypress または Playwright を使用して完全なユーザー フローをテストするエンドツーエンド テスト
-
Q: このログイン ページを組み込んだ大規模なアプリケーションの状態管理はどのように処理しますか?
A: 大規模なアプリケーションの場合は、次のことを考慮してください。- ローカル状態管理に Context API を使用する
- グローバル状態管理のための Redux または MobX の実装
- サーバー状態管理に React Query または SWR を利用する
-
Q: どのようなセキュリティ上の考慮事項を考慮する必要がありますか?
A: セキュリティに関する重要な考慮事項は次のとおりです。- すべての通信に HTTPS を実装
- 認証トークンの保存にセキュアな HTTP 専用 Cookie を使用する
- CSRF 保護の実装
- ブルート フォース攻撃を防ぐためにログイン試行を制限します
- 2 要素認証オプションの検討
この記事は初心者にとって非常に役立ちます!!コーディングを楽しんでください❣️。
以上がReact ログイン ページ テンプレートのソース コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。