ReactでのPage作成について学ぶ

学んだこと

Page とは

• 最終的に表示される 1 画面
• (例)Twitter
  • ページ遷移毎に表示される各画面

実際に作成してみた

• 前回作成した Templete を使用して、Page を作成する。

作成したコンポーネントの詳細情報

• Page
  • Top.jsx
    • トップページのコンポーネント
  • Users.jsx
    • ユーザページのコンポーネント
    • SearchInput と UserCard のコンポーネントを内部で使用している。
• App.jsx
  • Router コンポーネントを呼び出すだけにした。
• Router.jsx
  • ルーティングの設定用コンポーネント

Top.jsx

import styled from 'styled-components';

export const Top = () => {
  return (
    <SContainer>
      <h2>TOPページです</h2>
    </SContainer>
  );
};

const SContainer = styled.div`
text-align: center`;

Users.jsx

• ユーザ一覧ページを表示
• ユーザデータのダミーを 10 件用意した。

import styled from 'styled-components';
import { SearchInput } from '../molecules/SearchInput';
import { UserCard } from '../organisms/user/UserCard';

export const Users = () => {
  return (
    <SContainer>
      <SUserArea>
        <h2>ユーザ一覧</h2>
        <SearchInput />
        {users.map((user) => (
          <UserCard key={user.id} user={user} />
        ))}
      </SUserArea>
    </SContainer>
  );
};
const users = [...Array(10).keys()].map((val) => {
  return {
    id: val,
    name: `あああ${val}`,
    image:
      'https://images.unsplash.com/photo-1598133894008-61f7fdb8cc3a?q=80&w=988&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    email: '12345@example.com',
    phone: '000-0000-0000',
    company: {
      name: 'テスト株式会社',
    },
    website: 'https://google.com',
  };
});

const SContainer = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
`;

const SUserArea = styled.div`
  padding-top: 40px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
`;

App.jsx

• このコンポーネントはただ Router のコンポーネントを呼び出すだけにした。
• 大元のコンポーネントのため、これぐらいスッキリしたほうが見やすいと思った。

import './App.css';
import { Router } from './router/Router';
export default function App() {
  return <Router />;
}

Router.jsx

• ルーティング設定をこのコンポーネントに集約することにした。
• 都度必要な Atomic のコンポーネントや Organism のコンポーネントを呼び出している。
  • 汎用コンポーネントとして分けている。
  • そのため、追加の実装があった場合も修正しやすい。管理も容易。

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { Top } from '../components/pages/Top';
import { Users } from '../components/pages/Users';
import { Defaultlayout } from '../components/templetes/DefaultLayout';
import { HeaderOnly } from '../components/templetes/HeaderOnly';

export const Router = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
          <Defaultlayout>
            <Top />
          </Defaultlayout>
        </Route>
        <Route path="/users">
          <HeaderOnly>
            <Users />
          </HeaderOnly>
        </Route>
      </Switch>
    </BrowserRouter>
  );
};

作ってみたどう思ったか

• 部品毎にコンポーネント分けされているため、管理がしやすい。
• 実装を修正する際も、１つのコンポーネントだけ修正すれば対応することができる為、楽。
• 今後の開発で意識すれば、可読性もそうだが効率化も図ることが出来そう。