터미널용 My React Functional Component 제작자

Hi 👋, this is my first post. Any feedback is welcome.

지금까지 몇 달 동안 저는 React에 대해 더 깊이 파고들었습니다. React 세계의 초보자로서 나는 몇 가지 일을 계속해서 반복하는 것을 보았고, 그들에 대한 장인 명령이 있었으면 좋았을 텐데(Laravel 개발자는 내가 의미하는 바를 알 수 있습니다) 간단히 말해서 기본 파일을 만드는 방법입니다. 빠르게.

동시에, 저는 점점 더 많은 Linux, 특히 Ubuntu를 사용하고 있습니다. 이 Ubuntu는 시험 삼아 설치한 것입니다WSL2. 특히 땜질하기가 얼마나 쉬운지 매우 만족합니다. 내 작업을 보다 효율적으로 만들기 위해 나만의 명령과 스크립트를 만듭니다.

이러한 반복적이고 지루한 작업 중 하나는

폴더 만들기

그런 다음 파일의 기본값을 내보낸 index.js를 내부에 넣습니다

.

그 파일을 만들고 그 안에 import React from 'react'

물론 함수를 만들고 export default로

당신은 훈련을 알고 이것이 어디로 가고 있는지 알고 있습니다 ✨.

pls_react_function_component를 소개합니다!

나는 여기 DEV.to에서 pls_react_function_component라고 부르는 겸손한 시간 절약 명령을 공유하기로 결정했습니다. 그러니 그것을 사용하고 마음껏 해킹하십시오.
또한 이름이 길다는 것을 알고 있습니다.

🛠 사용법

pls_react_function_component <OPTIONS>... <COMPONENT_NAME>...

옵션

-e 생성된 파일의 확장자를 제공된 확장자로 변경합니다. ts를 선택하면 파일에서 세미콜론이 제거됩니다. 기본값은 js입니다. 점이 필요하지 않습니다.

-p 존재하지 않는 경우 상위 폴더를 생성합니다.

-h 명령에 대한 도움말을 표시합니다.

예시

다음과 같은 폴더 구조가 있고 새 바닥글 구성 요소를 만들고 싶다고 가정해 보겠습니다.

src/
└── components/

편리한 newpls_react_function_component 명령을 호출합니다.

pls_react_function_component src/components/Footer

이렇게 하면 다음과 같은 폴더 구조와 파일이 생성됩니다.

src/
└── components/
    └── Footer/
        ├── Footer.js
        └── index.js

// src/components/Footer/Footer.js contents
import React from 'react';

function Footer() {
    return (
        <React.Fragment></React.Fragment>
    );
}

export default Footer;

// src/components/Footer/index.js contents
export { default } from './Footer';

💡 마침내 코드

⚠ 몇 가지 경고:

• 몇 가지가 더 나을 수 있다는 것을 잘 알고 있기 때문에 코드도 공유하고 있습니다. 저는 쉘 스크립팅의 초보자입니다. 따라서 더 나은 것을 찾으면 피드백을 댓글로 남겨주세요. 당신은 🙏.
• 첫 번째 줄인 the shebang에는 작업할 기본 터미널로 ZShell을 사용하기 때문에 일반적인 bash 대신 zsh가 있습니다. 필요한 경우 #!/bin/bash로 변경할 수 있습니다.
• 이 파일은 터미널이 사전 로드하는 기능에 추가되도록 구성되어 있지만 원하는 대로 사용할 수 있습니다.
• 내 코드의 스타일 지정(예: 탭 크기, 화살표 기능, 내보내기 등)에 동의하지 않을 수 있지만 필요에 따라 코드를 편집, 리믹스 및 수정할 수 있습니다. !
• 요점을 복사/복제한 후 적절한 명령으로 더 잘 사용하려면 확장을 제거하는 것이 좋습니다.

알겠습니다. 지금은 제가 할 일입니다. 어쨌든 이 스크립트를 업데이트하면 이 게시물의 요점도 업데이트하겠습니다. 사용하셨거나 유용하셨다면 알려주세요.

부끄러우면 ❤ 또는 🦄이면 충분합니다!

요약: React Function Components를 쉽게 생성할 수 있도록 터미널용 스크립트를 만들었습니다.