部品を製作する際に考慮すべき事項(1/3)

素子を分離することが重要です.
反応開発者の素質の一つは素子をよく分割することであるからだ.
どのように部品を分割するかは人によって異なります.つまり、会社も違いますが、いずれにしても、この仕事は自分で考える必要があるようなので、文章を書きましょう.
atomic形態とコンテナ/プレゼンテーションがありますが、開発者一人一人が自分の都合で数千種類に分けることができるので、深く研究する必要はありません.
構成部品1を作成
1.汎用エイリアスの作成
まず,最小の原子形の素子を別名と呼ぶ.
elementsフォルダに置けばいいです.入力、ボタン、デバッガなどをデフォルトスタイルとして作成されたindexです.jsでエクスポートして使いやすいです.別名の利点は、propsを渡すことで条件スタイルを提供したり、onClickコールバック関数を容易に設定したりすることができることです.
例題用の簡単なボタン.

import React from "react";
import tw from "tailwind-styled-components";

const Btn = tw.button`
  font-sanss2 shadow-md box-border 
  rounded-md p-2 py-2 text-white
  ${(props) => (props.disabled ? "bg-gray-300" : "bg-yellow-400")};
  ${(props) => (props.disabled ? "cursor-default" : "cursor-pointer")};
`;

const Button = (props) => {
  const {
    children,
    _disabled,
    _onClick
  } = props;


  return (
    <Btn disabled={_disabled} onClick={_onClick}>
      {children}
    </Btn>
  );
};

Button.defaultProps = {
  children: null,
  _onClick: () => {},
  _disabled: false
};


export default Button;

カスタムフォントとシャドウ、サイズ制限処理、ラウンドとダウンジャケットの値をあげると、基本的な形のボタンが表示され、propsとdefaultPropsを与えると、別名としてよく使えます!
defaultPropsは、propsが入力されていないときにデフォルト値に設定してエラーを回避する子供で、Propsにはさまざまな面白いインタラクションやコールバック関数を加えることができます.
このボタンには、「入力値が入力されていない場合、disabledオプションを開き、cssを別の色に変更する」機能を追加するonClick+1オプションが含まれています.
次に、ページなどの親から別名をインポートします.

      <Button
        _onClick={login}
        _disabled={id === "" || pwd === "" ? true : false}
      >
        로그인하기
      </Button>

このように使えます!元の機能を置き換えるときは、下敷きを1つ置いたほうがいいです.このような感覚で、よく使うボタン、Input、Dive、表題曲、イメージなどを事前に作ることで、勤務時間を大幅に減らすことができます.
でもスタイルを決めすぎると後で直すと疲れて安定しすぎるとボタンを直接使うのと変わらないので適切な線を探すことが大切です
2.スタイル化別名の作成
普通の愛麗小屋を作るときは、そのまま使えばいいのですが、できないことが多いです.この場合、propsを簡単に使用してより多くの実際の素子を作成する必要がなく、バリアを提供することができる.
今回の課題「プロフィール画像,小プレビュー画像,大プレビュー画像,オリジナルスケール画像」は,1つの別名に記録されている.

import React from "react";
import tw from "tailwind-styled-components";

const CircleImage = tw.img`
  bg-cover rounded-full m-1 w-12 h-12 border-2 border-yellow-200
  shadow-md 
`;

const SmallSquareImage = tw.img`
  bg-fixed m-1 rounded-md w-14 h-14 border-2 border-yellow-200
  opacity-80 contrast-125
`;


const BigSquareImage = tw.img`
  rounded-xl bg-center bg-contain w-80 h-80
`;

const DetailImage = tw.img`
  rounded-xl bg-center bg-contain md:max-w-xl max-w-sx
`;

const Image = (props) => {
  const { src, shape, half } = props;

  if (shape === "circle") {
    return <CircleImage src={src} />;
  }

  if (shape === "detail_square") {
    return <DetailImage src={src} />;
  }

  if (shape === "big_square") {
    return <BigSquareImage src={src} />;
  }

  if (shape === "small_square") {
    return <div className=""><SmallSquareImage  
    style={{backgroundImage: `url(${src})`}} /> </div>;
  }
};

Image.defaultProps = {
  shape: "circle",
  src: "가림",
};
 

export default Image;

まず,画像中のpropsをshapeに指定し,随時使用するものがあれば増やすことができる.これにより、後で他の形状のスタイルを追加する場合にも==文法で簡単に追加できます!
defaultPropsで一つの形が指定されているので、道具を渡すのを忘れると全ての写真が原型になってしまいます…履歴書写真やデジカメは課題ではないので、基本的な画像アドレスだけを簡単に変えて共同で使いました.
このようにしてインデックスを作成すると、どのページでも簡単に目的の画像をロードできます.
3.条件付きスタイル別名の作成
すべて同じで本当に一部を交換する時!そのときに書けるのが条件付きの指定スタイルの別名です.本課題は,3つの文字枠レイアウト要件(左,右,下)があり,使用する必要があるが,見栄えが悪い.でも課題だから.もちろんやります.

import React from "react";
import tw from "tailwind-styled-components";

const P = tw.div`
  text-base md:text-lg w-14 sm:w-24 lg:w-32
  rounded-md m-1 hover:bg-opacity-100
  absolute p-4 text-yellow-800 font-sanss2 shadow-md
  bg-yellow-300 animate-bounce hover:cursor-pointer
  hover:border-yellow-200 hover:border-4
  transform hover:w-auto
${(props) => (props.is_false ? "" : "truncate")};
${(props) => (props.layout === "left" ? `ml-60 bg-opacity-75 lg:ml-80` : "")};
${(props) => (props.layout === "right" ? `mr-60 bg-opacity-75 lg:mr-80` : "")};
${(props) => (props.layout === "bottom" ? `mt-60 bg-opacity-75 lg:mt-80` : "")};
`;

const PostText = (props) => {
  const { children, _onClick, is_false, layout } =
    props;

  const styles = {
    is_false,
    layout
  };
  return (
    <P {...styles} onClick={_onClick}>
      {children}
    </P>
  );
};

Text.defaultProps = {
  children: null,
  _onClick: () => {},
  is_false : false,
  layout : "bottom"
};


export default PostText;

テキストボックスとピクチャボックスをdivに組み合わせ、画像を相対させ、レイアウトに応じて余白と不透明度を少し重ねます.それも.これは画像ベースの雑誌サイトで、なぜ文章枠にwidthを加えるのか分かりませんが、これは面白い練習になりました.
is falseは、文字枠が大きすぎて画像を隠したり、並べ替えを妨げたりする略語です.詳細ページには全文が表示されます.
過去には1つ1つの設定条件が可能でしたが、1つの設定に変更が必要なことが多い場合は、そのまま「backtic」を使えば良いのです.しかし、ここまで来ると、このプロジェクトでは通用しますが、他のプロジェクトに移植すると曖昧な別名になります.
4. index.jsの作成
インデックスは開発において重要な概念である.いくつかのものを順番に並べて、ラベルを貼って、簡単に書けます!もし私が真剣に別名を作ったら、必ずインデックスを作成しなければなりません.

import Title from "./Title";
import Text from "./Text";
import Input from "./Input";
import Button from "./Button";
import Image from "./Image";
import Spinner from "./Spinner";
import Intro from "./Intro";
import PostText from "./PostText";

export { Title, Text, Input, Button, Image, Spinner, Intro, PostText };

そして実際のページで

import { Button, Text, Image, Title } from "../elements";

これで数十行の和弦が数行の奇跡になります!
書いてあるうちに長くなってしまうので分量分は第2部までめくります