React でプロフィール ページを作成することは、不可欠であるだけでなく、とても楽しいです。これにより、ユーザーは自分の個人情報をスタイリッシュに表示および管理できます。このチュートリアルでは、素晴らしいプロフィール写真のための Avatarium、スムーズなナビゲーションのための React Router、データを取得するための Axios、フォーム入力を処理するための Formik など、いくつかのクールな npm パッケージを使用して、洗練されたプロフィール ページを構築します。さあ、飛び込んで素晴らしいものを作りましょう。

前提条件

始める前に、以下のものを用意してください。

• Node.jsとnpmがインストールされている
• Reactの基本的な理解
• create-react-appを使用して新しいReactプロジェクトが作成されました

ステップ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: プロフィールページコンポーネントを作成する

次に、 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コンポーネントを使用して、ランダムなテーマのアバターを表示します。

• Formik はフォームの状態と検証を処理するために使用され、フォーム入力の管理と送信の処理を容易にします。

ステップ5: プロフィールページのスタイル設定

プロフィール ページのスタイルProfilePage.css設定するために、基本的な 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 からユーザー データを取得し、ランダムに生成されたアバターとともに表示します。また、ユーザーはフォームを使用して自分の情報を更新できます。ユーザー情報の追加フィールド、フォームの検証ルール、強化されたスタイルなどの機能を追加して、この例を拡張できます。