React में प्रोफ़ाइल पेज बनाना न केवल ज़रूरी है बल्कि बहुत मज़ेदार भी है! यह आपके उपयोगकर्ताओं को उनकी व्यक्तिगत जानकारी को स्टाइल में देखने और प्रबंधित करने देता है। इस ट्यूटोरियल में, हम कुछ बेहतरीन npm पैकेज का उपयोग करके एक आकर्षक प्रोफ़ाइल पेज बनाने जा रहे हैं, जिसमें शानदार प्रोफ़ाइल चित्रों के लिए Avatarium, सहज नेविगेशन के लिए React Router, डेटा प्राप्त करने के लिए Axios और फ़ॉर्म इनपुट को संभालने के लिए Formik शामिल हैं। आइए इसमें गोता लगाएँ और कुछ अद्भुत बनाएँ!

आवश्यक शर्तें

शुरू करने से पहले, सुनिश्चित करें कि आपके पास निम्नलिखित हैं:

• Node.js और npm स्थापित
• रिएक्ट की बुनियादी समझ
• create-react-app का उपयोग करके एक नया React प्रोजेक्ट बनाया गया

चरण 1: अपना रिएक्ट प्रोजेक्ट सेट अप करें

सबसे पहले, यदि आपने पहले से कोई नया React प्रोजेक्ट नहीं बनाया है तो उसे बनाएं:

 npx create-react-app profile-page cd profile-page

चरण 2: आवश्यक npm पैकेज स्थापित करें

इस ट्यूटोरियल के लिए हमें कई npm पैकेजों की आवश्यकता होगी:

• अवतारियम: यादृच्छिक थीम वाले अवतार बनाने के लिए
• रिएक्ट राउटर: नेविगेशन को संभालने के लिए
• एक्सिओस: API से डेटा प्राप्त करने के लिए
• फॉर्मिक: फॉर्म स्थिति और सत्यापन को संभालने के लिए

इन पैकेजों को चलाकर स्थापित करें:

 npm install @sabfry/avatarium react-router-dom axios formik

चरण 3: रिएक्ट राउटर सेट अप करें

हम अपने एप्लिकेशन में अलग-अलग पेजों के बीच नेविगेट करने के लिए React Router का इस्तेमाल करेंगे। सबसे पहले, App.js में राउटर सेट करें:

 import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import ProfilePage from './ProfilePage';

 function App() { return ( <Router> <Switch> <Route path="/profile" component={ProfilePage} /> </Switch> </Router> ); }export default App;

चरण 4: प्रोफ़ाइल पेज घटक बनाएँ

इसके बाद, ProfilePage.js घटक बनाएँ। यह घटक उपयोगकर्ता की प्रोफ़ाइल जानकारी प्रदर्शित करेगा, जिसमें उनका अवतार, नाम और ईमेल शामिल है, और उपयोगकर्ता को form.jsx का उपयोग करके अपनी जानकारी अपडेट करने की अनुमति देगा।

 import React, { useState, useEffect } from 'react'; import axios from 'axios'; import Avatar from '@sabfry/avatarium'; import { Formik, Form, Field } from 'formik';

 const ProfilePage = () => { const [user, setUser] = useState(null); useEffect(() => { axios.get('https://api.example.com/user') .then(response => setUser(response.data)) .catch(error => console.error('Error fetching user data:', error)); }, []); if (!user) return <div>Loading...</div>; return ( <div className="profile-page"> <h1>Profile Page</h1> <div className="profile-info"> <Avatar theme="blobs" /> <h2>{user.name}</h2> <p>{user.email}</p> <Formik initialValues={{ name: user.name, email: user.email }} onSubmit={(values, { setSubmitting }) => { axios.post('https://api.example.com/user/update', values) .then(response => { setUser(response.data); setSubmitting(false); }) .catch(error => { console.error('Error updating user data:', error); setSubmitting(false); }); }} > {({ isSubmitting }) => ( <Form> <div> <label htmlFor="name">Name</label> <Field id="name" name="name" placeholder="John Doe" /> </div> <div> <label htmlFor="email">Email</label> <Field id="email" name="email" placeholder="[email protected]" type="email" /> </div> <button type="submit" disabled={isSubmitting}> Update </button> </Form> )} </Formik> </div> </div> ); };export default ProfilePage;

इस घटक में:

• हम उपयोगकर्ता डेटा को प्रबंधित करने के लिए useState हुक का उपयोग करते हैं।

• जब घटक माउंट होता है, तो useEffect हुक मॉक API से उपयोगकर्ता डेटा प्राप्त करता है।

• हम यादृच्छिक थीम वाले अवतार को प्रदर्शित करने के लिए Avatarium से Avatar घटक का उपयोग करते हैं।

• फॉर्मिक का उपयोग फॉर्म स्थिति और सत्यापन को संभालने के लिए किया जाता है, जिससे फॉर्म इनपुट को प्रबंधित करना और सबमिशन को संभालना आसान हो जाता है।

चरण 5: प्रोफ़ाइल पेज को स्टाइल करना

प्रोफ़ाइल पेज को स्टाइल करने के लिए कुछ बुनियादी CSS जोड़ें। एक ProfilePage.css फ़ाइल बनाएँ, और इसे ProfilePage.js में आयात करें।

 /* ProfilePage.css */ .profile-page { display: flex; flex-direction: column; align-items: center; padding: 20px; }

 .profile-info { display: flex; flex-direction: column; align-items: center; border: 1px solid #ddd; padding: 20px; border-radius: 10px; background-color: #f9f9f9; }.profile-info div { margin-bottom: 10px; }button { background-color: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; }button:disabled { background-color: #c0c0c0; cursor: not-allowed; }

इस CSS फ़ाइल को अपने ProfilePage.js में आयात करें:

 import './ProfilePage.css';

चरण 6: अपना एप्लिकेशन चलाना

अंत में, प्रोफ़ाइल पृष्ठ को क्रियाशील देखने के लिए अपना एप्लिकेशन चलाएँ:

 npm start

प्रोफ़ाइल पृष्ठ देखने के लिए http://localhost:3000/profile पर जाएँ।

निष्कर्ष

इस ट्यूटोरियल में, हमने React, Avatarium, React Router, Axios और Formik का उपयोग करके एक सरल प्रोफ़ाइल पेज बनाया है। यह पेज API से उपयोगकर्ता डेटा प्राप्त करता है और इसे यादृच्छिक रूप से जेनरेट किए गए अवतार के साथ प्रदर्शित करता है, और यह उपयोगकर्ता को फ़ॉर्म का उपयोग करके अपनी जानकारी अपडेट करने की अनुमति देता है। आप उपयोगकर्ता जानकारी के लिए अतिरिक्त फ़ील्ड, फ़ॉर्म के लिए सत्यापन नियम और बेहतर स्टाइलिंग जैसी अधिक सुविधाएँ जोड़कर इस उदाहरण का विस्तार कर सकते हैं।