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ışı
• create-react-app kullanılarak yeni bir React projesi oluşturuldu

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 App.js kurun:

 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 ProfilePage.js 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.

 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;

Bu bileşende:

• Kullanıcı verilerini yönetmek için useState kancasını kullanıyoruz.

• useEffect kancası, bileşen bağlandığında sahte bir API'den kullanıcı verilerini getirir.

• Rastgele temalı bir avatar görüntülemek için Avatarium'un Avatar bileşenini kullanıyoruz.

• 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. ProfilePage.css dosyası oluşturun ve bunu ProfilePage.js aktarın.

 /* 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ı ProfilePage.js aktarın:

 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 http://localhost:3000/profile adresine gidin.

Çö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.