05.共通構成部品(以降修正)

私は自分でプロジェクトをするときに本の良い部分を参考にしました.
私の知らないところがあったので、本を読んで作りました.
それだけではコード解釈はできないでしょう
プロジェクトはまだ終わっていませんが、途中でもう一度温めることを期待しています.

よく使うHEXコード

UseColor.js

const UseColor = {
    Blue:[
        '#e7f5ff', // blue 0
        '#d0ebff', // blue 1
        '#a5d8ff', // blue 2
        '#74c0fc', // blue 3
        '#4dabf7', // blue 4
        '#339af0', // blue 5
        '#228be6', // blue 6
        '#1c7ed6', // blue 7
        '#1971c2', // blue 8
        '#1864ab'// blue 9
    ], //
    Cyan: [
        '#e3fafc', // Cyan 0
        '#c5f6fa', // Cyan 1
        '#99e9f2', // Cyan 2
        '#66d9e8', // Cyan 3
        '#3bc9db', // Cyan 4
        '#22b8cf', // Cyan 5
        '#15aabf', // Cyan 6
        '#1098ad', // Cyan 7
        '#0c8599', // Cyan 8
        '#0b7285' // Cyan 9
      ], //
      Indigo:[
        '#edf2ff', // indigo 0
        '#dbe4ff', // indigo 1
        '#bac8ff', // indigo 2
        '#91a7ff', // indigo 3
        '#748ffc', // indigo 4
        '#5c7cfa', // indigo 5
        '#4c6ef5', // indigo 6
        '#4263eb', // indigo 7
        '#3b5bdb', // indigo 8
        '#364fc7'// indigo 9
      ]
      
}

export default UseColor;

以前作成した項目で色を決めた場合、HEXコードを入力します.
本で見たように、上のコードのように先に書いておけば便利に書けるはずです.
だから私が使う色をメインにHEXコードを書きました.

Button素子

以前はボタンを作るときは一つ一つ書いていました.
しかし、本の中で見たのは버튼 컴포넌트를 만들고 재사용하면 되지 않나 !?です.
反応器の長所재사용성はここで書けばいいのに、バカみたいに表現されています.Button.js

import styled from "styled-components";
import UseColor from "../../lib/styles/UseColor";

const StyledButton = styled.button`
border: none;
border-radius: 5px;
font-size: 15px;
font-weight: bold;
padding: 0.25rem 1rem;
color: white;
outline: none;
cursor: pointer;

background: ${UseColor.Indigo[4]};
&:hover{
    background: ${UseColor.Indigo[6]};
}
`;

const Button = props => <StyledButton {...props} />;

export default Button;

StyledButtonをレンダリングする必要はありませんが、このコンポーネントを使用するときに自動的にインポートするために作成されます.
(正常に動作しない可能性があります!)
Buttonが受け取ったアイテムを全てStyledButtonに伝えるため、{...props}が設置されています.

import Button from '.../Button';
 
  const 파일명 = () => {
    return (
      <Button>
        버튼
      </Button>
    );
  };
  
  export default 파일명;

レンダリングするとボタンが出てきます.

冗長性の適用

非同期タスクを管理する過程でredux-sagaを使用します.
現在、知識はまだ多くなく、プロジェクトにreduceを適用するプロセスを処理したいだけです.
△不思議なことに、やればやるほど勉強したくなり、早く書きたいと思っています.
まずリードに必要なライブラリをインストールしましょう.yarn add redux react-redux redux-actions immer redux-devtools-extension(このコマンドを使用する理由は、投稿によって書き換えられる予定です.)redux-JSステータス管理ライブラリ(本質的にはNode.jsモジュール).react-redux-Redux上の正式なReact UIバインドレイヤ
(Reactコンポーネントは、Reduxリポジトリからデータを読み出し、ステータスを更新するためにリポジトリにタスクを転送できます.)redux-actions-李徳思の動作を管理するために、役に立つcreateActionとhandleActionsがあります!createAction -handleActions -immer-不変性を維持できるコードの作成が容易redux-devtools-extension-繰り返しレンダリングする必要がなく、効率的な状態値管理、美しいReduxコードを書くことができます!

UI準備！

import styled from `styled-components';

회원가입 또는 로그인 폼

const AuthFormBlock = styled.div``;

const AuthForm = () => {
	return (
		<AuthFormBlock>
			AuthForm
		</AuthFormBlock>
	);
};
 
export default AuthForm;

04.01에 이후 수정할 예정