반응으로 개발하는 작년에 나는 많은 스택을 시도했고 각각의 사용 사례가 다릅니다. 요즘 나는 이것이 내가 가장 좋아하는 React 앱용 스택이라고 말할 수 있습니다 (상태 관리 시스템에 대한 이야기는 제외). 이것이 나의 단계입니다. 그것을 실행

요구 사항:

노드 > v10

원사

1. 프로젝트 초기화

세게 때리다
mkdir 내 앱
cd 내 앱
원사 초기화 -y
원사 추가 react react-dom next -S

페이지 디렉토리 생성

세게 때리다
cd 내 앱
mkdir 페이지

youre package.json에 다음 스크립트를 추가합니다.

json
{
...
"스크립트": {
"개발자": "다음",
"build": "다음 빌드",
"시작": "다음 시작"
}
...
}

2. Typescript 추가

페이지 폴더에서 index.tsx를 생성합니다.

타자기
import * as React from 'react';

const 앱 = ()=>{
반품(

안녕하세요 세계

)
}
기본 앱 내보내기;

그리고 프로젝트 경로에서 생성

세게 때리다
터치 tsconfig.json

이 패키지를 추가하십시오

세게 때리다
원사 추가 --dev typescript @types/react @types/node

그런 다음 실행

세게 때리다
원사 실행 개발

이제 Next와 함께 작동하는 TypeScript가 있습니다.

3. 스토리북 추가

Storybook은 react, vue, Angular에 대해 격리된 구성 요소를 테스트하는 놀라운 도구입니다. 특히 Atomic Design과 같은 일부 디자인 방법론을 사용할 때 모든 프로젝트에서 매우 유용합니다.
먼저 추가해야 합니다.

세게 때리다
원사 추가 @storybook/react babel-loader
/코어 -D

.storybook 폴더 생성

세게 때리다
mkdir .storybook

즉시 사용할 수 있는 스토리북은 Typescript를 허용하지 않습니다. 사용하기 전에 일부 구성 및 패키지를 추가해야 합니다.

세게 때리다
실 추가 멋진-typescript-로더 반응-docgen-typescript-로더 -D

/.storybook에서 우리는 자신의 tsconfig.json 파일을 만들 것입니다.

세게 때리다
CP ./tsconfig.json ./.storybook/

이 경우 프로젝트 경로에서 tsconfig 파일을 복사하여 붙여넣고 다음 필드를 변경합니다.

json
...
"포함": [
"../types.d.ts",
"../next-env.d.ts",
"..//*.stories.ts",
"..//*.stories.tsx"
]

그런 다음/.storybook/main.js를 만듭니다.

자바스크립트
const 경로 = 요구('경로');
모듈.내보내기 = {
이야기: ['../components///*.stories.tsx'],
webpackFinal: 비동기 구성 => {
config.module.rules.push({
테스트:/.(ts|tsx)$/,
사용: [
{
로더: require.resolve('awesome-typescript-loader'),
옵션:{
configFileName: path.resolve(dirname, './tsconfig.json')
}
},
//선택사항
{
로더: require.resolve('react-docgen-typescript-loader'),
옵션:{
tsconfigPath: path.resolve(dirname, './tsconfig.json'),

            }
          },
        ],
      });
      config.resolve.extensions.push('.ts', '.tsx');
      return config;
    },
    };

package.json에 스크립트 추가

json
{
"스크립트": {
...,
"storybook": "스토리북 시작"
}
}

components/button/index.stories.tsx 내부에 테스트 기록을 작성합니다.

타자기
import * as React from 'react';

내보내기 기본 { 제목: '버튼' };

export const withText = () => Hello 버튼;

내보내기 const withEmoji = () => (
저를 클릭해주세요
);

브라우저에 이 화면이 표시되어야 합니다.

읽어 주셔서 감사합니다. 이것은 DEV의 첫 번째 게시물입니다 :) 질문이나 제안이 있으면 댓글 상자에 댓글을 남겨주세요.
다시 한번 감사드립니다 :D