S03L01 - React js के साथ लॉगिन पृष्ठ

html

React में एक सरल लॉगिन पेज बनाना: कदम-दर-कदम मार्गदर्शिका
सामग्री तालिका

परिचय
प्रोजेक्ट सेटअप करना
लॉगिन स्क्रीन अपडेट करना
प्रमाणीकरण लॉजिक को सरल बनाना
फॉर्म तत्वों को लागू करना
useState के साथ स्थिति प्रबंधन
उपयोगकर्ता इनपुट्स को मान्य करना
त्रुटियों और प्रतिक्रिया को संभालना
Material UI घटकों को एकीकृत करना
लॉगिन कार्यक्षमता को अंतिम रूप देना
निष्कर्ष


परिचय
React का उपयोग करके एक सरल लॉगिन पेज बनाने पर इस व्यापक मार्गदर्शिका में आपका स्वागत है। आज के वेब विकास परिदृश्य में, सहज और सुरक्षित प्रमाणीकरण प्रणालियों का निर्माण अत्यंत महत्वपूर्ण है। यह eBook आपको लॉगिन स्क्रीन को अपडेट और सरल बनाने, स्थिति प्रबंधित करने, उपयोगकर्ता इनपुट्स को मान्य करने, और उपयोगकर्ता अनुभव बढ़ाने के लिए Material UI घटकों को एकीकृत करने की प्रक्रिया के माध्यम से ले जाएगा।
लॉगिन पेज को सरल क्यों बनाएं?
एक सुव्यवस्थित लॉगिन पेज उपयोगकर्ता अनुभव को बेहतर बनाता है, अवरोध को कम करता है और सुलभता बढ़ाता है। प्रमाणीकरण प्रक्रिया को सरल बनाना न केवल एप्लिकेशन को अधिक उपयोगकर्ता के अनुकूल बनाता है बल्कि बैकेंड एकीकरण और स्केलेबिलिटी के लिए एक ठोस आधार भी प्रदान करता है।

प्रोजेक्ट सेटअप करना
कोड में गोता लगाने से पहले, सुनिश्चित करें कि आपके पास आवश्यक उपकरण और परिवेश सेटअप हैं:

Node.js और npm/yarn: सुनिश्चित करें कि आपके पास Node.js इंस्टॉल है, जो npm के साथ आता है। वैकल्पिक रूप से, आप yarn को अपना पैकेज मैनेजर के रूप में उपयोग कर सकते हैं।
React Environment: एक नया React प्रोजेक्ट बनाएं या एक मौजूदा प्रोजेक्ट का उपयोग करें जहाँ आप लॉगिन कार्यक्षमता को लागू करना चाहते हैं।





		
		
			
			
Java
			
			<pre>
npx create-react-app my-login-app
cd my-login-app
			
				
					
				
					1
2
3
				
						<pre>
npx create-react-app my-login-app
cd my-login-app
					
				
			
		




लॉगिन स्क्रीन अपडेट करना
पहला कदम मौजूदा लॉगिन स्क्रीन को अपडेट करना है ताकि इसे अधिक सरल और प्रबंधनीय बनाया जा सके।
वर्तमान संरचना
वर्तमान लॉगिन स्क्रीन में शामिल हैं:

Email Address Field
Password Field
Login Button

हालांकि, मौजूदा कार्यान्वयन आवश्यक से अधिक को संभाल सकता है, जिससे यह जटिल हो जाता है। हमारा लक्ष्य इस संरचना को सरल बनाना है।

प्रमाणीकरण लॉजिक को सरल बनाना
प्रमाणीकरण लॉजिक पारंपरिक रूप से कई फाइलों और घटकों में विभाजित होता है, जो सरल अनुप्रयोगों के लिए अधिक हो सकता है। इसे सुव्यवस्थित करने के लिए यहाँ हैं:

प्रमाणीकरण रूट्स की पहचान करें: मुख्य रूट और लॉगिन रूट को खोजें जो उपयोगकर्ता प्रमाणीकरण के लिए जिम्मेदार हैं।
Simplify authLogin Method: authLogin विधि उपयोगकर्ता प्रमाणीकरण को संभालती है। हम इस विधि को अनावश्यक जटिलता को हटाने के लिए सरल बनाएंगे।

Refactoring login.js
मूल login.js एक अत्यधिक जटिल प्रमाणीकरण प्रक्रिया का उपयोग करता है। हम इसे एक खाली विधि में पुनःसंरचित करेंगे, ताकि इसे हमारे सरल लॉगिन लॉजिक के लिए तैयार किया जा सके।




		
		
			
			
Java
			
			<pre>
// login.js
import React from 'react';

const AuthLogin = () => {
  return (
    &lt;div&gt;
      {/* Simplified Login Form */}
    &lt;/div&gt;
  );
};

export default AuthLogin;
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
				
						<pre>
// login.js
import React from 'react';
 
const AuthLogin = () => {
  return (
    &lt;div&gt;
      {/* Simplified Login Form */}
    &lt;/div&gt;
  );
};
 
export default AuthLogin;
					
				
			
		




फॉर्म तत्वों को लागू करना
प्रमाणीकरण लॉजिक को सरल बनाने के साथ, अगला कदम उपयोगकर्ता लॉगिन के लिए आवश्यक फॉर्म तत्वों को लागू करना है।
Container और Form Fields जोड़ना
हम Material UI के Container, TextField, और Button घटकों का उपयोग करके एक प्रतिक्रियाशील और सुंदर फॉर्म बनाएंगे।




		
		
			
			
Java
			
			<pre>
// AuthLogin.js
import React, { useState } from 'react';
import { Container, TextField, Button } from '@material-ui/core';

const AuthLogin = () => {
  // State and handlers will be added here

  return (
    &lt;Container&gt;
      &lt;form&gt;
        &lt;TextField
          label="Email"
          fullWidth
          margin="normal"
          // Additional props
        /&gt;
        &lt;TextField
          label="Password"
          type="password"
          fullWidth
          margin="normal"
          // Additional props
        /&gt;
        &lt;Button variant="contained" color="primary"&gt;
          Login
        &lt;/Button&gt;
      &lt;/form&gt;
    &lt;/Container&gt;
  );
};

export default AuthLogin;
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
				
						<pre>
// AuthLogin.js
import React, { useState } from 'react';
import { Container, TextField, Button } from '@material-ui/core';
 
const AuthLogin = () => {
  // State and handlers will be added here
 
  return (
    &lt;Container&gt;
      &lt;form&gt;
        &lt;TextField
          label="Email"
          fullWidth
          margin="normal"
          // Additional props
        /&gt;
        &lt;TextField
          label="Password"
          type="password"
          fullWidth
          margin="normal"
          // Additional props
        /&gt;
        &lt;Button variant="contained" color="primary"&gt;
          Login
        &lt;/Button&gt;
      &lt;/form&gt;
    &lt;/Container&gt;
  );
};
 
export default AuthLogin;
					
				
			
		




useState के साथ स्थिति प्रबंधन
फॉर्म डेटा को प्रबंधित करना उपयोगकर्ता इनपुट्स और मान्यताओं को संभालने के लिए महत्वपूर्ण है। React का useState हुक कार्यात्मक घटकों में स्थिति प्रबंधन के लिए एक सुंदर समाधान प्रदान करता है।
State Variables सेट करना
हम ईमेल, पासवर्ड, और त्रुटियों के लिए स्थिति वेरिएबल सेट करेंगे।




		
		
			
			
Java
			
			<pre>
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [errors, setErrors] = useState({});
			
				
					
				
					1
2
3
4
				
						<pre>
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [errors, setErrors] = useState({});
					
				
			
		




उपयोगकर्ता इनपुट्स को मान्य करना
मान्यताएं सुनिश्चित करती हैं कि उपयोगकर्ता के इनपुट्स अपेक्षित रूप से हैं, जिससे सुरक्षा और उपयोगकर्ता अनुभव में सुधार होता है।
Email Validation
हम ईमेल प्रारूप की सहीता की पुष्टि करने के लिए एक नियमित अभिव्यक्ति का उपयोग करेंगे।




		
		
			
			
Java
			
			<pre>
const validateEmail = (email) =&gt; {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
};
			
				
					
				
					1
2
3
4
5
				
						<pre>
const validateEmail = (email) =&gt; {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
};
					
				
			
		



Password Validation
सुनिश्चित करना कि पासवर्ड आवश्यक लंबाई पूरी करता है एक अतिरिक्त सुरक्षा परत जोड़ता है।




		
		
			
			
Java
			
			<pre>
const validatePassword = (password) =&gt; {
  return password.length &gt; 6 && password.length &lt; 15;
};
			
				
					
				
					1
2
3
4
				
						<pre>
const validatePassword = (password) =&gt; {
  return password.length &gt; 6 && password.length &lt; 15;
};
					
				
			
		




त्रुटियों और प्रतिक्रिया को संभालना
रीयल-टाइम प्रतिक्रिया प्रदान करना उपयोगकर्ताओं को अपने इनपुट्स को तुरंत ठीक करने में मदद करता है।
Implementing handleLogin
handleLogin फ़ंक्शन फॉर्म सबमिशन और मान्यताओं को प्रबंधित करेगा।




		
		
			
			
Java
			
			<pre>
const handleLogin = (e) =&gt; {
  e.preventDefault();
  const newErrors = {};

  if (!validateEmail(email)) {
    newErrors.email = 'अमान्य ईमेल प्रारूप।';
  }

  if (!validatePassword(password)) {
    newErrors.password = 'पासवर्ड 6 और 15 वर्णों के बीच होना चाहिए।';
  }

  setErrors(newErrors);

  if (Object.keys(newErrors).length === 0) {
    console.log('Login Successful:', { email, password });
    // Proceed with backend integration
  }
};
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
				
						<pre>
const handleLogin = (e) =&gt; {
  e.preventDefault();
  const newErrors = {};
 
  if (!validateEmail(email)) {
    newErrors.email = 'अमान्य ईमेल प्रारूप।';
  }
 
  if (!validatePassword(password)) {
    newErrors.password = 'पासवर्ड 6 और 15 वर्णों के बीच होना चाहिए।';
  }
 
  setErrors(newErrors);
 
  if (Object.keys(newErrors).length === 0) {
    console.log('Login Successful:', { email, password });
    // Proceed with backend integration
  }
};
					
				
			
		



Displaying Error Messages
हम मान्यकरण परिणामों के आधार पर त्रुटि संदेश प्रदर्शित करने के लिए TextField घटकों को संशोधित करेंगे।




		
		
			
			
Java
			
			<pre>
&lt;TextField
  label="Email"
  fullWidth
  margin="normal"
  value={email}
  onChange={(e) =&gt; setEmail(e.target.value)}
  error={!!errors.email}
  helperText={errors.email}
/&gt;
&lt;TextField
  label="Password"
  type="password"
  fullWidth
  margin="normal"
  value={password}
  onChange={(e) =&gt; setPassword(e.target.value)}
  error={!!errors.password}
  helperText={errors.password}
/&gt;
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
				
						<pre>
&lt;TextField
  label="Email"
  fullWidth
  margin="normal"
  value={email}
  onChange={(e) =&gt; setEmail(e.target.value)}
  error={!!errors.email}
  helperText={errors.email}
/&gt;
&lt;TextField
  label="Password"
  type="password"
  fullWidth
  margin="normal"
  value={password}
  onChange={(e) =&gt; setPassword(e.target.value)}
  error={!!errors.password}
  helperText={errors.password}
/&gt;
					
				
			
		




Material UI घटकों को एकीकृत करना
Material UI गूगल के Material Design को लागू करने वाले React घटकों का एक सेट प्रदान करता है, जो प्रतिक्रियाशील और दृश्य अपील वाले इंटरफेस बनाने में सहायक होता है।
Installing Material UI
सबसे पहले, Material UI घटकों को इंस्टॉल करें।




		
		
			
			
Java
			
			<pre>
npm install @material-ui/core
			
				
					
				
					1
2
				
						<pre>
npm install @material-ui/core
					
				
			
		



Importing Components
सुनिश्चित करें कि सभी आवश्यक घटक आपके AuthLogin घटक में इंपोर्ट किए गए हैं।




		
		
			
			
Java
			
			<pre>
import { Container, TextField, Button } from '@material-ui/core';
			
				
					
				
					1
2
				
						<pre>
import { Container, TextField, Button } from '@material-ui/core';
					
				
			
		




लॉगिन कार्यक्षमता को अंतिम रूप देना
सभी घटकों के स्थान पर होने के साथ, हम सब कुछ एक साथ जोड़कर लॉगिन कार्यक्षमता को अंतिम रूप देंगे।
Complete AuthLogin Component




		
		
			
			
Java
			
			<pre>
import React, { useState } from 'react';
import { Container, TextField, Button } from '@material-ui/core';

const AuthLogin = () =&gt; {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({});

  const validateEmail = (email) =&gt; {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
  };

  const validatePassword = (password) =&gt; {
    return password.length &gt; 6 && password.length &lt; 15;
  };

  const handleLogin = (e) =&gt; {
    e.preventDefault();
    const newErrors = {};

    if (!validateEmail(email)) {
      newErrors.email = 'अमान्य ईमेल प्रारूप।';
    }

    if (!validatePassword(password)) {
      newErrors.password = 'पासवर्ड 6 और 15 वर्णों के बीच होना चाहिए।';
    }

    setErrors(newErrors);

    if (Object.keys(newErrors).length === 0) {
      console.log('Login Successful:', { email, password });
      // Proceed with backend integration
    }
  };

  return (
    &lt;Container maxWidth="sm"&gt;
      &lt;h2&gt;लॉगिन&lt;/h2&gt;
      &lt;form onSubmit={handleLogin}&gt;
        &lt;TextField
          label="Email"
          fullWidth
          margin="normal"
          value={email}
          onChange={(e) =&gt; setEmail(e.target.value)}
          error={!!errors.email}
          helperText={errors.email}
        /&gt;
        &lt;TextField
          label="Password"
          type="password"
          fullWidth
          margin="normal"
          value={password}
          onChange={(e) =&gt; setPassword(e.target.value)}
          error={!!errors.password}
          helperText={errors.password}
        /&gt;
        &lt;Button variant="contained" color="primary" type="submit"&gt;
          Login
        &lt;/Button&gt;
      &lt;/form&gt;
    &lt;/Container&gt;
  );
};

export default AuthLogin;
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
				
						<pre>
import React, { useState } from 'react';
import { Container, TextField, Button } from '@material-ui/core';
 
const AuthLogin = () =&gt; {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({});
 
  const validateEmail = (email) =&gt; {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
  };
 
  const validatePassword = (password) =&gt; {
    return password.length &gt; 6 && password.length &lt; 15;
  };
 
  const handleLogin = (e) =&gt; {
    e.preventDefault();
    const newErrors = {};
 
    if (!validateEmail(email)) {
      newErrors.email = 'अमान्य ईमेल प्रारूप।';
    }
 
    if (!validatePassword(password)) {
      newErrors.password = 'पासवर्ड 6 और 15 वर्णों के बीच होना चाहिए।';
    }
 
    setErrors(newErrors);
 
    if (Object.keys(newErrors).length === 0) {
      console.log('Login Successful:', { email, password });
      // Proceed with backend integration
    }
  };
 
  return (
    &lt;Container maxWidth="sm"&gt;
      &lt;h2&gt;लॉगिन&lt;/h2&gt;
      &lt;form onSubmit={handleLogin}&gt;
        &lt;TextField
          label="Email"
          fullWidth
          margin="normal"
          value={email}
          onChange={(e) =&gt; setEmail(e.target.value)}
          error={!!errors.email}
          helperText={errors.email}
        /&gt;
        &lt;TextField
          label="Password"
          type="password"
          fullWidth
          margin="normal"
          value={password}
          onChange={(e) =&gt; setPassword(e.target.value)}
          error={!!errors.password}
          helperText={errors.password}
        /&gt;
        &lt;Button variant="contained" color="primary" type="submit"&gt;
          Login
        &lt;/Button&gt;
      &lt;/form&gt;
    &lt;/Container&gt;
  );
};
 
export default AuthLogin;
					
				
			
		



कोड का विवरण

State Management: useState का उपयोग करके email, password, और errors का प्रबंधन।
Validation Functions: validateEmail ईमेल प्रारूप की जाँच करता है, जबकि validatePassword सुनिश्चित करता है कि पासवर्ड की लंबाई उपयुक्त है।
Handle Login: फॉर्म सबमिशन पर, मान्यताएं की जाती हैं। अगर त्रुटियाँ हैं, तो उन्हें प्रदर्शित किया जाता है; अन्यथा, एक सफलता संदेश लॉग किया जाता है।
Error Display: TextField घटक त्रुटि संदेश प्रदर्शित करते हैं और त्रुटियों वाले क्षेत्रों को हाइलाइट करते हैं।


निष्कर्ष
इस मार्गदर्शिका में, हमने सफलतापूर्वक React और Material UI का उपयोग करके एक सरल और कुशल लॉगिन पेज बनाया है। useState के साथ स्थिति का प्रभावी प्रबंधन, मजबूत मान्यकरण तंत्रों को लागू करना, और दृश्य अपील वाले घटकों को एकीकृत करके, हमने एक उपयोगकर्ता-अनुकूल प्रमाणीकरण इंटरफेस बनाया है।
मुख्य निष्कर्ष

State Management: useState जैसे React हुक्स का कुशल उपयोग घटक स्थिति प्रबंधन को सरल बनाता है।
Validation: रीयल-टाइम मान्यताएं सुरक्षा और उपयोगकर्ता अनुभव को बढ़ाती हैं।
Material UI Integration: Material UI घटकों का लाभ उठाना विकास को तेज करता है और एक संगत डिजाइन भाषा सुनिश्चित करता है।
Simplification: प्रमाणीकरण लॉजिक में अनावश्यक जटिलता को कम करना एप्लिकेशन को अधिक मेंटेनबल और स्केलेबल बनाता है।


नोट: यह लेख AI द्वारा उत्पन्न किया गया है।