제로에서 영웅까지 완전한 반응 보일러 플레이트 튜토리얼

React를 배우기 시작할 때 프로젝트를 만들려면 처음부터 상용구를 만들거나 커뮤니티에서 제공 한 것을 사용해야합니다. 거의 항상 빌드 구성이없는 앱을 만드는 데 사용하는 create-react-app입니다. 또는 우리는 우리 자신의 간단한 상용구를 처음부터 새로 만듭니다.

이것으로부터 명심하십시오 : 항상 내가 사용하는 모든 의존성을 가진 상용구를 만들고 준비해 두는 것이 어떻습니까? 지역 사회는 또한 그렇게 생각했습니다. 이제 우리는 여러 지역 사회가 만든 상용구를 가지고 있습니다. 일부는 다른 것보다 더 복잡하지만 항상 최대 시간을 절약한다는 동일한 목표를 가지고 있습니다.

이 기사에서는 오늘날 React 커뮤니티에서 사용되는 주요 종속성을 사용하여 처음부터 자체 상용구를 구축하는 방법에 대해 설명합니다. 요즘 가장 일반적인 최신 기능 중 일부를 사용하여 원하는 방식으로 맞춤 설정할 수 있습니다.

이 기사에서 만든 상용구는 여기에서 구할 수 있습니다!

시작하기

먼저, 상용구를 시작할 폴더를 만들겠습니다. 원하는대로 이름을 지정할 수 있습니다. 이름을 반응 볼트로 지정하겠습니다.

터미널을 열고 다음과 같이 작성하십시오.

mkdir 반응 볼트

이제 생성 된 폴더로 이동하여 다음 명령을 입력하십시오.

npm init -y

NPM은 package.json 파일을 생성하고 설치 한 모든 종속성과 명령이 거기에 있습니다.

이제 상용구의 기본 폴더 구조를 만들겠습니다. 지금은 이렇게 될 것입니다 :

반응 볼트
    | --config
    | --src
    |-테스트

웹팩

Webpack은 오늘날 JavaScript 응용 프로그램을위한 가장 유명한 모듈 번 들러입니다. 기본적으로 모든 코드를 묶고 하나 이상의 번들을 생성합니다. 여기에서 자세히 알아볼 수 있습니다.

이 상용구에서는이를 사용하므로 다음의 모든 종속성을 설치하십시오.

npm install --save-dev webpack webpack-cli webpack-dev-server webpack-merge html-webpack-plugin clean-webpack-plugin img-loader url-loader 파일 로더

이제 config 폴더에서 webpack이라는 다른 폴더를 만든 다음 해당 webpack 폴더 안에 5 개의 파일을 만듭니다.

paths.js라는 파일을 만듭니다. 그 파일 안에는 모든 출력 파일의 대상 디렉토리가 될 것입니다.

그 안에이 코드를 모두 넣으십시오.

이제 rules.js라는 다른 파일을 만들고 여기에 다음 코드를 넣습니다.

그런 다음 3 개의 파일을 더 만듭니다.

webpack.common.babel.js

webpack.dev.babel.js

webpack.prod.babel.js

기본적으로 webpack.common.babel.js 파일에서 입력 및 출력 구성을 설정하고 필요한 플러그인을 포함 시켰습니다. webpack.dev.babel.js 파일에서 모드를 개발로 설정했습니다. webpack.prod.babel.js 파일에서 모드를 프로덕션으로 설정했습니다.

그런 다음 루트 폴더에 webpack.config.js라는 마지막 웹팩 파일을 만들고 다음 코드를 넣습니다.

웹팩 설정이 준비되었으므로 이제 Babel, ESLint, Prettier 등을 사용하여 상용구의 다른 부분에 대해 작업하겠습니다.

바벨

나는 React와 함께 일하는 거의 모든 사람들이 아마도 바벨에 대해 들었고이 간단한 트랜스 필러가 우리 삶에 어떻게 도움이되는지 들었습니다. 그것이 무엇인지 모른다면 기본적으로 JavaScript 코드를 모든 브라우저에서 실행할 수있는 일반 오래된 ES5 JavaScript로 변환하는 변환기입니다.

우리는 많은 Babel 플러그인을 사용할 것이므로 루트 폴더에 다음을 설치하십시오.

npm install --save-dev @ babel / core @ babe / cli @ babel / node @ babel / plugin-proposal-class-properties @ babel / plugin-proposal-object-rest-spread @ babel / plugin-syntax-dynamic- import @ babel / plugin-syntax-import-meta @ babel / plugin-transform-async-to-generator @ babel / plugin-transform-runtime @ babel / preset-env @ babel / preset-react @ babel / register @ babel / 런타임 babel-eslint babel-jest babel-loader babel-core@7.0.0-bridge.0

그런 다음 루트 폴더에 .babelrc라는 파일을 만들고 해당 파일 안에 다음 코드를 넣습니다.

이제 우리 프로젝트는 Babel에 의해 컴파일되었으며, 차세대 JavaScript 구문을 아무런 문제없이 사용할 수 있습니다.

ESLint

오늘날 린트 프로젝트에 가장 많이 사용되는 도구는 ESLint입니다. 변수 범위와 관련된 버그, 선언되지 않은 변수에 할당 등과 같은 특정 종류의 버그를 찾는 것이 정말 도움이됩니다.

먼저 다음 종속성을 설치하십시오.

npm 설치 --save-dev eslint eslint-config-airbnb eslint-config-prettier eslint-loader eslint-plugin-babel eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react

그런 다음 루트 폴더에 .eslintrc라는 파일을 만들고 다음 코드를 거기에 넣으십시오.

예뻐

Prettier는 기본적으로 코드 포맷터입니다. 코드를 구문 분석하고 최대 줄 길이를 고려하여 필요한 경우 코드를 줄 바꿈하는 자체 규칙으로 다시 인쇄합니다.

설치 만하면됩니다.

npm install --save-dev 더 예쁘다

그리고 루트 폴더에 .prettierrc라는 파일을 만들고 다음 코드를 넣으십시오.

반응

React는 사용자 인터페이스를 구축하기위한 오픈 소스 JavaScript 응용 프로그램 라이브러리입니다. Facebook에 의해 개발되었으며 그 뒤에 거대한 커뮤니티가 있습니다. 이 기사를 읽고 있다면 React에 대해 이미 알고 있다고 가정하지만 더 자세히 알고 싶다면 여기를 읽으십시오.

다음과 같은 종속성을 설치하겠습니다.

npm 설치-반응 반응 교차 환경 저장

그리고 src 폴더 안에 간단한 HTML 파일 index.html을 만들고 다음 코드를 넣습니다.

그런 다음 간단한 React 프로젝트를 만들 것입니다. src 폴더 안에 다음과 같이 index.js 파일을 만듭니다 :

src 폴더 안에는 다음과 같은 구조가 있습니다 :

src
    |-동작
    |-구성 요소
    |-리듀서
    |-리듀서
    |-저장

components 폴더 안에 App.js라는 파일을 만들고 다음 코드를 넣습니다.

리덕스

Redux를 사용하면 애플리케이션 상태를 쉽게 관리 할 수 ​​있습니다. 이를 보는 또 다른 방법은 표시하는 데이터를 관리하고 사용자 작업에 응답하는 방법을 돕는 것입니다. 요즘 많은 사람들이 MobX 또는 setState 자체와 같은 다른 옵션을 선호하지만이 상용구에는 Redux를 사용합니다.

먼저 몇 가지 종속성을 설치하겠습니다.

npm 설치-redux react-redux redux-thunk 저장

그런 다음 Redux 스토어를 만들고 여기에 상태를 추가하겠습니다. 상점 폴더에서 index.js 파일을 작성하고 다음 코드를 거기에 넣으십시오.

이제 reducers 폴더 안에 index.js를 만들고 다음 코드를 넣습니다.

마지막으로 src 폴더의 index.js로 가서 로 코드를 감싸고 상점을 소품으로 전달하여 응용 프로그램에서 사용할 수 있도록합니다.

다음과 같이 될 것입니다 :

다 했어요 Redux 스토어가 구성되어 준비되었습니다.

반응 라우터

React Router는 React의 표준 라우팅 라이브러리입니다. 기본적으로 UI는 URL과 동기화 상태를 유지합니다. 보일러 플레이트에서 사용할 것이므로 설치하십시오.

npm install --react-router-dom 저장

그런 다음 src 폴더의 index.js로 이동하여 로 모든 코드를 래핑하십시오.

src 폴더의 index.js는 다음과 같이 끝납니다.

스타일이 지정된 구성 요소

Styled Components는 React 프로젝트를 구성하는 데 도움이되므로 모든 사람이 CSS를 쉽게 사용할 수 있습니다. 그 목적은 더 작고 재사용 가능한 구성 요소를 작성하는 것입니다. 우리는 그것을 사용할 것이고, 그것에 대해 더 배우고 싶다면 여기를 읽으십시오.

먼저 설치하십시오 :

npm install-스타일 구성 요소 저장

그런 다음 components 폴더 안에있는 App.js 파일에서 Styled Components를 사용하여 간단한 제목을 만듭니다. 제목은 다음과 같습니다.

파일 내부에서 스타일이 지정된 구성 요소를 가져와야하므로 파일은 다음과 같이 끝납니다.

농담 및 반응 테스트 라이브러리

Jest는 Facebook의 오픈 소스 JavaScript 테스트 라이브러리입니다. 응용 프로그램을 쉽게 테스트하고 올바른 결과를 제공하는 것과 그렇지 않은 것에 대해 많은 정보를 제공합니다. React Testing Library는 React 구성 요소를 테스트하기위한 매우 가벼운 솔루션입니다. 기본적으로이 라이브러리는 Enzyme을 대체합니다.

모든 응용 프로그램에는 일종의 테스트가 필요합니다. 이 기사에서는 테스트를 작성하지는 않지만 애플리케이션 테스트를 시작하기 위해 이러한 도구를 구성하는 방법을 보여 드리겠습니다.

먼저 두 가지를 모두 설치하겠습니다.

npm install --save-dev jest jest-dom 반응 테스트 라이브러리

그런 다음 package.json으로 이동하여 다음을 입력하십시오.

그런 다음 config 폴더로 이동하여 tests라는 다른 폴더를 만들고 그 폴더 안에 2 개의 파일을 만듭니다.

먼저 jest.config.js라는 파일을 만들고 다음 코드를 입력하십시오.

그런 다음 rtl.setup.js라는 파일을 작성하고 다음 코드를 입력하십시오.

다 했어요 상용구가 준비되었으며 이제 사용할 수 있습니다.

이제 package.json 파일로 이동하여 다음 코드를 입력하십시오.

이제 npm start 명령을 실행하고 localhost : 8080으로 이동하면 응용 프로그램이 제대로 작동하는 것을 볼 수 있습니다!

최종 코드를 보려면이 기사에서 만든 상용구를 여기에서 사용할 수 있습니다!

상용구에 포함하고 싶은 몇 가지 기능에 대한 아이디어가 있으니 부담없이 참여해주세요.

트위터에 나를 따라와!
GitHub에서 나를 따라와!

원격 기회를 찾고 있습니다. 문의 사항이 있으면 언제든지 문의 해주세요.