React App (CRA) Quick View
생성
Facebook의 명령 줄 도구 CRA (React App) Crome React App (CRA)는 React Projects의 생성을 단순화합니다. 웹 팩 빌드 프로세스를 미리 구성하여 복잡한 빌드 파이프 라인을 구축하는 데 어려움을 겪었습니다.
react-scripts
반응 앱 작업을 어떻게 생성합니까
npm run build
원사 사용 :
npm run eject
또한 모든 구성 및 빌드 스크립트를 사용하여 프로젝트에 react-scripts
패키지를 추가합니다. 다시 말해, 프로젝트는 자체가 아니라 패키지에 따라 다릅니다. 설치가 완료되면 개발 서버를 시작하고 프로젝트 처리를 시작할 수 있습니다.
주요 함수
로컬 개발 서버 :
컨텐츠를 변경 한 후 응용 프로그램을 자동으로 다시로드하는 Watcher를 포함하여 Webpack Development Server가 시작됩니다. V4부터 시작하여 React App 만들기는 핫 모듈 교체의 대안으로 React의 빠른 새로 고침을 지원합니다.
<code class="language-bash">npx create-react-app new-app cd new-app npm start</code>
es6 및 es7 지원 : 를 사용하여 , 객체 REST/SPREAT SPERTITIES, DYNAMIC
등과 같은 ES6 및 ES7 기능을 지원합니다.<code class="language-bash">yarn create react-app new-app cd new-app yarn start</code>
리소스 가져 오기 : CSS 파일, 이미지 또는 글꼴은 JavaScript 모듈에서 가져올 수 있습니다. 애플리케이션이 구축 된 후 React 앱 작성은 파일을 빌드 폴더에 복사합니다.
<code>new-app ├── .gitignore ├── node_modules ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── README.md ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── reportWebVitals.js │ └── setupTests.js └── yarn.lock</code>
는 CSS 파일 가져 오기를 지원하고 모든 CSS 파일은 빌드시 하나의 패키지로 병합됩니다. CSS 모듈 () 및 SASS ( 파일을 지원하며 별도로 )를 설치해야합니다.
*.module.css
.scss
단위 테스트 : node-sass
테스트를 JEST와 함께 실행하고 내용을 변경할 때 테스트를 다시 시작하기 위해 감시자를 시작하십시오.
개발 프로세스 중에 코드는 ESLINT를 통해 정적으로 분석됩니다.
npm test
프로덕션 환경 패키지 만들기 :
배포 : 생성 된 빌드 결과는 다양한 환경에 쉽게 배포 할 수있는 정적 파일입니다.
환경 변수 : 는 로 시작하는 환경 변수의 사용을 지원합니다.
npm run build
코드 세분화 : 는 코드 세분화의 동적
를 지원합니다.
TypeScript 지원 : 옵션을 사용하여 TypeScript 프로젝트를 만들 수 있습니다.
REACT_APP_
PWA (Progressive Web Applications (PWA) 지원 :
웹 생명체 : 라이브러리를 사용하여 웹 생명체 메트릭을 추적합니다.
package.json
proxy
import()
(FAQ 부품은 기사와 복제되어 너무 길기 때문에 생략됩니다.)
위 내용은 React 앱 생성 : REACT 프로젝트를 빨리 준비하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!