최고의 사용자 및 개발경험을 위해 통합된 툴체인을 사용하십시오.
이 페이지는 다음과 같은 작업에 도움이되는 React 툴체인에 대해 설명합니다 :
- 많은 file 및 component 확장
- npm third-party 라이브러리 사용
- 개발중 일반적인 실수를 감지
- 개발중인 CSS/JS의 실시간 편집
- Production의 최적화
이 페이지에서 추천하는 툴체인은 설정없이 시작할 수 있습니다.
You Might Not Need a Toolchain
위에 설명 된 것들이 필요하지않거나 JavaScript 도구를 사용하는 데 익숙하지 않은 경우 HTML 페이지에 일반 <script>태그 로 React를 추가 하고 JSX를 선택적으로 추가하세요 .
이것은 React를 기존 웹 사이트에 통합하는 가장 쉬운 방법이기도합니다.
Recommended Toolchains
React 팀은 주로 다음 솔루션을 권장합니다.
- React 학습 또는 SPA만들기가 목적인 경우 Create React App 사용
- Node.js를 사용 하여 서버 렌더링 웹 사이트를 만드는 경우 Next.js 사용
- 정적 컨텐츠 중심의 웹 사이트 만드는 경우 Gatsby
- 컴포넌트 라이브러리 또는 기존 코드베이스와 통합인 경우 융통성있는 툴체인
Create React App
Create React App은 React를 배우기 편안한 환경이며 React로 새로운 단일 페이지 응용 프로그램을 작성 하는 가장 좋은 방법 입니다.
최신 JavaScript 기능을 사용할 수 있고 멋진 개발자 경험을 제공하고 Production을 위해 앱을 최적화 할 수 있도록 개발 환경을 설정합니다. 컴퓨터에 Node> = 6 및 npm> = 5.2 버전이 있어야합니다. 프로젝트를 만들려면 다음을 실행하십시오.
npx create-react-app my-app
cd my-app
npm start노트
첫줄의 npx은 오타가 아닙니다. npm 5.2 이상과 함께 제공 되는 패키지 러너 도구입니다 .
Create React App은 백엔드 로직이나 데이터베이스를 처리하지 않습니다. 프론트엔드 빌드 파이프 라인을 생성하기 때문에 원하는 백엔드와 함께 사용할 수 있습니다. 뒷쪽에서 Babel과 webpack을 사용하고 있지만 그것들에 대해 아무 것도 알 필요가 없습니다.
프로덕션 환경에 배포 준비가되면 npm run build을 실행 합니다. 빌드 폴더에 앱의 최적화 된 빌드가 생성됩니다. README와 사용자 가이드에서 React Create App에 대해 더 배울 수 있습니다 .
Next.js
Next.js는 React로 구축 된 정적 및 서버 렌더링 응용 프로그램을 위한 대중적이고 가벼운 프레임 워크입니다. 이 제품에는 즉시 사용 가능한 스타일링 및 라우팅 솔루션 이 포함되어 있으며 Node.js를 서버 환경으로 사용한다고 가정합니다.
공식 가이드에서 Next.js에 대해 알아보십시오.
Gatsby
Gatsby는 React로 정적 웹 사이트를 만드는 가장 좋은 방법 입니다. React Component를 사용할 수 있지만 미리 렌더링 된 HTML 및 CSS를 출력하여 로드 시간을 가장 빠르게 보장합니다.
Gatsby에 대한 공식 가이드 와 Starter kits를 살펴보십시오 .
More Flexible Toolchains
다음 툴 첸은 유연성과 선택의 폭이 넓습니다. 숙련 된 사용자에게 권장합니다.
- Neutrino는 웹팩의 장점과 프리셋의 단순함을 결합하고, React app과 React component 컴포넌트를 위한 프리셋을 포함합니다.
- nwb는 특히 npm에 React component를 publishing데 적합합니다. React 앱 제작에도 사용할 수 있습니다.
- Parcel은 React와 함께 작동 하는 빠르고 제로 구성의 웹 응용 프로그램 번들러입니다.
- Razzle은 설정이 필요하지않고 Next.js보다 유연성이 뛰어난 서버 렌더링 프레임 워크입니다.
Creating a Toolchain from Scratch
JavaScript 빌드 도구 모음은 일반적으로 다음과 같이 구성됩니다.
- package manager
- Yarn 또는 NPM- third-party packages의 방대한 생태계를 활용하고 쉽게 설치하거나 업데이트 할 수 있습니다.
- bundler
- 웹팩 또는 Parcel- 모듈식 코드를 작성하여 작은 패키지로 묶어서 로드 시간을 최적화 할 수 있습니다.
- compiler
- 바벨 . 오래된 브라우저에서 작동하는 최신 JavaScript 코드를 작성할 수 있습니다.
직접 자바 스크립트 툴체인을 설정하려면 이 가이드 에서 Create React App 기능 중 일부를 다시 만들어보십시오.
사용자 지정 도구 체인 이 프로덕션 환경에 올바르게 설정되었는지 확인하는 것을 잊지 마십시오 .
