youthfulhps-tutorial/react-hygen-templates

hygen을 통해 리엑트 클라이언트 개발 사이클을 개선해봅니다.

react-component-template-hygen

new-component generator

// _templates/generator/new-component-index.ejs.t

---
to: src/components/<%= domain %>/<%= componentName %>.tsx
---
import React from 'react';
import styled from 'styled-components';

type <%= componentName %>Props = {

};

const Styled<%= componentName %> = styled.<%= componentElement %>`

`;

const <%= componentName %> = ({}: <%= componentName %>Props) => {
  return (
    <Styled<%= componentName %>>

    </ Styled<%= componentName %>>
  )
};

export default <%= componentName %>

~$ hygen generator new-component --componentName Test --componentElement div --domain main

hygen prompt

// /_templates/generator/new-component/prompt.js

module.exports = {
  prompt: ({ prompter }) => {
    const questions = [
      {
        type: "input",
        name: "domain",
        message: "Enter domain",
      },
      {
        type: "input",
        name: "componentName",
        message: "Enter component name (PascalCase)",
      },
      {
        type: "input",
        name: "componentElement",
        message: "Enter component element (ex. div, span,..)",
      },
    ];
    return prompter.prompt(questions).then((answers) => {
      return { ...answers };
    });
  },
};

{
  "scripts": {
    ...
    "create-component": "hygen generator new-component with-prompt"
  }
}

~$ yarn create-component

Reference

Hygen을 이용한 컴포넌트 템플릿 만들기