시토컨테이너

@mui의 Box와 매우 유사한 매우 유연한 컨테이너

첫 번째!

1 - 새로운 반응 앱 만들기

실을 사용하는 경우 (추천합니다)yarn create react-app <container-name>또는 npm을 사용하고 싶다면npx create-react-app <container-name> 모든 것이 잘되면 localhost:3000에 다음과 같은 페이지가 표시됩니다(포트 3000이 사용 중이 아닌 경우).

다음!

2 - @emotion 설치

Emotion은 JavaScript로 css 스타일을 작성하도록 설계된 라이브러리입니다. 소스 맵, 레이블 및 테스트 유틸리티와 같은 기능을 통해 훌륭한 개발자 경험 외에도 강력하고 예측 가능한 스타일 구성을 제공합니다. 문자열 및 개체 스타일이 모두 지원됩니다.

종속성:yarn add @emotion/css @emotion/react @emotion/styled또는 npm으로:npm install @emotion/css @emotion/react @emotion/styled

코딩할 시간입니다!

3 - 컨테이너 구성 요소 만들기

/src 폴더에서 index.js 및 App.js를 제외한 다른 파일을 제거할 수 있습니다.App.js 디렉토리에 있는 /src 파일로 이동합니다. 이 파일에서 다음을 찾을 수 있습니다.

import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

이 모든 것을 제거하고 새 구성 요소(이 경우 컨테이너 구성 요소)를 만들 것입니다. 이 자습서에서는 SitoContainer가 됩니다.

function SitoContainer() {
  return <div></div>;
}

export default SitoContainer;

이제 컨테이너가 자식을 렌더링해야 하므로 prop-types에서 PropTypes를 가져오겠습니다.

import PropTypes from "prop-types";

function SitoContainer(props) {

  const { children } = props;

  return <div>{children}</div>;
}

SitoContainer.defaultProps = {
  children: <></>,
};

SitoContainer.propTypes = {
  children: PropTypes.node,
};

export default SitoContainer;

자, 이제 미래의 사용자가 CSS 규칙으로 구성 요소를 사용자 정의할 수 있도록 허용해야 하므로 다음과 같은 다른 소품을 추가해 보겠습니다.

sx (MUI과 같은 스타일 구성 요소)

style(인라인 스타일)

className(css 클래스 이름)

import PropTypes from "prop-types";

import { css } from "@emotion/css";

function SitoContainer(props) {
  const { children, className, sx, style } = props;

  // IMPORTANT!!!
  // this is for turn your styled-components rules as dynamic 
  // @emotion/css class
  const newSx = css({sx});

  return (
    <div className={`${className} ${newSx}`} style={style}>
      {children}
    </div>
  );
}

SitoContainer.defaultProps = {
  className: "",
  sx: {},
  style: {},
  children: <></>,
};

SitoContainer.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  sx: PropTypes.oneOfType([
    PropTypes.arrayOf(
      PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])
    ),
    PropTypes.func,
    PropTypes.object,
  ]),
  style: PropTypes.oneOfType([
    PropTypes.arrayOf(
      PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])
    ),
    PropTypes.func,
    PropTypes.object,
  ]),
};

export default SitoContainer;

스타일 및 sx 소품의 PropTypes는 정말 지루합니다. 이러한 소품은 거의 모든 것이 될 수 있기 때문입니다.
컨테이너가 거의 완료되었습니다. 다음과 같은 다른 소품을 추가할 수 있습니다.

id(html 식별)

디스플레이(플렉스, 블록 등)
제 경우에는 다음을 추가했습니다.

배경(스트링)

fullWidth(부울)

flexDirection(행, 열 등)

내 github repo에서 확인할 수 있습니다.

드디어!

4 - 컨테이너 번들 및 게시

다음을 포함하는 이름.babelrc으로 파일을 생성합니다.

{
  "presets": [
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

이는 실험적 구문jsx을 지원하기 위한 것입니다. 자세히 알아보려면 read here
두 개의 개발 종속성을 설치합니다.yarn add @babel/cli @babel/preset-react또는 npm으로:npm install @babel/cli @babel/preset-react이 스크립트를 package.json에 추가하십시오."publish:npm": "babel src/ -d dist --copy-files"그리고 이 라인은 또한 귀하의 package.json:"main":"dist/App.js"이 마지막 부분은 사용자가 모듈을 설치할 때 모듈을 볼 위치를 npm 또는 yarn에 알리기 위한 것입니다.
로컬 테스트npm install my-package에 사용합니다. 여기서 my-package는 패키지의 루트 폴더입니다. 이 경우에는 컨테이너입니다.
모든 것이 제대로 진행되면 명령줄에서 패키지의 루트 디렉터리로 이동하고 다음을 실행하여 패키지를 게시합니다.npm publish추가 지침read here

내 컨테이너를 사용해보고 싶다면 여기에서 확인할 수 있습니다sito-container.