React'ta bir profil sayfası oluşturmak sadece gerekli değil aynı zamanda çok eğlenceli! Kullanıcılarınızın kişisel bilgilerini şık bir şekilde görüntülemesine ve yönetmesine olanak tanır. Bu eğitimde, harika profil resimleri için Avatarium, sorunsuz gezinme için React Router, veri getirmek için Axios ve form girişlerini yönetmek için Formik dahil olmak üzere bazı harika npm paketlerini kullanarak şık bir profil sayfası oluşturacağız. Hadi dalalım ve muhteşem bir şey yapalım! Önkoşullar Başlamadan önce aşağıdakilere sahip olduğunuzdan emin olun: Node.js ve npm yüklü React'ın temel anlayışı kullanılarak yeni bir React projesi oluşturuldu create-react-app 1. Adım: React Projenizi Kurun Öncelikle, henüz yapmadıysanız yeni bir React projesi oluşturun: npx create-react-app profile-page cd profile-page Adım 2: Gerekli npm Paketlerini Kurun Bu eğitim için birkaç npm paketine ihtiyacımız olacak: Avatarium: rastgele temalı avatarlar oluşturmak için React Router: navigasyonu yönetmek için Axios: bir API'den veri almak için Formik: form durumunu ve doğrulamayı yönetmek için Bu paketleri çalıştırarak yükleyin: npm install @sabfry/avatarium react-router-dom axios formik Adım 3: React Router'ı Kurun Uygulamamızdaki farklı sayfalar arasında gezinmek için React Router'ı kullanacağız. Öncelikle yönlendiriciyi kurun: 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. Adım: Profil Sayfası Bileşenini Oluşturun Daha sonra bir bileşeni oluşturun. Bu bileşen, kullanıcının avatarı, adı ve e-postası dahil olmak üzere profil bilgilerini görüntüler ve kullanıcının form.jsx kullanarak bilgilerini güncellemesine olanak tanır. ProfilePage.js 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="john.doe@example.com" type="email" /> </div> <button type="submit" disabled={isSubmitting}> Update </button> </Form> )} </Formik> </div> </div> ); };export default ProfilePage; Bu bileşende: Kullanıcı verilerini yönetmek için kancasını kullanıyoruz. useState kancası, bileşen bağlandığında sahte bir API'den kullanıcı verilerini getirir. useEffect Rastgele temalı bir avatar görüntülemek için Avatarium'un bileşenini kullanıyoruz. Avatar Formik, form durumunu ve doğrulamayı yönetmek için kullanıldığından form girişlerini yönetmeyi ve gönderimleri yönetmeyi kolaylaştırır. Adım 5: Profil Sayfasını Şekillendirme Profil sayfasına stil vermek için bazı temel CSS'ler ekleyin. dosyası oluşturun ve bunu aktarın. 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; } Bu CSS dosyasını aktarın: ProfilePage.js import './ProfilePage.css'; Adım 6: Uygulamanızı Çalıştırma Son olarak, profil sayfasını çalışırken görmek için uygulamanızı çalıştırın: npm start Profil sayfasını görüntülemek için adresine gidin. http://localhost:3000/profile Çözüm Bu eğitimde React, Avatarium, React Router, Axios ve Formik'i kullanarak basit bir profil sayfası oluşturduk. Bu sayfa, kullanıcı verilerini bir API'den alır ve bunları rastgele oluşturulmuş bir avatarla birlikte görüntüler ve kullanıcının bir form kullanarak bilgilerini güncellemesine olanak tanır. Kullanıcı bilgileri için ek alanlar, form için doğrulama kuralları ve geliştirilmiş stil gibi daha fazla özellik ekleyerek bu örneği genişletebilirsiniz.
