create-react-app을 사용하여 새로운 React 컴포넌트를 작성하는 최선의 방법

create-react-app을 사용하여 새로운 React 컴포넌트를 작성하는 최선의 방법

사용하고 있다create-react-app.파일을 비계화하는 컴포넌트를 작성하기 위한 명령어가 있습니까?

지금은 수동으로 파일을 만들고 있습니다.컴포넌트명이 다음과 같은 경우Button컴포넌트 폴더 내에 Button이라는 이름의 폴더를 작성한 후Button.js그리고.Button.css파일을 표시합니다.

create-react-app을 사용하여 이를 수행하기 위한 CLI 명령어가 있습니까?이 Angular CLI를 실행하는 방법은 있지만 React CLI를 사용하는 방법은 없습니다.

generate-react-cli를 설치하지 않고 직접 사용할 수 있습니다.

npx generate-react-cli component MyComponent

프로젝트 기본 설정(예: typescript, scss 등)에 따라 컴포넌트가 설치됩니다.

라고 하는 파일generate-react-cli.json나중에 사용할 수 있도록 모든 설정이 저장되는 위치에 생성됩니다.

다른 방법은 수동으로 파일을 만들고 스니펫을 사용하여 코드를 생성하는 것입니다.

예를 들어, 이 JavaScript/React VS Code 확장을 살펴 보십시오.필요에 따라서, 독자적인 스니펫을 작성하거나 다른 확장자를 검색할 수도 있습니다.

https://www.npmjs.com/package/generate-react-component 를 사용해 주세요.

이를 통해 기능 및 클래스 구성 요소라고도 하는 상태 및 상태 비저장 구성 요소를 만들 수 있습니다.

최근 프로젝트 중 하나에서 Plop JS를 사용했습니다.동일한 코드 집합의 파일을 생성할 때 매우 유용합니다.

Pop은 제가 "마이크로 제너레이터 프레임워크"라고 부르는 것입니다.코드나 다른 유형의 플랫 텍스트 파일을 일관되게 생성할 수 있는 간단한 도구이기 때문에 이렇게 부릅니다.아시다시피, 우리 모두는 코드(루트, 컨트롤러, 컴포넌트, 도우미 등)에 구조 및 패턴을 작성합니다.이러한 패턴은 시간이 지남에 따라 변화하고 개선되기 때문에 여기에 새로운 패턴명 삽입을 작성해야 할 때 코드베이스에서 현재의 "베스트 프랙티스"를 나타내는 파일을 찾는 것이 항상 쉽지만은 않습니다.바로 그곳이 널 구하는 곳이야.plop을 사용하면 CODE에서 주어진 패턴을 만드는 "베스트 프랙티스" 방식을 사용할 수 있습니다. 이 코드는 plop을 입력하면 단말기에서 쉽게 실행할 수 있습니다.이것에 의해, 코드 베이스로 카피할 수 있는 적절한 파일을 찾을 필요가 없어질 뿐만 아니라, 「올바른 방법」을 「가장 간단하게」새로운 파일을 작성할 수 있게 됩니다.

React에서 컴포넌트를 쉽게 작성할 수 있는 두 가지 방법:

1) CLI npx generate-react-cli 컴포넌트 박스 포함

2) VS 코드용 확장 버전을 설치합니다.component.js를 사용하여 파일 이름을 수동으로 만들고 이 명령어를 입력하고 탭을 누릅니다.아래 코드가 자동으로 표시됩니다.

import React from 'react'
const HeaderComponent = () => {
  return (
    <span>HeaderComponent</span>
  )
}
export default HeaderComponent

언급URL : https://stackoverflow.com/questions/51942009/best-way-to-create-new-react-component-using-create-react-app