doc.dev1x.org

React.js

環境構築

コンポーネント

Stateのリフトアップ

概要

Single File Component

概要

// インポート
import React from 'react';
import styled from 'styled-components';

// スタイル定義
const Card = styled.div`
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 16px;
  margin: 8px;
`;

const Name = styled.h2`
  color: #333;
  font-size: 18px;
`;

const Email = styled.p`
  color: #666;
  font-size: 14px;
`;

// ロジック
const formatEmail = (email) => email.toLowerCase();

// コンポーネント
const UserCard = ({ name, email }) => {
  const formattedEmail = formatEmail(email);

  return (
    <Card>
      <Name>{name}</Name>
      <Email>{formattedEmail}</Email>
    </Card>
  );
};

export default UserCard;

抜粋: 経年劣化に耐える ReactComponent の書き方

// (1) import層
import React from 'react'
import styled from 'styled-components'
// (2) Types層
type ContainerProps = {...}
type Props = {...} & ContainerProps
// (3) DOM層
const Component: React.FC<Props> = props => (...)
// (4) Style層
const StyledComponent = styled(Component)`...`
// (5) Container層
const Container: React.FC<ContainerProps> = props => {
  return <StyledComponent {...props} />
}

ドメインモデルの取り扱い

参考資料

公式

ディレクトリ構成

設計パターン

ライブラリ

UIライブラリ

この文書はクリエイティブコモンズでライセンスされています。引用した文章など管理人に著作権の無いものについては、それらの各著作権者に帰属します。