今日の Web 開発環境では、魅力的でユーザーフレンドリーなログイン ページを作成することが、どのアプリケーションにとっても重要です。この記事では、React を使用して機能豊富でスワイプ可能なログイン ページを構築するプロセスについて説明します。ログイン モードとサインアップ モードの間でシームレスに移行し、アニメーションによる移行やソーシャル メディア ログイン オプションを備えた、最新の応答性の高いデザインを作成します。
ログインページのプレビュー
サインアップページのプレビュー
まず、プロジェクトに React がセットアップされていることを確認します。また、いくつかの追加ライブラリも使用します:
これらの依存関係は、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 をいくつか示します:
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: 最適化戦略には次のものがあります。
Q: アクセシビリティに関してどのような考慮が必要ですか?
A: アクセシビリティを向上するには:
Q: このコンポーネントをさまざまなプロジェクト間で再利用しやすくするにはどうすればよいですか?
A: 再利用性を高めるには:
Q: このコンポーネントに対してどのようなテスト戦略をお勧めしますか?
A: 以下の実装を検討してください:
Q: このログイン ページを組み込んだ大規模なアプリケーションの状態管理はどのように処理しますか?
A: 大規模なアプリケーションの場合は、次のことを考慮してください。
Q: どのようなセキュリティ上の考慮事項を考慮する必要がありますか?
A: セキュリティに関する重要な考慮事項は次のとおりです。
この記事は初心者にとって非常に役立ちます!!コーディングを楽しんでください❣️。
以上がReact ログイン ページ テンプレートのソース コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
