컴포넌트 라이브러리가 React에서 어떻게 작동하는지 항상 궁금하셨습니까? 나만의 라이브러리를 만들고 싶지만 작업이 너무 어려워 보이나요? 더 이상 걱정하지 마세요! 이 기사는 당신에게 그것을 가르쳐 줄 것입니다!

일을 시작하자!

프로젝트 초기화

다음을 사용하여 새 프로젝트를 초기화합니다.

npm init

다음을 사용하여 종속성을 추가합니다.

npm i react react-dom

dependencies 의 package.json 를 peerDependencies 로 이름을 변경하여 프로젝트가 의존하는 패키지를 npm에 알립니다.

스토리북 추가

이제 설정에서 가장 지루한 부분이 나옵니다.

빌드하는 구성 요소를 테스트해야 하므로 모든 구성 요소가 포함된 웹 앱을 만들거나 Storybook과 같은 도구를 사용하여 구성 요소를 쉽게 테스트할 수 있습니다.

다음을 사용하여 Storybook 프로젝트를 초기화합니다.

npx sb init

이렇게 하면 프로젝트 유형을 자동으로 감지하고 필요한 패키지 및 스크립트를 추가합니다.
/src/stories 폴더를 프로젝트( /stories )의 루트로 이동하고 다음을 사용하여 /.storybook/main.js를 업데이트합니다.

module.exports = {
  // ...
  stories: [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
  ],
};

이제 스토리북 프로젝트를 시작할 수 있습니다.

npm run storybook

프로젝트에 CSS 모듈 지원을 추가하려면 다음을 설치하십시오.

npm i -D @storybook/addon-postcss storybook-css-modules-preset

다음을 사용하여 /.storybook/main.js 구성을 업데이트합니다.

module.exports = {
  // ...
  addons: [
    // ...
    "@storybook/addon-postcss",
    "storybook-css-modules-preset",
  ],
};

참고: 스토리북의 종속성은 React 18과 충돌합니다. 스토리북을 시작하는 동안 오류가 발생하면 React 17로 다운그레이드해 보십시오.

구성 요소 만들기

이제 마지막으로 컴포넌트를 생성할 차례입니다.

/* /src/Button/button.module.css */
.storybookButton {
  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  border: 0;
  border-radius: 3em;
  cursor: pointer;
  display: inline-block;
  line-height: 1;
}

.storybookButtonPrimary {
  color: white;
  background-color: #1ea7fd;
}

.storybookButtonSecondary {
  color: #333;
  background-color: transparent;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
}

.storybookButtonSmall {
  font-size: 12px;
  padding: 10px 16px;
}

.storybookButtonMedium {
  font-size: 14px;
  padding: 11px 20px;
}

.storybookButtonLarge {
  font-size: 16px;
  padding: 12px 24px;
}

// /src/Button/Button.js
import React from "react";

import classes from "./button.module.css";

const Button = ({ primary, backgroundColor, size, label, ...props }) => {
  const mode = primary
    ? classes.storybookButtonPrimary
    : classes.storybookButtonSecondary;
  return (
    <button
      type="button"
      className={[
        classes.storybookButton,
        classes[`storybookButton${size}`],
        mode,
      ].join(" ")}
      style={backgroundColor && { backgroundColor }}
      {...props}
    >
      {label}
    </button>
  );
};

export default Button;

// /src/Button/index.js
export { default } from "./Button";

구성 요소 라이브러리에서 작업 중이므로 기본 index.js 파일에서 구성 요소를 내보내는 것이 중요합니다.

// /src/index.js
export { default as Button } from "./Button";

구성 요소를 테스트하기 위해 스토리를 추가해 보겠습니다. Storybook에서 추가한 기본 스토리를 제거했는지 확인하십시오.

// /stories/Button.stories.js
import React from "react";

import { Button } from "../src";

export default {
  title: "Basics/Button",
  component: Button,
  argTypes: {
    backgroundColor: { control: "color" },
  },
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: "Button",
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: "Button",
};

export const Large = Template.bind({});
Large.args = {
  size: "Large",
  label: "Button",
};

export const Small = Template.bind({});
Small.args = {
  size: "Small",
  label: "Button",
};

이제 스토리북을 실행하고 http://localhost:6006/?path=/story/basics-button--primary를 방문하여 즉시 구성 요소를 확인하고 수정할 수 있습니다.

라이브러리에 필요한 만큼 구성요소와 스토리를 자유롭게 추가하세요!

건축 프로젝트

세상과 공유할 수 없는 프로젝트가 무슨 소용이 있겠습니까? 프로젝트를 빌드하고 npm에 배포합시다!

롤업 설치

npm i -D rollup rollup-plugin-peer-deps-external rollup-plugin-postcss rollup-plugin-terser @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve

롤업 구성 설정

// /rollup.config.js
import resolve from "@rollup/plugin-node-resolve";
import { babel } from "@rollup/plugin-babel";
import external from "rollup-plugin-peer-deps-external";
import { terser } from "rollup-plugin-terser";
import postcss from "rollup-plugin-postcss";

export default {
  input: "src/index.js",
  output: [
    {
      file: "dist/index.js",
      format: "cjs",
    },
    {
      file: "dist/index.es.js",
      format: "es",
      exports: "named",
    },
  ],
  plugins: [
    postcss({
      plugins: [],
      minimize: true,
    }),
    babel({
      exclude: "node_modules/**",
      presets: ["@babel/env", "@babel/preset-react"],
      babelHelpers: "bundled",
    }),
    external(),
    resolve(),
    terser(),
  ],
  external: ["react", "react-dom"],
};

파일을 빌드하는 스크립트를 추가합니다.

// /package.json
{
  // ...
  "scripts": {
    // ...
    "build": "rollup -c"
  }
}

이제 다음을 사용하여 프로젝트를 구축할 수 있습니다.

npm run build

이제 npm에 프로젝트를 게시할 수 있습니다! 고유한 패키지 이름이 있는지 확인하십시오.

마무리

Material UI는 수년 동안 존재해 온 매우 성숙한 라이브러리입니다. 거대한 기술 회사에서도 사용되는 뛰어난 라이브러리를 만든 것에 대해 확실히 언급할 가치가 있습니다!

진정으로 Material UI와 경쟁하는 라이브러리를 만들고 싶다면 먼저 수십 년의 힘든 작업을 할 준비가 되어 있어야 합니다.

행운을 빌어 요!



연구에 따르면 펜과 종이에 목표를 적으면 목표를 달성할 가능성이 21%에서 39% 더 높아집니다. 꿈을 이루기 위한 여정을 더 쉽게 만들어 줄 다음 공책과 저널을 확인하십시오: https://www.amazon.com/Tapajyoti-Bose/e/B09VGDDHRR

읽어 주셔서 감사합니다

개발 문제를 해결하기 위해 최고 등급의 프런트 엔드 개발 프리랜서가 필요하십니까? Upwork에 저에게 연락하십시오

내가 무엇을 하고 있는지 보고 싶습니까? 내 Personal Website 및 GitHub을 확인하십시오.

연결하시겠습니까? 에 나에게 연락

저는 2022년 중반 디지털 노마드로 출발할 프리랜서입니다. 여행을 잡고 싶습니까? 날 따라와

Weekly new Tidbits를 보려면 내 블로그를 팔로우하세요.

자주하는 질문

다음은 제가 받는 몇 가지 자주 묻는 질문입니다. 따라서 이 FAQ 섹션이 문제를 해결하기를 바랍니다.

저는 초보자입니다. Front-End Web Dev를 어떻게 배워야 합니까?
다음 기사를 살펴보십시오.