」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > React登入頁面範本原始碼

React登入頁面範本原始碼

發佈於2024-08-25
瀏覽:423

In today's web development landscape, creating an engaging and user-friendly login page is crucial for any application. This article will guide you through the process of building a feature-rich, swipeable login page using React. We'll create a modern, responsive design that seamlessly transitions between login and signup modes, complete with animated transitions and social media login options.

Preview of Login Page

React login page template Source Code

Preview of SignUp Page

React login page template Source Code

Setting Up the Project

First, ensure you have React set up in your project. We'll also be using a few additional libraries:

  • Framer Motion for animations
  • Lucide React for icons
  • Tailwind CSS for styling

You can install these dependencies using npm or yarn:

npm install react framer-motion lucide-react
# or
yarn add react framer-motion lucide-react

Make sure you have Tailwind CSS configured in your project as well.

Creating the Login/Signup Component

Let's start by creating our main component, LoginSignupPage. This component will handle the state and rendering of our login/signup form.

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;

Here, we're importing the necessary dependencies and setting up our component with state variables for the form fields and a toggle for switching between login and signup modes.

Creating Reusable Input Fields

To keep our code DRY (Don't Repeat Yourself), let's create a reusable InputField component:

const InputField = ({ icon: Icon, placeholder, type, value, onChange }) => (
  
);

This component takes an icon, placeholder text, input type, value, and onChange function as props. It renders a styled input field with an icon, making our form look sleek and consistent.

Building the Form

Now, let's create the main structure of our login/signup form:

return (
  

{isLogin ? 'Welcome back' : 'Create account'}

{!isLogin && ( setName(e.target.value)} /> )} setEmail(e.target.value)} /> setPassword(e.target.value)} />
{/* ... (submit button and social login options) */}
{/* ... (right side panel) */}
);

This code creates a responsive layout with the form on the left side. We use Framer Motion's AnimatePresence and motion.div to add smooth transitions when switching between login and signup modes.

Adding the Submit Button and Social Login Options

Let's add a submit button and social login options to our form:

{isLogin && (
)}

This code adds a submit button that changes color and text based on the current mode (login or signup). For the login mode, we also add social login options for GitHub and Twitter.

Creating the Swipeable Side Panel

To complete our swipeable login page, let's add a side panel that allows users to switch between login and signup modes:

{isLogin ? 'New here?' : 'Already have an account?'}

{isLogin ? 'Sign up and discover a great amount of new opportunities!' : 'Sign in to access your account and continue your journey!'}

This side panel changes its content and color based on the current mode. The button allows users to switch between login and signup modes, triggering the toggleMode function we defined earlier.

Adding Animations

To make our login page more engaging, we've used Framer Motion for animations. Here's how we defined the animation variants:

const formVariants = {
  hidden: { opacity: 0, x: -30 },
  visible: { opacity: 1, x: 0 },
};

These variants are applied to the motion.div wrapping our form, creating a smooth transition effect when switching between login and signup modes.

Conclusion

By following this guide, you've created a feature-rich, swipeable login page using React. This login page includes:

  1. Responsive design that works on both mobile and desktop
  2. Smooth animations when switching between login and signup modes
  3. Reusable input components with icons
  4. Social login options
  5. A swipeable side panel for easy mode switching

This modern and engaging login page will provide a great user experience for your application. Remember to add proper form validation and connect the form submission to your backend authentication system to complete the functionality.

Feel free to customize the colors, add more fields, or incorporate additional features to make this login page perfect for your specific project needs!

Frequently Asked Questions (FAQs)

After reading this article, both beginners and senior developers might have some questions. Here are some common FAQs:

For Beginners:

  1. Q: Do I need to know Tailwind CSS to implement this login page?
    A: While the example uses Tailwind CSS for styling, you don't necessarily need to use it. You can replace the Tailwind classes with your own CSS styles. However, learning Tailwind CSS can speed up your development process.

  2. Q: What is Framer Motion, and is it necessary for this project?
    A: Framer Motion is a popular animation library for React. It's used in this project to create smooth transitions between login and signup modes. While not strictly necessary, it greatly enhances the user experience. You can implement the login page without animations if you prefer.

  3. Q: How do I handle form submission and validation?
    A: This example doesn't include form submission or validation. You'll need to add an onSubmit handler to the form and implement validation logic. Consider using libraries like Formik or react-hook-form for more complex form handling.

  4. Q: Can I use this login page with any backend?
    A: Yes, this login page is frontend-only and can be integrated with any backend. You'll need to modify the form submission logic to send requests to your specific backend API.

  5. Q: How can I add more social login options?
    A: To add more social login options, you can create additional buttons similar to the GitHub and Twitter buttons. You'll need to implement the actual authentication logic for each provider separately.

For Senior Developers:

  1. Q: How can this component be optimized for performance?
    A: Some optimization strategies include:

    • Memoizing the InputField component with React.memo
    • Using the useCallback hook for event handlers
    • Implementing code-splitting to load social login components on demand
  2. Q: What considerations should be made for accessibility?
    A: To improve accessibility:

    • Add proper aria labels to inputs and buttons
    • Ensure correct heading hierarchy
    • Implement keyboard navigation for the swipeable interface
    • Provide text alternatives for icon-only buttons
  3. Q: How can this component be made more reusable across different projects?
    A: To increase reusability:

    • Extract the color scheme and styling into a theme configuration
    • Create a higher-order component or custom hook to handle authentication logic
    • Use environment variables for API endpoints and client IDs
  4. Q: What testing strategies would you recommend for this component?
    A: Consider implementing:

    • Unit tests for individual components using Jest and React Testing Library
    • Integration tests for form submission and mode switching
    • End-to-end tests using Cypress or Playwright to test the full user flow
  5. Q: How would you handle state management for a larger application incorporating this login page?
    A: For larger applications, consider:

    • Using Context API for local state management
    • Implementing Redux or MobX for global state management
    • Utilizing React Query or SWR for server state management
  6. Q: What security considerations should be taken into account?
    A: Important security considerations include:

    • Implementing HTTPS for all communications
    • Using secure HTTP-only cookies for storing authentication tokens
    • Implementing CSRF protection
    • Rate limiting login attempts to prevent brute force attacks
    • Considering two-factor authentication options

This article will really helpful for beginners !! Happy Coding❣️.

版本聲明 本文轉載於:https://dev.to/shanu001x/how-to-create-a-feature-rich-swipeable-login-page-with-react-547m?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • Websocket 或 Socket io!讓我們來看看吧!
    Websocket 或 Socket io!讓我們來看看吧!
    WebSockets 与 Socket.IO:实时对决 当谈到网络上的实时通信时,开发人员经常发现自己陷入两个选择之间:WebSockets 和 Socket.IO。这两种工具都擅长它们的工作——提供了一种在客户端和服务器之间实现双向通信的方法——但每种工具都有自己独特的个性。这有...
    程式設計 發佈於2024-11-02
  • Deno 起飛
    Deno 起飛
    网络是人类最大的软件平台,拥有超过 50 亿用户,并且还在不断增长。然而,随着 Web 开发需求的飙升,其复杂性也随之增加。在无尽的配置文件、大量的样板文件和大量的依赖项之间,开发人员花费更多的时间来进行设置,而不是构建下一个大东西。? 进入 Deno,这是一种用于 JavaScript 和 Typ...
    程式設計 發佈於2024-11-02
  • 使用 Django Rest Framework 尋找海森堡
    使用 Django Rest Framework 尋找海森堡
    The idea The idea was to create a simple platform for DEA agents, to manage information about characters from the Breaking Bad/Better Call Sa...
    程式設計 發佈於2024-11-02
  • 湯姆和傑瑞燈代碼
    湯姆和傑瑞燈代碼
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
    程式設計 發佈於2024-11-02
  • 透過實作學習 TDD:在 Umbraco 的富文本編輯器中標記成員
    透過實作學習 TDD:在 Umbraco 的富文本編輯器中標記成員
    在我正在建構的系統中,我需要能夠在網站的文字中提及 Umbraco 會員。為此,我需要建立 Umbraco 富文本編輯器的擴充:TinyMCE。 情境 作為內容編輯者,我想在訊息或文章中標記成員,以便他們收到有關其新內容的通知。 我研究了類似的實現,例如 Slack 或 X 上的...
    程式設計 發佈於2024-11-02
  • 如何在Python測試情境中模擬HTTP請求和回應?
    如何在Python測試情境中模擬HTTP請求和回應?
    Python 測試的模擬請求和回應在Python 測試中,有必要模擬模組及其功能來控制執行流程並驗證具體場景。其中,模擬 requests 模組通常用於測試依賴 HTTP 請求的函數或方法。 考慮一個包含以下程式碼的views.py 檔案:def myview(request): res1 ...
    程式設計 發佈於2024-11-02
  • 如何建立適用於 Windows、Linux 和 macOS 的 Python 條碼掃描器
    如何建立適用於 Windows、Linux 和 macOS 的 Python 條碼掃描器
    条形码扫描已成为从零售、物流到医疗保健等各个行业的重要工具。在桌面平台上,它可以快速捕获和处理信息,无需手动输入数据,从而节省时间并减少错误。在本教程中,我们将通过构建适用于 Windows、Linux 的 Python 条形码扫描仪 继续探索 Dynamsoft Capture Vision SD...
    程式設計 發佈於2024-11-02
  • ## 如何在 Python 中建立不可變物件以及為什麼 nametuple 是最好的方法?
    ## 如何在 Python 中建立不可變物件以及為什麼 nametuple 是最好的方法?
    Python 中的不可變物件在 Python 中,不變性為保護資料完整性提供了一種有價值的機制。然而,創建不可變物件會帶來一定的挑戰。 重寫 setattr常見的方法是重寫 setattr方法。然而,即使在 init 過程中也會呼叫此方法,因此它不適合建立不可變物件。 子類化 Tuple另一種策略涉...
    程式設計 發佈於2024-11-02
  • 最常被問到的 React 面試問題
    最常被問到的 React 面試問題
    如何優化 React 應用程式的效能? 1。組件應謹慎更新 實作 shouldComponentUpdate 或 React.memo 透過比較 props 或 states 來防止不必要的重新渲染。 2.使用功能組件和鉤子 帶鉤子的功能組件通常比類組件性能更高。 3.延遲載入...
    程式設計 發佈於2024-11-02
  • (Wordpress 初學者):僅將子網域從託管轉移(遷移)到另一個新託管。
    (Wordpress 初學者):僅將子網域從託管轉移(遷移)到另一個新託管。
    我只想從 Bluehost 託管轉移(遷移)一個新託管(例如 Fastcomet 或 Chemicloud)的子網域。 我想知道我遷移子網域的步驟是否正確以及我應該做什麼更改 DNS 內容...... ** 我的情況1:** – 主 Web 網域(例如:forcleanworld.com)保留在 ...
    程式設計 發佈於2024-11-02
  • 使用 Java 進行資料分析:資訊處理初學者指南
    使用 Java 進行資料分析:資訊處理初學者指南
    Java 是適用於資料分析的強大語言,它提供用於處理大型資料集和執行複雜分析的基礎結構,包括:資料結構:用於儲存和組織資料的集合,例如陣列和清單。 IO 流:用於讀取和寫入檔案的物件。 Java 集合框架:用於管理和操作資料結構的強大集合類別庫。使用 Java 進行資料分析的實際案例包括分析文字文件...
    程式設計 發佈於2024-11-02
  • 僱用自由 Python 開發人員時要避免的常見錯誤
    僱用自由 Python 開發人員時要避免的常見錯誤
    介紹 聘請合適的自由 Python 開發人員可以決定你的專案的成敗。然而,許多企業在招募過程中會犯一些常見的錯誤,這些錯誤可能會導致招募延遲、成本超支和結果不佳。以下是如何避免這些陷阱並確保專案成功的方法。 沒有明確定義專案要求 最常見的錯誤之一是在開始招募流程之...
    程式設計 發佈於2024-11-02
  • AWS SAM Lambda 專案的本機開發伺服器
    AWS SAM Lambda 專案的本機開發伺服器
    现在我正在开发一个项目,其中使用 AWS lambda 作为请求处理程序构建 REST API。整个过程使用 AWS SAM 定义 lambda、层并将其连接到漂亮的 template.yaml 文件中的 Api 网关。 问题 在本地测试此 API 并不像其他框架那样简单。虽然 AW...
    程式設計 發佈於2024-11-02
  • 什麼是 React?
    什麼是 React?
    最近,我决定通过注册 元前端开发人员专业证书将我的技能提升到一个新的水平。 专业化涵盖各种主题,从基本的 Web 开发语言(例如 HTML、CSS 和 JavaScript)到高级框架 React。 通过这篇文章和以下博客文章,我的目标是分享我在通过认证过程中的经验、学习和进步。 所以… ...
    程式設計 發佈於2024-11-02
  • 如何在C++中實作虛擬運算子重載?
    如何在C++中實作虛擬運算子重載?
    虛擬運算子重載背景在 C 中,可以為自訂資料類型重載運算符,從而提供客製化的行為。然而,允許多態行為的虛擬方法不能直接用於運算子重載。 問題考慮創建一個虛擬運算子
    程式設計 發佈於2024-11-02

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3