React でレスポンシブな名刺を作成する

はじめに

このプロジェクトでは、React を使用して個人用の名刺を作成する方法を学びます。このプロジェクトでは、ユーザーが個人情報を入力し、カスタマイズされた名刺を生成できるレスポンシブでインタラクティブな Web アプリケーションを構築します。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下のことを学びます。

• React プロジェクトをセットアップし、必要な依存関係をインストールする方法
• react-hook-form ライブラリの useForm フックを使用して ProfileCard コンポーネントを実装する方法
• ProfileCard コンポーネントをメインの App コンポーネントに統合する方法
• CSS を使用してアプリケーションをスタイル付けし、魅力的で視覚的に一貫したデザインを作成する方法

🏆 達成目標

このプロジェクトを完了した後、以下のことができるようになります。

• react-hook-form ライブラリの useForm フックを使用してフォームの状態とバリデーションを管理する
• 再利用可能な React コンポーネントを作成し、より大きなアプリケーションに統合する
• CSS を使用して React アプリケーションをスタイル付けし、目的の視覚的外観を実現する
• React プロジェクトにおけるモジュール化された保守可能なコード構造の重要性を理解する

プロジェクトのセットアップ

このステップでは、プロジェクトをセットアップし、必要な依存関係をインストールする方法を学びます。

コードエディタを開き、プロジェクトディレクトリに移動します。

├── public
├── src
│   ├── components
│   │   └── ProfileCard.js
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   ├── profile.png
│   ├── reportWebVitals.js
│   └── setupTests.js
├── package-lock.json
└── package.json

次に、ターミナルで npm install コマンドを使用して依存関係をダウンロードし、依存関係のダウンロードが完了するのを待ってから、npm start コマンドを使用してプロジェクトを起動します。

プロジェクトが正常に起動したら、「Web 8080」をクリックしてブラウザでプレビューします。

ProfileCard コンポーネントの実装

このステップでは、react-hook-form ライブラリの useForm フックを使用して ProfileCard コンポーネントを実装します。

1. src/components ディレクトリにある ProfileCard.js ファイルを開きます。

2. 必要なモジュールとコンポーネントをインポートします。

   import React, { useState } from "react";
   import { useForm } from "react-hook-form";
   import profile from "../profile.png";

3. ProfileCard コンポーネントを実装します。

   export const ProfileCard = () => {
     const [submitted, setSubmitted] = useState(false);
     const [data, setData] = useState({});
     const {
       register,
       formState: { errors },
       handleSubmit
     } = useForm();
   
     const onSubmit = (data) => {
       setSubmitted(true);
       setData(data);
     };
   
     return (
       <div className="wrapper">
         {submitted ? (
           <>
             <img src={profile} alt="profile" className="profile" />
             <h2 className="name-text">{data.name}</h2>
             <p className="position-text">{data.position}</p>
             <p className="info-text">{data.info}</p>
           </>
         ) : (
           <form onSubmit={handleSubmit(onSubmit)}>
             <div className="form-field">
               <label htmlFor="name">Name: </label>
               <input
                 type="text"
                 id="name"
                 name="name"
                 {...register("name", { required: "Please enter your name" })}
               />
               <p className="name-error">{errors.name?.message}</p>
             </div>
   
             <div className="form-field">
               <label htmlFor="position">Office: </label>
               <input
                 type="text"
                 id="position"
                 name="position"
                 {...register("position", {
                   required: "Please enter your position"
                 })}
               />
               <p className="position-error">{errors.position?.message}</p>
             </div>
   
             <div className="form-field">
               <label htmlFor="info">Brief: </label>
               <input
                 type="text"
                 id="info"
                 name="info"
                 {...register("info", { required: "Please enter your brief" })}
               />
               <p className="info-error">{errors.info?.message}</p>
             </div>
   
             <input type="submit" value="Submit" className="submit" />
           </form>
         )}
       </div>
     );
   };

   この実装では、react-hook-form ライブラリの useForm フックを使用してフォームの状態とバリデーションを管理しています。フォームが送信されると、onSubmit 関数が呼び出され、submitted 状態が true に設定され、フォームデータが data 状態に保存されます。

   その後、コンポーネントは submitted 状態に応じて、フォームまたは名刺をレンダリングします。

4. フォームに入力して送信することでアプリケーションをテストします。入力した情報が正しく表示されることを確認します。

完成した結果は次の通りです。

おめでとうございます！個人用名刺ジェネレータープロジェクトを完了しました。react-hook-form ライブラリの useForm フックを使用してフォームの状態とバリデーションを管理する方法、および ProfileCard コンポーネントを App コンポーネントに統合する方法を学びました。また、CSS を使用してアプリケーションをスタイル付けする方法も学びました。

まとめ

おめでとうございます！このプロジェクトを完了しました。LabEx でさらに多くの実験を行い、スキルを向上させることができます。