Dans le paysage actuel du développement Web, la création d'une page de connexion attrayante et conviviale est cruciale pour toute application. Cet article vous guidera tout au long du processus de création d'une page de connexion riche en fonctionnalités et glissante à l'aide de React. Nous créerons un design moderne et réactif qui transitionne de manière transparente entre les modes de connexion et d'inscription, avec des transitions animées et des options de connexion aux réseaux sociaux.
Aperçu de la page de connexion
Aperçu de la page d'inscription
Tout d’abord, assurez-vous que React est configuré dans votre projet. Nous utiliserons également quelques bibliothèques supplémentaires :
Vous pouvez installer ces dépendances en utilisant npm ou Yarn :
npm install react framer-motion lucide-react # or yarn add react framer-motion lucide-react
Assurez-vous également que Tailwind CSS est configuré dans votre projet.
Commençons par créer notre composant principal, LoginSignupPage. Ce composant gérera l'état et le rendu de notre formulaire de connexion/inscription.
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;
Ici, nous importons les dépendances nécessaires et configurons notre composant avec des variables d'état pour les champs du formulaire et une bascule pour basculer entre les modes de connexion et d'inscription.
Pour garder notre code SEC (Ne vous répétez pas), créons un composant InputField réutilisable :
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>
);
Ce composant prend comme accessoires une icône, un texte d'espace réservé, un type d'entrée, une valeur et une fonction onChange. Il affiche un champ de saisie stylisé avec une icône, ce qui donne à notre formulaire un aspect élégant et cohérent.
Maintenant, créons la structure principale de notre formulaire de connexion/inscription :
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>
);
Ce code crée une mise en page responsive avec le formulaire sur le côté gauche. Nous utilisons AnimatePresence et motion.div de Framer Motion pour ajouter des transitions fluides lors du basculement entre les modes de connexion et d'inscription.
Ajoutons un bouton d'envoi et des options de connexion sociale à notre formulaire :
<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>
)}
Ce code ajoute un bouton de soumission qui change la couleur et le texte en fonction du mode actuel (connexion ou inscription). Pour le mode de connexion, nous ajoutons également des options de connexion sociale pour GitHub et Twitter.
Pour compléter notre page de connexion glissante, ajoutons un panneau latéral qui permet aux utilisateurs de basculer entre les modes de connexion et d'inscription :
<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>
Ce panneau latéral modifie son contenu et sa couleur en fonction du mode actuel. Le bouton permet aux utilisateurs de basculer entre les modes de connexion et d'inscription, déclenchant la fonction toggleMode que nous avons définie précédemment.
Pour rendre notre page de connexion plus attrayante, nous avons utilisé Framer Motion pour les animations. Voici comment nous avons défini les variantes d'animation :
const formVariants = {
hidden: { opacity: 0, x: -30 },
visible: { opacity: 1, x: 0 },
};
Ces variantes sont appliquées au motion.div enveloppant notre formulaire, créant un effet de transition en douceur lors du basculement entre les modes de connexion et d'inscription.
En suivant ce guide, vous avez créé une page de connexion riche en fonctionnalités et glissante à l'aide de React. Cette page de connexion comprend :
Cette page de connexion moderne et attrayante offrira une excellente expérience utilisateur pour votre application. N'oubliez pas d'ajouter une validation de formulaire appropriée et de connecter la soumission du formulaire à votre système d'authentification backend pour compléter la fonctionnalité.
N'hésitez pas à personnaliser les couleurs, à ajouter plus de champs ou à incorporer des fonctionnalités supplémentaires pour rendre cette page de connexion parfaite pour les besoins spécifiques de votre projet !
Après avoir lu cet article, les développeurs débutants et expérimentés pourraient avoir quelques questions. Voici quelques FAQ courantes :
Q : Dois-je connaître Tailwind CSS pour implémenter cette page de connexion ?
R : Bien que l'exemple utilise Tailwind CSS pour le style, vous n'avez pas nécessairement besoin de l'utiliser. Vous pouvez remplacer les classes Tailwind par vos propres styles CSS. Cependant, apprendre Tailwind CSS peut accélérer votre processus de développement.
Q : Qu'est-ce que Framer Motion et est-il nécessaire pour ce projet ?
R : Framer Motion est une bibliothèque d'animation populaire pour React. Il est utilisé dans ce projet pour créer des transitions fluides entre les modes de connexion et d'inscription. Bien que cela ne soit pas strictement nécessaire, cela améliore considérablement l’expérience utilisateur. Vous pouvez implémenter la page de connexion sans animations si vous préférez.
Q : Comment gérer la soumission et la validation du formulaire ?
R : Cet exemple n'inclut pas la soumission ou la validation du formulaire. Vous devrez ajouter un gestionnaire onSubmit au formulaire et implémenter une logique de validation. Pensez à utiliser des bibliothèques comme Formik ou React-hook-form pour une gestion de formulaire plus complexe.
Q : Puis-je utiliser cette page de connexion avec n'importe quel backend ?
R : Oui, cette page de connexion est uniquement frontale et peut être intégrée à n’importe quel backend. Vous devrez modifier la logique de soumission du formulaire pour envoyer des requêtes à votre API backend spécifique.
Q : Comment puis-je ajouter plus d'options de connexion sociale ?
R : Pour ajouter davantage d'options de connexion sociale, vous pouvez créer des boutons supplémentaires similaires aux boutons GitHub et Twitter. Vous devrez implémenter la logique d'authentification réelle pour chaque fournisseur séparément.
Q : Comment ce composant peut-il être optimisé pour les performances ?
R : Certaines stratégies d'optimisation incluent :
Q : Quelles considérations doivent être prises en compte en matière d'accessibilité ?
R : Pour améliorer l'accessibilité :
Q : Comment rendre ce composant plus réutilisable dans différents projets ?
R : Pour augmenter la réutilisabilité :
Q : Quelles stratégies de test recommanderiez-vous pour ce composant ?
R : Envisagez de mettre en œuvre :
Q : Comment géreriez-vous la gestion de l'état pour une application plus grande intégrant cette page de connexion ?
R : Pour les applications plus importantes, pensez à :
Q : Quelles considérations de sécurité doivent être prises en compte ?
R : Les considérations de sécurité importantes incluent :
Cet article sera vraiment utile pour les débutants !! Bon codage❣️.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Tutoriel sur l'achat et la vente de Bitcoin sur Huobi.com
Comment ouvrir VT
Comment convertir Excel en VCF
Comment vérifier les liens morts sur votre site Web
Comment changer le type de fichier dans Win7
Quelle est la différence entre JD International auto-exploité et JD auto-opéré
Le rôle des commandes du terminal Linux
Comment écrire un triangle en CSS
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
