React でプロフィール ページを作成することは、不可欠であるだけでなく、とても楽しいです。これにより、ユーザーは自分の個人情報をスタイリッシュに表示および管理できます。このチュートリアルでは、素晴らしいプロフィール写真のための Avatarium、スムーズなナビゲーションのための React Router、データを取得するための Axios、フォーム入力を処理するための Formik など、いくつかのクールな npm パッケージを使用して、洗練されたプロフィール ページを構築します。さあ、飛び込んで素晴らしいものを作りましょう。 前提条件 始める前に、以下のものを用意してください。 Node.jsとnpmがインストールされている Reactの基本的な理解 を使用して新しいReactプロジェクトが作成されました create-react-app ステップ1: Reactプロジェクトを設定する まず、まだ作成していない場合は、新しい React プロジェクトを作成します。 npx create-react-app profile-page cd profile-page ステップ2: 必要なnpmパッケージをインストールする このチュートリアルでは、いくつかの npm パッケージが必要になります。 Avatarium: ランダムなテーマのアバターを生成する React Router: ナビゲーションの処理用 Axios: APIからデータを取得する Formik: フォームの状態と検証の処理 次のコマンドを実行してこれらのパッケージをインストールします。 npm install @sabfry/avatarium react-router-dom axios formik ステップ3: Reactルーターを設定する アプリケーション内の異なるページ間を移動するために、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: プロフィールページコンポーネントを作成する 次に、 コンポーネントを作成します。このコンポーネントは、アバター、名前、電子メールなどのユーザーのプロフィール情報を表示し、ユーザーが form.jsx を使用して情報を更新できるようにします。 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; このコンポーネントでは: ユーザーデータを管理するために フックを使用します。 useState フックは、コンポーネントがマウントされるときに、モック API からユーザー データを取得します。 useEffect Avatarium の コンポーネントを使用して、ランダムなテーマのアバターを表示します。 Avatar Formik はフォームの状態と検証を処理するために使用され、フォーム入力の管理と送信の処理を容易にします。 ステップ5: プロフィールページのスタイル設定 プロフィール ページのスタイル 設定するために、基本的な CSS を追加します。ProfilePage.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 からユーザー データを取得し、ランダムに生成されたアバターとともに表示します。また、ユーザーはフォームを使用して自分の情報を更新できます。ユーザー情報の追加フィールド、フォームの検証ルール、強化されたスタイルなどの機能を追加して、この例を拡張できます。
