React 앱 생성 : REACT 프로젝트를 빨리 준비하십시오

React App (CRA) Quick View

생성 Facebook의 명령 줄 도구 CRA (React App) Crome React App (CRA)는 React Projects의 생성을 단순화합니다. 웹 팩 빌드 프로세스를 미리 구성하여 복잡한 빌드 파이프 라인을 구축하는 데 어려움을 겪었습니다. CRA는 NPM 또는 원사에서 실행할 수 있으며 모든 구성 및 빌드 스크립트를 포함하는 패키지가 포함 된 프로젝트 구조를 설정합니다. 이 도구에는 로컬 개발 서버가 포함되어 있으며 ES6 및 ES7 기능, CSS 모듈, JEST 장치 테스트 및 ESLINT를 지원합니다.

를 사용하려면 생산 환경 패키지를 만들고 최적화 된 응용 프로그램 버전을 생성하고 배포를 준비하십시오. 또한 Web Vitals를 사용한 환경 변수, 코드 세분화, 타이프 스크립트, 점진적 웹 응용 프로그램 및 성능 측정을 지원합니다.

CRA가 불충분 한 기능을 제공하는 경우, 사용자는

를 실행하도록 선택할 수 있으며, 이는 웹 팩 구성을 복사하고 스크립트를 프로젝트에 구축하여 사용자 정의가 가능합니다. 또는 사용자는 필수 기능을 추가하여 자체 분기를 포장하고 유지 관리 할 수 ​​있습니다.

react-scripts 반응 앱 작업을 어떻게 생성합니까

Create React App은 NPM 또는 원사를 사용하여 실행할 수있는 독립형 도구입니다. 몇 가지 명령만으로 새 폴더에서 새 React 응용 프로그램을 생성하고 실행하십시오. NPM 사용 : npm run build 원사 사용 :

> React App 만들기는 다음 프로젝트 구조를 설정합니다.

npm run eject 또한 모든 구성 및 빌드 스크립트를 사용하여 프로젝트에 react-scripts 패키지를 추가합니다. 다시 말해, 프로젝트는 자체가 아니라 패키지에 따라 다릅니다. 설치가 완료되면 개발 서버를 시작하고 프로젝트 처리를 시작할 수 있습니다.

주요 함수

로컬 개발 서버 :

컨텐츠를 변경 한 후 응용 프로그램을 자동으로 다시로드하는 Watcher를 포함하여 Webpack Development Server가 시작됩니다. V4부터 시작하여 React App 만들기는 핫 모듈 교체의 대안으로 React의 빠른 새로 고침을 지원합니다.

npx create-react-app new-app
cd new-app
npm start

es6 및 es7 지원 : 를 사용하여 , 객체 REST/SPREAT SPERTITIES, DYNAMIC

등과 같은 ES6 및 ES7 기능을 지원합니다.

yarn create react-app new-app
cd new-app
yarn start

리소스 가져 오기 : 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 :

개발 프로세스 중에 코드는 ESLINT를 통해 정적으로 분석됩니다. npm test 프로덕션 환경 패키지 만들기 :

최적화 된 생산 환경 패키지 생성.

배포 : 생성 된 빌드 결과는 다양한 환경에 쉽게 배포 할 수있는 정적 파일입니다.

환경 변수 : 는 로 시작하는 환경 변수의 사용을 지원합니다. npm run build

리버스 프록시 : 필드를 구성하여 요청을 프록시 할 수 있습니다.

코드 세분화 : 는 코드 세분화의 동적

를 지원합니다.

TypeScript 지원 : 옵션을 사용하여 TypeScript 프로젝트를 만들 수 있습니다. REACT_APP_ PWA (Progressive Web Applications (PWA) 지원 :

또는

웹 생명체 : 라이브러리를 사용하여 웹 생명체 메트릭을 추적합니다. package.json proxy

cra 를 사용하여 포기하십시오 CRA가 충분히 작동하지 않으면

를 사용하여 웹 팩 구성을 복사하고 스크립트를 프로젝트에 구축하여 사용자 정의 할 수 있습니다. 또는, 당신은 포장을 포장하고 자신의 가지를 유지할 수 있습니다.

요약

Create React App은 새로운 React 프로젝트를 시작하여 빌드 프로세스를 단순화하고 풍부한 기능을 제공하는 편리한 도구입니다. 빠른 프로토 타입이든 큰 프로젝트이든, 많은 개발 시간을 절약 할 수 있습니다. import() (FAQ 부품은 기사와 복제되어 너무 길기 때문에 생략됩니다.)

위 내용은 React 앱 생성 : REACT 프로젝트를 빨리 준비하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!