প্রতিক্রিয়ায় একটি প্রোফাইল পৃষ্ঠা তৈরি করা শুধুমাত্র অপরিহার্য নয়, এটি অত্যন্ত মজাদারও! এটি আপনার ব্যবহারকারীদের শৈলীতে তাদের ব্যক্তিগত তথ্য দেখতে এবং পরিচালনা করতে দেয়। এই টিউটোরিয়ালে, আমরা চমৎকার প্রোফাইল পিকচারের জন্য Avatarium, মসৃণ নেভিগেশনের জন্য রিঅ্যাক্ট রাউটার, ডেটা আনার জন্য Axios এবং ফর্ম ইনপুট পরিচালনার জন্য Formik সহ কিছু দুর্দান্ত npm প্যাকেজ ব্যবহার করে একটি মসৃণ প্রোফাইল পৃষ্ঠা তৈরি করতে যাচ্ছি। এর মধ্যে ডুব এবং কিছু আশ্চর্যজনক করা যাক!

পূর্বশর্ত

আমরা শুরু করার আগে, নিশ্চিত করুন যে আপনার নিম্নলিখিত আছে:

• Node.js এবং npm ইনস্টল করা হয়েছে
• প্রতিক্রিয়া সম্পর্কে একটি প্রাথমিক ধারণা
• create-react-app ব্যবহার করে একটি নতুন React প্রকল্প তৈরি করা হয়েছে

ধাপ 1: আপনার প্রতিক্রিয়া প্রকল্প সেট আপ করুন

প্রথমে, একটি নতুন প্রতিক্রিয়া প্রকল্প তৈরি করুন যদি আপনি ইতিমধ্যে না থাকেন:

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

ধাপ 2: প্রয়োজনীয় npm প্যাকেজ ইনস্টল করুন

এই টিউটোরিয়ালের জন্য আমাদের বেশ কয়েকটি npm প্যাকেজ প্রয়োজন হবে:

• অ্যাভাটারিয়াম: এলোমেলো থিমযুক্ত অবতার তৈরি করার জন্য
• প্রতিক্রিয়া রাউটার: নেভিগেশন পরিচালনার জন্য
• Axios: একটি API থেকে ডেটা আনার জন্য
• Formik: ফর্ম অবস্থা এবং বৈধতা পরিচালনার জন্য

রান করে এই প্যাকেজগুলি ইনস্টল করুন:

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

ধাপ 3: প্রতিক্রিয়া রাউটার সেট আপ করুন

আমরা আমাদের অ্যাপ্লিকেশনের বিভিন্ন পৃষ্ঠার মধ্যে নেভিগেট করতে প্রতিক্রিয়া রাউটার ব্যবহার করব। প্রথমে, 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 থেকে ব্যবহারকারীর ডেটা নিয়ে আসে এবং একটি এলোমেলোভাবে তৈরি করা অবতারের সাথে এটি প্রদর্শন করে এবং এটি ব্যবহারকারীকে একটি ফর্ম ব্যবহার করে তাদের তথ্য আপডেট করার অনুমতি দেয়। আপনি আরও বৈশিষ্ট্য যোগ করে এই উদাহরণটি প্রসারিত করতে পারেন, যেমন ব্যবহারকারীর তথ্যের জন্য অতিরিক্ত ক্ষেত্র, ফর্মের জন্য বৈধতা নিয়ম এবং উন্নত স্টাইলিং।