🦕

【PrimeReact】ログインホームUIの部分だけ作ってみた

2023/05/01に公開

React

primereact

tech

React勉強中なので、PrimeReactの便利さを実感しながら
ログインホームを作っていきます👾

※それぞれのバージョン書くのめんどくさすぎてスキップします👾
質問とかこれ間違ってるよってやつは遠慮なくバシバシください👾

もう完成コード

import React, { useState } from 'react';
import { InputText } from 'primereact/inputtext';
import { Button } from 'primereact/button';
import { Card } from 'primereact/card';
import './App.css';

function App() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const login = () => {
        // ここにログインの実装を行う
    };

    return (
        <div className="p-d-flex p-flex-column p-jc-center p-ai-center login-container">
            <Card className="login-card p-d-flex p-flex-column p-jc-center p-ai-center">
                <h1 className="p-mb-5">Login</h1>
                <div className="p-inputgroup p-mb-3">
          <span className="p-inputgroup-addon">
            <i className="pi pi-user"></i>
          </span>
                    <InputText
                        placeholder="Email"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                    />
                </div>
                <div className="p-inputgroup p-mb-5">
          <span className="p-inputgroup-addon">
            <i className="pi pi-lock"></i>
          </span>
                    <InputText
                        type="password"
                        placeholder="Password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                    />
                </div>
                <Button label="Login" className="p-button-raised p-mt-3" onClick={login} />
            </Card>
        </div>
    );
}

export default App;

localhostで確認したら、

こんな感じ

解説

import React, { useState } from 'react';
import { InputText } from 'primereact/inputtext';
import { Button } from 'primereact/button';
import { Card } from 'primereact/card';
import './App.css';

このコードは、ReactライブラリからuseStateをインポートしています。
また、PrimeReactからInputText、Button、Cardのコンポーネントをインポートしています。
最後に、./App.cssをインポートしています。

とりあえずインポート(呼び出している)してるってことです

function App() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const login = () => {
        // ここにログインの実装を行う
    };

このコードは、Appという名前の関数コンポーネントを定義しています。
useStateフックを使用して、emailとpasswordの状態を管理しています。
loginという関数は、後でログインボタンがクリックされたときに実行されるログインの実装を含む関数です。

return (
        <div className="p-d-flex p-flex-column p-jc-center p-ai-center login-container">
            <Card className="login-card p-d-flex p-flex-column p-jc-center p-ai-center">
                <h1 className="p-mb-5">Login</h1>
                <div className="p-inputgroup p-mb-3">
          <span className="p-inputgroup-addon">
            <i className="pi pi-user"></i>
          </span>
                    <InputText
                        placeholder="Email"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                    />
                </div>
                <div className="p-inputgroup p-mb-5">
          <span className="p-inputgroup-addon">
            <i className="pi pi-lock"></i>
          </span>
                    <InputText
                        type="password"
                        placeholder="Password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                    />
                </div>
                <Button label="Login" className="p-button-raised p-mt-3" onClick={login} />
            </Card>
        </div>
    );

この部分は、ログインフォームのUIを記述しています。<h1>要素は、ログインフォームのタイトルを表しています。<InputText>要素は、フォームの入力フィールドを表し、placeholder属性でフォームに入力する項目の名前を示し、value属性とonChange属性を使用して、ユーザーがフォームに入力した値をstateで管理しています。

最後に、<Button>要素は、ログインフォームの送信ボタンを表しています。

className属性によって、スタイルを適用し、onClick属性によって、
ボタンがクリックされた時にlogin関数が呼び出されるように設定されています。

export default App;

この行は、Appコンポーネントをエクスポートしています。
このコンポーネントは、ログインフォームのUIとロジックを記述しており、
他のコンポーネントでインポートして使用することができます。
export default構文を使用することで、
他のファイルでimport文を使用して、Appコンポーネントを簡単にインポートすることができます。

まだまだ勉強不足なところが多々あってなみだなみだ。。
がんばっていこう👾

もう完成コード

解説

Discussion