yuri admin
1.0.0
React+React-router4+an�td3 기반의 미들 및 백엔드 관리 솔루션입니다.
React+react-router+antd를 기반으로 하는 미드엔드 및 백엔드 솔루션으로 구성이 필요 없고 json만 유지하면 바로 사용할 수 있습니다.
이 프로젝트는 Create React App으로 부트스트랩되었습니다.
아래에서는 일반적인 작업을 수행하는 방법에 대한 몇 가지 정보를 확인할 수 있습니다.
여기에서 이 가이드의 최신 버전을 찾을 수 있습니다.
<title> 변경public 폴더 사용public 폴더를 사용하는 경우.env 에 개발 환경 변수 추가<meta> 태그 생성npm start 변경 사항을 감지하지 못합니다npm test 중단됨npm run build 가 너무 일찍 종료됩니다.npm run build 실패합니다.npm run build 축소되지 않습니다.Create React App은 두 가지 패키지로 나뉩니다.
create-react-app 새 프로젝트를 생성하는 데 사용하는 전역 명령줄 유틸리티입니다.react-scripts 생성된 프로젝트(이 프로젝트 포함)의 개발 종속성입니다. create-react-app 자체를 업데이트할 필요는 거의 없습니다. 모든 설정을 react-scripts 에 위임합니다.
create-react-app 실행하면 항상 최신 버전의 react-scripts 로 프로젝트가 생성되므로 새로 생성된 앱의 모든 새로운 기능과 개선 사항을 자동으로 얻을 수 있습니다.
기존 프로젝트를 새로운 버전의 react-scripts 로 업데이트하려면 변경 로그를 열고 현재 사용 중인 버전을 찾은 다음(확실하지 않은 경우 이 폴더에서 package.json 확인하세요) 최신 버전에 대한 마이그레이션 지침을 적용하세요. 버전.
대부분의 경우 package.json 에서 react-scripts 버전을 실행하고 이 폴더에서 npm install 실행하는 것으로 충분하지만 잠재적인 주요 변경 사항에 대해서는 변경 로그를 참조하는 것이 좋습니다.
우리는 여러분이 어려움 없이 react-scripts 업그레이드할 수 있도록 주요 변경 사항을 최소화하기 위해 최선을 다하고 있습니다.
우리는 항상 귀하의 의견에 열려 있습니다.
생성 후 프로젝트는 다음과 같아야 합니다.
my-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
프로젝트를 빌드하려면 다음 파일이 정확한 파일 이름으로 존재해야 합니다 .
public/index.html 페이지 템플릿입니다.src/index.js 는 JavaScript 진입점입니다.다른 파일을 삭제하거나 이름을 바꿀 수 있습니다.
src 내부에 하위 디렉터리를 만들 수 있습니다. 빠른 재구축을 위해 src 내부의 파일만 Webpack에서 처리됩니다.
JS 및 CSS 파일을 src 안에 넣어야 합니다. 그렇지 않으면 Webpack에서 해당 파일을 볼 수 없습니다.
public/index.html 에서는 public 내의 파일만 사용할 수 있습니다.
JavaScript 및 HTML의 자산을 사용하려면 아래 지침을 읽어보세요.
그러나 더 많은 최상위 디렉터리를 만들 수 있습니다.
프로덕션 빌드에는 포함되지 않으므로 문서화와 같은 용도로 사용할 수 있습니다.
프로젝트 디렉터리에서 다음을 실행할 수 있습니다.
npm start 개발 모드에서 앱을 실행합니다.
http://localhost:3000을 열어 브라우저에서 확인하세요.
수정하면 페이지가 다시 로드됩니다.
콘솔에도 린트 오류가 표시됩니다.
npm test 대화형 감시 모드에서 테스트 실행기를 시작합니다.
자세한 내용은 테스트 실행 섹션을 참조하세요.
npm run build build 폴더에 프로덕션용 앱을 빌드합니다.
프로덕션 모드에서 React를 올바르게 번들링하고 최상의 성능을 위해 빌드를 최적화합니다.
빌드가 축소되고 파일 이름에 해시가 포함됩니다.
앱을 배포할 준비가 되었습니다!
자세한 내용은 배포에 대한 섹션을 참조하세요.
npm run eject 참고: 이 작업은 단방향 작업입니다. 일단 eject 되돌릴 수 없습니다.
빌드 도구 및 구성 선택이 만족스럽지 않으면 언제든지 eject 할 수 있습니다. 이 명령은 프로젝트에서 단일 빌드 종속성을 제거합니다.
대신, 모든 구성 파일과 전이적 종속성(Webpack, Babel, ESLint 등)을 프로젝트에 바로 복사하므로 eject 를 제외한 모든 명령은 계속 작동하지만 이 시점에서는 직접 조정할 수 있도록 스크립트를 복사했습니다.
eject 사용할 필요는 없습니다. 선별된 기능 세트는 소규모 및 중간 배포에 적합하므로 이 기능을 사용해야 할 의무는 없습니다. 그러나 이 도구를 사용할 수 없다면 유용하지 않을 것입니다. 준비가 되면 맞춤 설정하세요.
기본적으로 생성된 프로젝트는 최신 버전의 React를 사용합니다.
지원되는 브라우저에 대한 자세한 내용은 React 설명서를 참조하세요.
이 프로젝트는 최신 JavaScript 표준의 상위 집합을 지원합니다.
ES6 구문 기능 외에도 다음도 지원합니다.
다양한 제안 단계에 대해 자세히 알아보세요.
약간의 주의를 기울여 실험적인 제안을 사용하는 것이 좋지만 Facebook은 제품 코드에서 이러한 기능을 많이 사용하므로 향후 이러한 제안이 변경될 경우 codemod를 제공할 계획입니다.
프로젝트에는 몇 가지 ES6 폴리필만 포함되어 있습니다 .
object-assign 통한 Object.assign() .promise 통한 Promise .whatwg-fetch 통해 fetch() 수행합니다. 런타임 지원이 필요한 다른 ES6+ 기능(예: Array.from() 또는 Symbol )을 사용하는 경우 적절한 폴리필을 수동으로 포함하고 있는지 또는 대상 브라우저가 이미 이를 지원하는지 확인하세요.
또한 for...of 또는 [...nonArrayValue] 와 같은 일부 최신 구문 기능을 사용하면 Babel이 ES6 런타임 기능에 의존하는 코드를 생성하고 폴리필 없이는 작동하지 않을 수 있다는 점에 유의하세요. 의심스러운 경우 Babel REPL을 사용하여 무엇을 확인하세요. 특정 구문이 컴파일됩니다.
즐겨 사용하는 텍스트 편집기에서 구문 강조를 구성하려면 관련 Babel 문서 페이지로 이동하여 가장 널리 사용되는 편집기 중 일부에 대한 지침을 따르세요.
참고: 이 기능은
[email protected]이상에서 사용할 수 있습니다.
또한 npm 3 이상에서만 작동합니다.
Sublime Text, Atom 및 Visual Studio Code를 포함한 일부 편집기는 ESLint용 플러그인을 제공합니다.
Lint에는 필요하지 않습니다. 터미널과 브라우저 콘솔에서 바로 Linter 출력을 볼 수 있습니다. 그러나 Lint 결과를 편집기에 바로 표시하려면 몇 가지 추가 단계를 수행할 수 있습니다.
먼저 편집기용 ESLint 플러그인을 설치해야 합니다. 그런 다음 .eslintrc 라는 파일을 프로젝트 루트에 추가합니다.
{
"extends" : "react-app"
}이제 편집자는 Linting 경고를 보고해야 합니다.
.eslintrc 파일을 추가로 편집하더라도 이러한 변경 사항은 편집기 통합에만 영향을 미칩니다 . 이는 Create React App이 의도적으로 찾는 최소한의 규칙 세트를 제공하기 때문입니다. 일반적인 실수.
프로젝트에 코딩 스타일을 적용하려면 ESLint 스타일 규칙 대신 Prettier를 사용하는 것이 좋습니다.
이 기능은 현재 Visual Studio Code 및 WebStorm에서만 지원됩니다.
Visual Studio Code 및 WebStorm은 Create React App을 통해 즉시 디버깅을 지원합니다. 이를 통해 개발자는 편집기를 떠나지 않고도 React 코드를 작성하고 디버그할 수 있으며, 가장 중요하게는 컨텍스트 전환이 가능한 지속적인 개발 워크플로를 가질 수 있습니다. 도구를 전환할 필요가 없기 때문에 최소화됩니다.
최신 버전의 VS Code 및 VS Code Chrome 디버거 확장 프로그램이 설치되어 있어야 합니다.
그런 다음 아래 블록을 launch.json 파일에 추가하고 앱 루트 디렉터리의 .vscode 폴더에 넣습니다.
{
"version" : " 0.2.0 " ,
"configurations" : [{
"name" : " Chrome " ,
"type" : " chrome " ,
"request" : " launch " ,
"url" : " http://localhost:3000 " ,
"webRoot" : " ${workspaceRoot}/src " ,
"sourceMapPathOverrides" : {
"webpack:///src/*" : " ${webRoot}/* "
}
}]
}참고: HOST 또는 PORT 환경 변수를 통해 조정한 경우 URL이 다를 수 있습니다.
npm start 실행하여 앱을 시작하고, F5 누르거나 녹색 디버그 아이콘을 클릭하여 VS Code에서 디버깅을 시작합니다. 이제 코드 작성, 중단점 설정, 코드 변경, 새로 수정된 코드 디버그 등의 작업을 모두 수행할 수 있습니다. 편집자.
VS Code 디버깅에 문제가 있습니까? 문제 해결 가이드를 참조하세요.
WebStorm 및 JetBrains IDE 지원 Chrome 확장 프로그램이 설치되어 있어야 합니다.
WebStorm 메뉴 Run 에서 Edit Configurations... 선택합니다. 그런 다음 + 클릭하고 JavaScript Debug http://localhost:3000 필드에 붙여넣고 구성을 저장합니다.
참고: HOST 또는 PORT 환경 변수를 통해 조정한 경우 URL이 다를 수 있습니다.
npm start 실행하여 앱을 시작한 다음 macOS에서는 ^D 누르고 Windows 및 Linux에서는 F9 누르거나 녹색 디버그 아이콘을 클릭하여 WebStorm에서 디버깅을 시작합니다.
동일한 방법으로 IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro 및 RubyMine에서 애플리케이션을 디버그할 수 있습니다.
Prettier는 JavaScript, CSS 및 JSON을 지원하는 독보적인 코드 포맷터입니다. Prettier를 사용하면 자동으로 작성하는 코드의 형식을 지정하여 프로젝트 내에서 코드 스타일을 확인할 수 있습니다. 자세한 내용은 Prettier의 GitHub 페이지를 참조하세요. 행동 중입니다.
Git에서 커밋을 할 때마다 코드 형식을 지정하려면 다음 종속성을 설치해야 합니다.
npm install --save husky lint-staged prettier 또는 yarn 사용할 수도 있습니다.
yarn add husky lint-staged prettierhusky 사용하면 마치 npm 스크립트인 것처럼 githook을 쉽게 사용할 수 있습니다.lint-staged 사용하면 git의 staged 파일에서 스크립트를 실행할 수 있습니다. 자세한 내용은 lint-staged에 대한 블로그 게시물을 참조하세요.prettier 는 커밋 전에 실행할 JavaScript 포맷터입니다. 이제 프로젝트 루트의 package.json 에 몇 줄을 추가하여 모든 파일의 형식이 올바른지 확인할 수 있습니다.
scripts 섹션에 다음 줄을 추가합니다.
"scripts": {
+ "precommit": "lint-staged",
"start": "react-scripts start",
"build": "react-scripts build", 다음으로 package.json 에 'lint-staged' 필드를 추가합니다. 예를 들면 다음과 같습니다.
"dependencies": {
// ...
},
+ "lint-staged": {
+ "src/**/*.{js,jsx,json,css}": [
+ "prettier --single-quote --write",
+ "git add"
+ ]
+ },
"scripts": { 이제 커밋을 할 때마다 Prettier가 변경된 파일의 형식을 자동으로 지정합니다. ./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx,json,css}" 실행할 수도 있습니다. ./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx,json,css}" 하여 처음으로 전체 프로젝트의 형식을 지정합니다.
다음으로 Prettier GitHub 페이지의 편집기 통합 섹션을 읽어보세요.
<title> 변경 생성된 프로젝트의 public 폴더에서 소스 HTML 파일을 찾을 수 있습니다. <title> 태그를 편집하여 제목을 "React App"에서 다른 것으로 변경할 수 있습니다.
일반적으로 public 폴더에 있는 파일은 자주 편집하지 않습니다. 예를 들어 스타일시트 추가는 HTML을 건드리지 않고 수행됩니다.
콘텐츠에 따라 페이지 제목을 동적으로 업데이트해야 하는 경우 브라우저 document.title API를 사용할 수 있습니다. React 구성 요소에서 제목을 변경하려는 보다 복잡한 시나리오의 경우 타사 라이브러리인 React 헬멧을 사용할 수 있습니다.
프로덕션에서 앱에 대한 사용자 정의 서버를 사용하고 제목이 브라우저로 전송되기 전에 수정하려는 경우 이 섹션의 조언을 따를 수 있습니다. 또는 각 페이지를 정적 HTML 파일로 미리 빌드한 다음 로드할 수 있습니다. 여기에서 다루는 JavaScript 번들입니다.
생성된 프로젝트에는 React 및 ReactDOM이 종속성으로 포함되어 있으며 Create React App에서 개발 종속성으로 사용되는 스크립트 세트도 npm 사용하여 설치할 수 있습니다.
npm install --save react-router 또는 yarn 사용할 수도 있습니다.
yarn add react-router 이는 react-router 뿐만 아니라 모든 라이브러리에서 작동합니다.
이 프로젝트 설정은 Babel 덕분에 ES6 모듈을 지원합니다.
require() 및 module.exports 계속 사용할 수 있지만 대신 import 및 export 사용하는 것이 좋습니다.
예를 들어:
Button.js import React , { Component } from 'react' ;
class Button extends Component {
render ( ) {
// ...
}
}
export default Button ; // Don’t forget to use export default!DangerButton.js import React , { Component } from 'react' ;
import Button from './Button' ; // Import a component from another file
class DangerButton extends Component {
render ( ) {
return < Button color = "red" /> ;
}
}
export default DangerButton ;기본 내보내기와 명명된 내보내기의 차이점에 유의하세요. 이는 일반적인 실수의 원인입니다.
모듈이 단일 항목(예: 구성 요소)만 내보낼 때 기본 가져오기 및 내보내기를 계속 사용하는 것이 좋습니다. 이는 export default Button 및 import Button from './Button' 사용할 때 얻을 수 있는 것입니다.
명명된 내보내기는 여러 기능을 내보내는 유틸리티 모듈에 유용합니다. 모듈에는 최대 하나의 기본 내보내기와 원하는 만큼 명명된 내보내기가 있을 수 있습니다.
ES6 모듈에 대해 자세히 알아보세요:
사용자가 사용하기 전에 전체 앱을 다운로드하는 대신, 코드 분할을 사용하면 코드를 작은 덩어리로 분할한 다음 요청 시 로드할 수 있습니다.
이 프로젝트 설정은 동적 import() 통한 코드 분할을 지원합니다. 해당 제안은 3단계에 있습니다 import() 함수와 유사한 형식은 모듈 이름을 인수로 사용하고 항상 모듈의 네임스페이스 객체로 확인되는 Promise 를 반환합니다.
예는 다음과 같습니다.
moduleA.js const moduleA = 'Hello' ;
export { moduleA } ;App.js import React , { Component } from 'react' ;
class App extends Component {
handleClick = ( ) => {
import ( './moduleA' )
. then ( ( { moduleA } ) => {
// Use moduleA
} )
. catch ( err => {
// Handle failure
} ) ;
} ;
render ( ) {
return (
< div >
< button onClick = { this . handleClick } > Load </ button >
</ div >
) ;
}
}
export default App ; 이렇게 하면 moduleA.js 와 모든 고유 종속성이 사용자가 '로드' 버튼을 클릭한 후에만 로드되는 별도의 청크로 만들어집니다.
원하는 경우 async / await 구문과 함께 사용할 수도 있습니다.
React Router를 사용하는 경우 코드 분할을 사용하는 방법에 대한 이 튜토리얼을 확인하세요. 여기에서 동반 GitHub 저장소를 찾을 수 있습니다.
또한 React 문서의 코드 분할 섹션을 확인하세요.
이 프로젝트 설정에서는 Webpack을 사용하여 모든 자산을 처리합니다. Webpack은 JavaScript 파일을 넘어 import 개념을 "확장"하는 사용자 정의 방법을 제공합니다. JavaScript 파일에서 CSS를 가져와야 합니다.
Button.css. Button {
padding : 20 px ;
}Button.js import React , { Component } from 'react' ;
import './Button.css' ; // Tell Webpack that Button.js uses these styles
class Button extends Component {
render ( ) {
// You can use them as regular CSS styles
return < div className = "Button" /> ;
}
}이는 React에서는 필요하지 않지만 많은 사람들은 이 기능이 편리하다고 생각합니다. 여기에서 이 접근 방식의 이점을 읽을 수 있습니다. 그러나 이로 인해 코드가 Webpack보다 다른 빌드 도구 및 환경으로 이식성이 떨어집니다.
개발 시 이러한 방식으로 종속성을 표현하면 스타일을 편집할 때 즉시 다시 로드할 수 있습니다. 프로덕션에서는 모든 CSS 파일이 빌드 출력에서 하나의 축소된 .css 파일로 연결됩니다.
Webpack 관련 의미를 사용하는 것이 걱정된다면 모든 CSS를 src/index.css 에 넣을 수 있습니다. src/index.js 에서 가져올 수 있지만 나중에 다양한 빌드 도구.
이 프로젝트 설정은 CSS를 축소하고 Autoprefixer를 통해 공급업체 접두사를 자동으로 추가하므로 걱정할 필요가 없습니다.
예를 들면 다음과 같습니다.
. App {
display : flex;
flex-direction : row;
align-items : center;
}다음과 같이 됩니다:
. App {
display : -webkit-box;
display : -ms-flexbox;
display : flex;
-webkit-box-orient : horizontal;
-webkit-box-direction : normal;
-ms-flex-direction : row;
flex-direction : row;
-webkit-box-align : center;
-ms-flex-align : center;
align-items : center;
}어떤 이유로 자동 접두사를 비활성화해야 하는 경우 이 섹션을 따르세요.
일반적으로 여러 구성 요소에서 동일한 CSS 클래스를 재사용하지 않는 것이 좋습니다. 예를 들어 <AcceptButton> 및 <RejectButton> 구성 요소에서 .Button CSS 클래스를 사용하는 대신 자체적인 <Button> 구성 요소를 만드는 것이 좋습니다. .Button 스타일, <AcceptButton> 및 <RejectButton> 모두 렌더링할 수 있지만 상속할 수는 없습니다.
이 규칙을 따르면 믹스인 및 중첩과 같은 기능이 구성 요소 구성으로 대체되므로 CSS 전처리기가 유용하지 않게 됩니다. 그러나 유용하다고 판단되는 경우 CSS 전처리기를 통합할 수 있지만 Sass를 사용할 수도 있습니다. Less 또는 다른 대안도 사용하세요.
먼저 Sass용 명령줄 인터페이스를 설치해 보겠습니다.
npm install --save node-sass-chokidar 또는 yarn 사용할 수도 있습니다.
yarn add node-sass-chokidar 그런 다음 package.json 에서 scripts 에 다음 줄을 추가합니다.
"scripts": {
+ "build-css": "node-sass-chokidar src/ -o src/",
+ "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",참고: 다른 전처리기를 사용하려면 전처리기 설명서에 따라
build-css및watch-css명령을 바꾸십시오.
이제 src/App.css 이름을 src/App.scss 로 바꾸고 npm run watch-css 실행할 수 있습니다. 감시자는 src 하위 디렉터리에서 모든 Sass 파일을 찾아 그 옆에 해당 CSS 파일을 생성합니다. 이 경우에는 src/App.css 덮어씁니다. src/App.css . src/App.js 여전히 src/App.css 가져오기 때문에 스타일은 이제 애플리케이션의 일부가 됩니다. src/App.scss 및 src/App.css 다시 생성됩니다.
Sass 파일 간에 변수를 공유하려면 Sass 가져오기를 사용할 수 있습니다. 예를 들어 src/App.scss 및 기타 구성 요소 스타일 파일에는 변수 정의와 함께 @import "./shared.scss"; 포함될 수 있습니다.
상대 경로를 사용하지 않고 파일 가져오기를 활성화하려면 package.json 의 명령에 --include-path 옵션을 추가하면 됩니다.
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
이렇게 하면 다음과 같은 가져오기를 수행할 수 있습니다.
@import ' styles/_colors.scss ' ; // assuming a styles directory under src/
@import ' nprogress/nprogress ' ; // importing a css file from the nprogress node module 이 시점에서 소스 제어에서 모든 CSS 파일을 제거하고 .gitignore 파일에 src/**/*.css 추가할 수 있습니다. 일반적으로 빌드 제품을 소스 제어 외부에 유지하는 것이 좋습니다.
마지막 단계로 npm start 사용하여 watch-css 자동으로 실행하고 npm run build 의 일부로 build-css 실행하는 것이 편리할 수 있습니다. 그러나 두 개의 && 를 순차적으로 실행할 수는 없습니다. 두 개의 스크립트를 병렬로 실행하는 크로스 플랫폼 방식이므로 이를 위한 패키지를 설치하겠습니다.
npm install --save npm-run-all 또는 yarn 사용할 수도 있습니다.
yarn add npm-run-all 그런 다음 CSS 전처리기 명령을 포함하도록 start 및 build 스크립트를 변경할 수 있습니다.
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
- "start": "react-scripts start",
- "build": "react-scripts build",
+ "start-js": "react-scripts start",
+ "start": "npm-run-all -p watch-css start-js",
+ "build-js": "react-scripts build",
+ "build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
} 이제 npm start 및 npm run build 실행하면 Sass 파일도 빌드됩니다.
왜 node-sass-chokidar ?
node-sass 에 다음과 같은 문제가 있는 것으로 보고되었습니다.
node-sass --watch 가상 머신이나 docker와 함께 사용될 때 특정 조건에서 성능 문제가 있는 것으로 보고되었습니다.
무한 스타일 컴파일 #1939
node-sass #1891 디렉토리에서 새 파일을 감지하는 데 문제가 있는 것으로 보고되었습니다.
node-sass-chokidar 이러한 문제를 해결하기 위해 여기에서 사용됩니다.
Webpack을 사용하면 이미지 및 글꼴과 같은 정적 자산을 사용하는 것이 CSS와 유사하게 작동합니다.
JavaScript 모듈에서 바로 파일을 import 수 있습니다. 이는 Webpack이 해당 파일을 번들에 포함하도록 지시합니다. CSS 가져오기와 달리 파일을 가져오면 이 값이 코드에서 참조할 수 있는 최종 경로가 됩니다. 이미지의 src 속성 또는 PDF 링크의 href .
서버에 대한 요청 수를 줄이기 위해 10,000바이트 미만의 이미지를 가져오면 경로 대신 데이터 URI가 반환됩니다. 이는 bmp, gif, jpg, jpeg 및 png 파일에 적용됩니다. #1153 때문에요.
예는 다음과 같습니다.
import React from 'react' ;
import logo from './logo.png' ; // Tell Webpack this JS file uses this image
console . log ( logo ) ; // /logo.84287d09.png
function Header ( ) {
// Import result is the URL of your image
return < img src = { logo } alt = "Logo" /> ;
}
export default Header ;이렇게 하면 프로젝트가 빌드될 때 Webpack이 이미지를 빌드 폴더로 올바르게 이동하고 올바른 경로를 제공합니다.
이것은 CSS에서도 작동합니다.
. Logo {
background-image : url (. / logo.png);
} Webpack은 CSS에서 모든 관련 모듈 참조( ./ 로 시작)를 찾아 이를 컴파일된 번들의 최종 경로로 바꿉니다. 실수로 중요한 파일을 삭제하면 다음과 같이 컴파일 오류가 표시됩니다. 존재하지 않는 JavaScript 모듈을 가져옵니다. 컴파일된 번들의 최종 파일 이름은 콘텐츠 해시에서 Webpack에 의해 생성됩니다. 나중에 파일 콘텐츠가 변경되면 Webpack은 프로덕션에서 다른 이름을 지정하므로 걱정할 필요가 없습니다. 장기 캐싱 자산.
이는 Webpack의 사용자 정의 기능이기도 합니다.
React에는 필수는 아니지만 많은 사람들이 이를 좋아합니다(그리고 React Native는 이미지에 유사한 메커니즘을 사용합니다).
정적 자산을 처리하는 다른 방법은 다음 섹션에 설명되어 있습니다.
public 폴더 사용참고: 이 기능은
[email protected]이상에서 사용할 수 있습니다.
public 폴더에는 HTML 파일이 포함되어 있어 페이지 제목을 설정하는 등의 작업을 할 수 있습니다. 컴파일된 코드가 포함된 <script> 태그는 빌드 프로세스 중에 자동으로 추가됩니다.
public 폴더에 다른 자산을 추가할 수도 있습니다.
대신 일반적으로 JavaScript 파일로 자산을 import 것이 좋습니다. 예를 들어 스타일시트 추가 및 이미지 및 글꼴 추가 섹션을 참조하세요. 이 메커니즘은 다음과 같은 여러 가지 이점을 제공합니다.
그러나 모듈 시스템 외부에 자산을 추가하는 데 사용할 수 있는 탈출구가 있습니다.
public 폴더에 파일을 넣으면 Webpack에서 처리되지 않고 그대로 빌드 폴더에 복사됩니다. public 폴더의 자산을 참조하려면 PUBLIC_URL 이라는 특수 변수를 사용해야 합니다.
index.html 내에서 다음과 같이 사용할 수 있습니다.
< link rel =" shortcut icon " href =" %PUBLIC_URL%/favicon.ico " > public 폴더 내의 파일만 %PUBLIC_URL% 접두사로 액세스할 수 있습니다. src 또는 node_modules 의 파일을 사용해야 하는 경우 해당 파일을 빌드의 일부로 만들려는 의도를 명시적으로 지정해야 합니다.
npm run build 실행하면 Create React App은 %PUBLIC_URL% 올바른 절대 경로로 대체하므로 클라이언트 측 라우팅을 사용하거나 루트가 아닌 URL에서 호스팅하더라도 프로젝트가 작동합니다.
JavaScript 코드에서는 유사한 목적으로 process.env.PUBLIC_URL 사용할 수 있습니다.
render ( ) {
// Note: this is an escape hatch and should be used sparingly!
// Normally we recommend using `import` for getting asset URLs
// as described in “Adding Images and Fonts” above this section.
return < img src = { process . env . PUBLIC_URL + '/img/logo.png' } /> ;
}이 접근 방식의 단점을 염두에 두십시오.
public 폴더의 파일은 사후 처리되거나 축소되지 않습니다.public 폴더를 사용하는 경우 일반적으로 JavaScript에서 스타일시트, 이미지 및 글꼴을 가져오는 것이 좋습니다. public 폴더는 덜 일반적인 경우에 대한 해결 방법으로 유용합니다.
manifest.webmanifest 와 같은 특정 이름의 파일이 필요합니다.pace.js 와 같은 작은 스크립트를 포함하려고 합니다.<script> 태그로 포함하는 것 외에는 다른 옵션이 없습니다. 전역 변수를 선언하는 <script> 를 추가하는 경우 해당 변수 사용에 대한 다음 섹션도 읽어야 합니다.
전역 변수를 정의하는 스크립트를 HTML 파일에 포함하고 코드에서 이러한 변수 중 하나를 사용하려고 하면 변수 정의를 볼 수 없기 때문에 linter가 오류를 표시합니다.
window 개체에서 전역 변수를 명시적으로 읽어 이를 방지할 수 있습니다. 예를 들면 다음과 같습니다.
const $ = window . $ ;이는 오타 때문이 아니라 의도적으로 전역 변수를 사용하고 있음을 분명하게 보여줍니다.
또는 // eslint-disable-line 뒤에 추가하여 linter가 모든 줄을 무시하도록 강제할 수 있습니다.
React Bootstrap을 React와 함께 사용할 필요는 없지만 Bootstrap을 React 앱과 통합하는 데 널리 사용되는 라이브러리입니다. 필요한 경우 다음 단계에 따라 Create React App과 통합할 수 있습니다.
npm에서 React Bootstrap 및 Bootstrap을 설치합니다. React Bootstrap에는 Bootstrap CSS가 포함되어 있지 않으므로 이것도 설치해야 합니다.
npm install --save react-bootstrap bootstrap@3 또는 yarn 사용할 수도 있습니다.
yarn add react-bootstrap bootstrap@3 src/index.js 파일 시작 부분에 부트스트랩 CSS를 가져오고 선택적으로 부트스트랩 테마 CSS를 가져옵니다.
import 'bootstrap/dist/css/bootstrap.css' ;
import 'bootstrap/dist/css/bootstrap-theme.css' ;
// Put any other imports below so that CSS from your
// components takes precedence over default styles. src/App.js 파일 또는 사용자 정의 구성 요소 파일 내에서 필수 React Bootstrap 구성 요소를 가져옵니다.
import { Navbar , Jumbotron , Button } from 'react-bootstrap' ; 이제 렌더링 메서드에 정의된 구성 요소 계층 내에서 가져온 React Bootstrap 구성 요소를 사용할 준비가 되었습니다. 다음은 React Bootstrap을 사용하여 다시 실행한 App.js 예입니다.
때로는 Bootstrap(또는 동등한 패키지)의 시각적 스타일을 조정해야 할 수도 있습니다.
우리는 다음과 같은 접근법을 제안합니다:
다음은 이러한 단계를 따르는 사용자 정의 부트스트랩을 추가하는 예입니다.
Flow는 버그가 적은 코드를 작성하는 데 도움이 되는 정적 유형 검사기입니다. 이 개념을 처음 접한다면 JavaScript에서 정적 유형을 사용하는 방법에 대한 소개를 확인하세요.
최신 버전의 Flow는 즉시 Create React App 프로젝트와 함께 작동합니다.
Create React App 프로젝트에 Flow를 추가하려면 다음 단계를 따르세요.
npm install --save flow-bin (또는 yarn add flow-bin )을 실행하세요.package.json 의 scripts 섹션에 "flow": "flow" 추가하세요.npm run flow init (또는 yarn flow init )를 실행하여 루트 디렉터리에 .flowconfig 파일을 만듭니다.// @flow 추가합니다(예: src/App.js ). 이제 npm run flow (또는 yarn flow )를 실행하여 파일의 유형 오류를 확인할 수 있습니다. 향후 더 나은 통합 경험을 위해 선택적으로 Nuclide와 같은 IDE를 사용할 수 있습니다.
Flow에 대해 자세히 알아보려면 해당 설명서를 확인하세요.
Create React App은 특정 라우팅 솔루션을 규정하지 않지만 React Router가 가장 널리 사용되는 솔루션입니다.
추가하려면 다음을 실행하세요.
npm install --save react-router-dom 또는 yarn 사용할 수도 있습니다.
yarn add react-router-dom 이를 시도하려면 src/App.js 의 모든 코드를 삭제하고 해당 웹 사이트의 예제로 바꾸십시오. 기본 예제는 시작하기에 좋은 곳입니다.
앱을 배포하기 전에 클라이언트 측 라우팅을 지원하도록 프로덕션 서버를 구성해야 할 수도 있습니다.
참고: 이 기능은
[email protected]이상에서 사용할 수 있습니다.
프로젝트는 마치 JS 파일에서 로컬로 선언된 것처럼 환경에서 선언된 변수를 사용할 수 있습니다. 기본적으로 NODE_ENV 정의되어 있고 REACT_APP_ 으로 시작하는 다른 환경 변수가 있습니다.
환경 변수는 빌드 시간 동안 포함됩니다 . Create React App은 정적 HTML/CSS/JS 번들을 생성하므로 런타임에 이를 읽을 수 없으므로 HTML을 메모리에 로드해야 합니다. 여기에 설명된 것과 같이 런타임에 자리 표시자를 교체하고 변경할 수도 있습니다. 또는 언제든지 서버에서 앱을 다시 빌드할 수 있습니다.
참고:
REACT_APP_으로 시작하는 사용자 정의 환경 변수를 생성해야 합니다. 동일한 이름을 가질 수 있는 개인 키가 머신에 실수로 노출되는 것을 방지하기 위해NODE_ENV제외한 다른 모든 변수는 무시됩니다. 실행 중입니다.
이러한 환경 변수는 process.env 에 정의됩니다. 예를 들어 REACT_APP_SECRET_CODE 라는 환경 변수가 있으면 JS에서 process.env.REACT_APP_SECRET_CODE 로 노출됩니다.
NODE_ENV 라는 특수 내장 환경 변수도 있습니다. process.env.NODE_ENV 에서 읽을 수 있습니다. npm start 실행하면 항상 'development' 와 같고, npm test 실행하면 항상 'test' 와 같습니다. 'test' 이고, 프로덕션 번들을 만들기 위해 npm run build 실행하면 항상 'production' 과 동일합니다. 이렇게 하면 개발자가 실수로 느린 개발 빌드를 배포하는 것을 방지할 수 있습니다 NODE_ENV 생산.
이러한 환경 변수는 프로젝트가 배포된 위치에 따라 조건부로 정보를 표시하거나 버전 제어 외부에 있는 민감한 데이터를 사용하는 데 유용할 수 있습니다.
먼저 환경 변수를 정의해야 합니다. 예를 들어 <form> 내의 환경에 정의된 비밀을 사용한다고 가정해 보겠습니다.
render ( ) {
return (
< div >
< small > You are running this application in < b > { process . env . NODE_ENV } </ b > mode. </ small >
< form >
< input type = "hidden" defaultValue = { process . env . REACT_APP_SECRET_CODE } />
</ form >
</ div >
) ;
} 빌드 중에 process.env.REACT_APP_SECRET_CODE 는 REACT_APP_SECRET_CODE 환경 변수의 현재 값으로 대체됩니다. NODE_ENV 변수는 자동으로 설정됩니다.
브라우저에 앱을 로드하고 <input> 을 검사하면 해당 값이 abcdef 로 설정된 것을 볼 수 있으며 굵은 텍스트는 npm start 사용 시 제공되는 환경을 표시합니다.
< div >
< small > You are running this application in < b > development </ b > mode. </ small >
< form >
< input type =" hidden " value =" abcdef " />
</ form >
</ div > 위의 양식은 환경에서 REACT_APP_SECRET_CODE 라는 변수를 찾고 있습니다. 이 값을 사용하려면 이를 환경에서 정의해야 합니다. 이는 셸에서 또는 .env 파일에서 수행할 수 있습니다. 이 두 가지 방법 모두 다음 몇 섹션에서 설명됩니다.
NODE_ENV 에 액세스하는 것은 조건부로 작업을 수행하는 데에도 유용합니다.
if ( process . env . NODE_ENV !== 'production' ) {
analytics . disable ( ) ;
} npm run build 사용하여 앱을 컴파일하면 축소 단계에서 이 조건이 제거되고 결과 번들은 더 작아집니다.
참고: 이 기능은
[email protected]이상에서 사용할 수 있습니다.
public/index.html 에서 REACT_APP_ 으로 시작하는 환경 변수에 액세스할 수도 있습니다. 예:
< title > %REACT_APP_WEBSITE_NAME% </ title >위 섹션의 주의 사항이 적용됩니다.
NODE_ENV 및 PUBLIC_URL ) 외에도 변수 이름이 작동하려면 REACT_APP_ 로 시작해야 합니다.환경 변수 정의는 OS마다 다를 수 있습니다. 이 방식은 셸 세션 수명 동안 일시적이라는 점을 아는 것도 중요합니다.
set " REACT_APP_SECRET_CODE = abcdef " && npm start(참고: 후행 공백을 방지하려면 변수 할당을 따옴표로 묶어야 합니다.)
( $ env: REACT_APP_SECRET_CODE = " abcdef " ) -and (npm start)REACT_APP_SECRET_CODE=abcdef npm start.env 에 개발 환경 변수 추가참고: 이 기능은
[email protected]이상에서 사용할 수 있습니다.
영구 환경 변수를 정의하려면 프로젝트 루트에 .env 라는 파일을 만듭니다.
REACT_APP_SECRET_CODE=abcdef
참고:
REACT_APP_으로 시작하는 사용자 정의 환경 변수를 생성해야 합니다. 동일한 이름을 가질 수 있는 개인 키가 머신에 실수로 노출되는 것을 방지하기 위해NODE_ENV제외한 다른 모든 변수는 무시됩니다. 실행 중입니다.
.env 파일은 소스 제어에 체크인 해야 합니다 ( .env*.local 제외).
.env 파일을 사용할 수 있나요?참고: 이 기능은
[email protected]이상에서 사용할 수 있습니다 .
.env : 기본값..env.local : 로컬 재정의. 이 파일은 테스트를 제외한 모든 환경에 대해 로드됩니다..env.development , .env.test , .env.production : 환경별 설정입니다..env.development.local , .env.test.local , .env.production.local : 환경 스크린팅의 로컬 재정의.왼쪽 파일이 오른쪽 파일보다 우선순위가 높습니다.
npm start : .env.development.local , .env.development , .env.local , .envnpm run build : .env.production.local , .env.production , .env.local , .envnpm test : .env.test.local , .env.test , .env (참고 .env.local 이 누락됨) 이러한 변수는 시스템이 명시적으로 설정하지 않은 경우 기본값으로 작동합니다.
자세한 내용은 dotenv 문서를 참고하세요.
참고: 개발을 위한 환경 변수를 정의하는 경우 Ci 및/또는 ORSTING PLATFORL MOST LIST에도 해당 작업을 수행하는 방법이 필요합니다. 예를 들어 travis ci 또는 herku에 대한 설명서를 참조하세요.
.env 에서 환경 변수 확장참고: 이 기능은
[email protected]이상에서 사용할 수 있습니다.
.env 파일에서 사용할 수 있도록 컴퓨터에서 이미 변수를 확장합니다(DOTENV-EXPAND 사용).
예를 들어 환경 변수 npm_package_version 을 가져오려면 다음을 수행하세요.
REACT_APP_VERSION=$npm_package_version
# also works:
# REACT_APP_VERSION=${npm_package_version}
또는 현재 .env 파일에 대한 로컬 변수를 확장합니다.
DOMAIN=www.example.com
REACT_APP_FOO=$DOMAIN/foo
REACT_APP_BAR=$DOMAIN/bar
많은 인기있는 도서관이 문서에 데코 인터를 사용합니다.
React App 만들기는 현재 Decorator Syntax를 지원하지 않습니다.
그러나 많은 경우 데코레이터 기반 코드를 데코레이터로 다시 작성할 수 있습니다.
참조는 두 스레드를 참조하십시오.
React App 만들기는 사양이 안정적인 단계로 발전 할 때 데코레이터 지원을 추가합니다.
React DoSmly는 데이터 페치에 대한 특정 접근 방식을 사전으로 표현하지만 사람들은 Axios 또는 브라우저에서 제공하는 fetch() API와 같은 라이브러리를 커밋하기 때문에 React App은 fetch() 에 대한 폴리 필드를 포함합니다. 브라우저 지원.
Global fetch 기능을 사용하면 AJAX가 쉽게 fetch 하고 Response Promise .
이 프로젝트에는 fetch() 의 완전한 구현 async / await A+가 포함되어 있습니다. .
React 웹 사이트의 FAQ 항목에서 React 구성 요소에서 AJAX 요청을 작성하는 것에 대해 자세히 알아볼 수 있습니다.
이 튜토리얼은 다른 포트에서 API 백엔드를 실행하여 앱을 통합하여 fetch() 수락 할 수 있도록 도와줍니다.
이 튜토리얼을 확인하십시오. 컴퓨터 Github 저장소를 여기에서 찾을 수 있습니다.
이 튜토리얼을 확인하십시오. 컴퓨터 Github 저장소를 여기에서 찾을 수 있습니다.
참고 :이 기능은
[email protected]이상으로 제공됩니다.
사람들은 종종 백엔드 구현과 동일한 호스트 및 포트의 프론트 엔드 리셉션 앱을 제공합니다.
exmple의 경우 앱을 배포 한 후 문제 설정이 다음과 같습니다.
/ - static server returns index.html with React app
/todos - static server returns index.html with React app
/api/todos - server handles any /api/* requests using the backend implementation
이러한 설정은 필요 하지 않지만 이와 같은 설정이 있는 경우 fetch('/api/todos') 와 같은 요청을 개발 중에 다른 호스트 또는 포트로 리디렉션하는 것이 편리합니다.
DeaUpOpment에서 API 서버에 알 수없는 요청을 개발 서버에 알리려면 package.json 에 프로젝트를 proxy .
"proxy" : "http://localhost:4000" , 이런 식으로, 개발중인 fetch('/api/todos') 오면 개발 서버는 그것이 정적 자산이 아니라는 것을 인식하고 요청 t o http://localhost:4000/api/todos 폴백으로 프록시합니다. . 개발 서버는 프로젝트를 Accept 하여 text/html 을 보내 려고 합니다.
편리하게, 이것은 큐비에서 다음과 같은 Corsush 및 오류 메시지를 피합니다.
Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
proxy 는 개발에 영향을 미치며 ( npm start ), /api/todos 와 같은 URL은 Pro에서 올바른 /api 가리킬 필요가 있습니다. /api 접두사. text/html 수락 헤더가있는 인식되지 않은 요청은 지정된 proxy 로 리디렉션됩니다.
proxy 옵션 HTTP, HTTPS 및 WebSocket 연결.
proxy 옵션이 충분히 유연 하지 않으면 대신 할 수 있습니다.
proxy 옵션을 활성화하면 더 엄격한 호스트 점검을 선택합니다.
이 쇼핑은 localhost 에서 개발할 때 영향을 미치지 않지만 여기에 설명 된 부분을 수정하면 proxy 옵션 이후 브라우저 에서이 오류가 표시됩니다.
잘못된 호스트 헤더
Artid를 사용하려면 프로젝트의 근본에있는 제출 된 .env.development 에서 대중 개발을 지정할 수 있습니다.
HOST=mypublicdevhost.com
지금 개발 서버를 다시 시작하고 사양 호스트에서 앱을로드하면 작동해야합니다.
여전히 문제가 있거나 클라우드 편집기와 같이 더 exitic 환경을 사용하는 경우, 호스트 점검을 우회하여 .env.development.local 에 대한 라인을 작성 하고 기계를 원격으로 노출시킬 수 있습니다 . 악성 웹 사이트에서 코드 실행 :
# NOTE: THIS IS DANGEROUS!
# It exposes your machine to attacks from the websites you visit.
DANGEROUSLY_DISABLE_HOST_CHECK=true
우리는이 INS 접근 방식을 기본적으로 수행합니다.
참고 :이 기능은
[email protected]이상으로 제공됩니다.
proxy 옵션이 충분히 유연하지 않으면 풋내기 양식 ( package.json )의 개체를 지정할 수 있습니다.
또한 구성 값 http-proxy-middleware 또는 http-proxy Suppports를 지정할 수도 있습니다.
{
// ...
"proxy" : {
"/api" : {
"target" : "<url>" ,
"ws" : true
// ...
}
}
// ...
} 이 text/html 와 일치하는 모든 요청에는 예외가 없습니다. 여기에는 표준 proxy 옵션이 포함됩니다.
여러 프록시를 지정 해야하는 경우 양호한 H 다중 경로로 그렇게 할 수 있습니다.
{
// ...
"proxy" : {
// Matches any request starting with /api
"/api" : {
"target" : "<url_1>" ,
"ws" : true
// ...
} ,
// Matches any request starting with /foo
"/foo" : {
"target" : "<url_2>" ,
"ssl" : true ,
"pathRewrite" : {
"^/foo" : "/foo/beta"
}
// ...
} ,
// Matches /bar/abc.html but not /bar/sub/def.html
"/bar/[^/]*[.]html" : {
"target" : "<url_3>" ,
// ...
} ,
// Matches /baz/abc.html and /baz/sub/def.html
"/baz/.*/.*[.]html" : {
"target" : "<url_4>"
// ...
}
}
// ...
}WebSocket 프록시를 설정할 때는 알아야 할 추가 고려 사항이 있습니다.
Socket.io와 같은 WebSocket Engine을 사용하는 경우 Socket.io는 Socket.io를 사용하지 않습니다. io webSocket.org Echo Test와 함께 작업합니다.
socket.io 서버를 설정하는 데 사용할 수있는 좋은 설명서가 있습니다.
표준 WebSockets는 WebSocket.org가 Echo Test와 같은 표준 WebSocket 서버에서 작동 합니다 .
어느 쪽이든, package.json 에서 websockets 요청을 수동으로 프록시 할 수 있습니다.
{
// ...
"proxy" : {
"/socket" : {
// Your compatible WebSocket server
"target" : "ws://<socket_url>" ,
// Tell http-proxy-middleware that this is a WebSocket proxy.
// Also allows you to proxy WebSocket requests without an additional HTTP request
// https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade
"ws" : true
// ...
}
}
// ...
} 참고 :이 기능은
[email protected]이상으로 제공됩니다.
이번에는 API 서버가 ITSET 서비스 일 때 "프록시"기능을 ANG PI 서버에 사용하는 경우 DEV 서버가 HTTPS를 통해 페이지를 제공해야 할 수도 있습니다.
이렇게하려면 HTTPS 환경 변수를 true 로 설정 한 다음 npm start 사용하여 DEV 서버를 시작하십시오.
set HTTPS = true && npm start ( $ env: HTTPS = $true ) -and (npm start)(참고 : 공백의 부족은 무관심합니다.)
HTTPS=true npm start서버는 Seth-Signed 인증을 사용하므로 웹 브라우저에 페이지가 거의 확실하게 표시됩니다.
<meta> 태그 생성 React App dom을 만들기 때문에 다음과 같이 HTML에 플레이어를 추가합니다 <meta>
<!doctype html >
< html lang =" en " >
< head >
< meta property =" og:title " content =" __OG_TITLE__ " >
< meta property =" og:description " content =" __OG_DESCRIPTION__ " > 그런 다음 서버에서 사용하는 백엔드에 관계없이 index.html 메모리로 읽고 __OG_TITLE__ , __OG_DESCRIPTION__ CEHOLDERS를 HTML에 포함시키는 값으로 바꿀 수 있습니다!
노드 서버를 사용하는 경우 클라이언트와 서버 간의 경로 일치 로직을 공유 할 수 있습니다.
정적 호스팅 제공 업체로 build 경우 REACT-SNAPSHOT 또는 React-SNAP를 사용하여 각 경로에 대한 HTML 페이지를 생성하거나 응용 프로그램을 연결하면 "소화전"을 원활하게 연결합니다. JavaScript 번들이로드 된 곳.
정적 호스팅 외부 에서이 사용을 사용하여 서버에서 압력을 가할 수있는 기회도 있습니다.
사전 렌더링의 주요 이점은 HTML 페이로드 와 함께 각각의 핵심 콘텐츠를 얻는다는 것입니다. JavaScript 번들이 다운로드하는지 여부에 관계없이 응용 프로그램의 각 경로가 검색을 통해 픽업 될 가능성이 높아집니다. 엔진.
여기에서 제로 구성 프리 렌더링 (스냅 샷이라고도 함)에 대한 자세한 내용을 읽을 수 있습니다.
이전 섹션에 대해서는 전역 변수를 주입하는 HTML의 일부 자리 표시자를 남겨두고 다음을 수행 할 수 있습니다.
< ! doctype html >
< html lang = "en" >
< head >
< script >
window.SERVER_DATA = __SERVER_DATA__;
</ script > Then, on the server, you can replace __SERVER_DATA__ with a JSON of real data right before sending the response. The client code can then read window.SERVER_DATA to use it. Make sure to sanitize the JSON before sending it to the client as it makes your app vulnerable to XSS attacks.
참고 :이 기능은
[email protected]이상으로 제공됩니다.
이전 프로젝트에서 활성화하는 방법을 배우려면 마이그레이션 가이드를 읽으십시오!
ITES 테스트 러너로 사용되는 React 앱을 만들려면이 통합을 준비하기 위해 우리는 그 해에 열심히 일하면서 그녀의 시도를 시도합니다.
Jest는 노드 기반 러너입니다.
JEST는 JSDOM 덕분에 window 와 같은 브라우저 글로벌을 제공하지만 실제 브라우저 동작과 Domirks가 아닌 구성 요소의 근사치 일뿐입니다.
브라우저 엔드 투 엔드 테스트에 섹션도 사용하여 React Creat app의 범위를 넘어서는 것이 좋습니다.
Jest는 인기있는 명명 규칙이있는 테스트 파일을 찾을 것입니다.
__tests__ 폴더에 .js 접미사가있는 파일..test.js 접미사가있는 파일..spec.js 접미사가있는 파일. .test.js / .spec.js 파일 (또는 __tests__ )은 src Top Levelinger로 Locald 될 수 있습니다.
테스트를 테스트 App.test.js 코드 옆에 테스트 파일 import App from './App' __tests__ )을 AAME 폴더에 넣는 App.js 좋습니다 또한 대규모 프로젝트에서 더 빠르게 테스트를 찾는 데 도움이됩니다.
npm test 실행하면 Jest가 파일을 저장할 때마다 npm start 코드를 재 컴파일하는 것처럼 테스트를 다시 실행합니다.
감시자는 모든 테스트를 실행하거나 검색 패턴에 초점을 맞추는 대화식 명령 줄 인터페이스가 포함되어 있습니다. 실행마다 인쇄 :
기본적으로 npm test 실행하면 Jest는 Commit 이후 변경된 파일과 관련된 테스트 만 실행합니다 테스트를 통과하지 않는 코드를 커밋하십시오.
Jest는 항상 화재 a 변경된 테스트 만 실행했다고 명시 적으로 언급합니다.
JEST는 항상 지속적인 통합 서버에서 모든 테스트를 실행하거나 프로젝트가 GIT 또는 Mercurial Repository 내부에 있지 않은 경우 항상 실행됩니다.
테스트를 만들려면 it() 또는 test() )가 테스트 이름과 코드를 추가하면 논리 그룹에 describe() 블록을 랩핑 할 수 있습니다.
Jest는 어설 션을위한 내장 expect() 글로벌 기능을 제공합니다.
import sum from './sum' ;
it ( 'sums numbers' , ( ) => {
expect ( sum ( 1 , 2 ) ) . toEqual ( 3 ) ;
expect ( sum ( 2 , 2 ) ) . toEqual ( 4 ) ;
} ) ; JEST가 지원하는 모든 expect() 매칭자는 여기에 광범위하게 문서화되어 있습니다.
jest.fn() 및 expect(fn).toBeCalled() 사용하여 "스파이"또는 mo metic 함수를 만들 수 있습니다.
구성 요소의 두 번째 스펙트럼은 "연기 테스트"에서 구성 요소가 던지기, 일부 출력 렌더링, 구성 요소 수명 및 상태 변경에 이르기까지 다양합니다.
프로젝트는 구성 요소가 얼마나 자주 변경되는지에 따라 다른 테스트 트레이드 오프를 선택합니다.
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import App from './App' ;
it ( 'renders without crashing' , ( ) => {
const div = document . createElement ( 'div' ) ;
ReactDOM . render ( < App /> , div ) ;
} ) ; 이것은 구성 요소를 테스트하고 이와 같은 렌더링을 할 수 src/App.test.js 것을 결석하면 매우 안감 팅 포인트와 함께 많은 가치가 있습니다.
구성 요소가 변경되어 버그가 발생하면 특정 예상 출력 또는 동작을 주장하는 더 많은 특수 테스트를 도입 할 수있는 좋은 시간에 대한 더 깊은 통찰력을 얻게됩니다.
그들이 렌더링하는 아동 구성 요소와 분리하여 구성 요소를 테스트하려면, 우리는 Enzyme에서 shallow() 를 사용합니다 : run : run :
npm install --save enzyme enzyme-adapter-react-16 react-test-renderer 또는 yarn 사용할 수 있습니다.
yarn add enzyme enzyme-adapter-react-16 react-test-renderer효소 3에서, 당신은 사용중인 React의 버전에 해당하는 어댑터와 함께 효소를 삽입해야합니다.
어댑터는 또한 글로벌 설정 파일에서 구성해야합니다.
src/setupTests.js import { configure } from 'enzyme' ;
import Adapter from 'enzyme-adapter-react-16' ;
configure ( { adapter : new Adapter ( ) } ) ;참고 :
src/setupTests.js만들기 전에 "꺼내기"로 결정한 경우 rendingpackage.json파일 ... 배출 후 이것을 추가하는 방법을 알아보십시오.
이제 연기 테스트를 작성할 수 있습니다.
import React from 'react' ;
import { shallow } from 'enzyme' ;
import App from './App' ;
it ( 'renders without crashing' , ( ) => {
shallow ( < App /> ) ;
} ) ; 이전의 연기 테스트 사용자 ReactDOM.render() 와 달리이 테스트 <App> <App> <Button> 이 트리트하는 경우에도 얕은 렌더링이 전달됩니다 테스트이지만 mount() 대한 부품에 대한 SOM 전체 렌더링 테스트를 만들 수 있으며 상태 변경 및 구성 요소 수명을 테스트하는 데 사용할 수도 있습니다.
더 많은 테스트 기술에 대한 효소 문서를 읽을 수 있습니다. 사용자는 chai와 sinon이 스파이에 내장 된 expect() 와 jest.fn() 제공하는 방법을 제공합니다.
다음은 Jestmatcher를 사용하도록 다시 작성한 특정 출력을 주장하는 효소 문서의 예입니다.
import React from 'react' ;
import { shallow } from 'enzyme' ;
import App from './App' ;
it ( 'renders welcome message' , ( ) => {
const wrapper = shallow ( < App /> ) ;
const welcome = < h2 > Welcome to React </ h2 > ;
// expect(wrapper.contains(welcome)).to.equal(true);
expect ( wrapper . contains ( welcome ) ) . toEqual ( true ) ;
} ) ; 모든 농담 경기는 여기에 광범위하게 문서화되어 있습니다.
이는 아래에 설명 된대로 원하는 경우 Chai와 같은 제 3기구 어제 라이브러리를 사용할 수 없습니다.
추가적으로, 당신은 Jest -Enzyme이 읽을 수있는 일치로 테스트를 단순화하는 데 도움이 contains 있습니다.
expect ( wrapper ) . toContainReact ( welcome ) 이를 가능하게하려면 jest-enzyme 설치하십시오.
npm install --save jest-enzyme 또는 yarn 사용할 수 있습니다.
yarn add jest-enzyme src/setupTests.js 에서 가져 오려면 모든 테스트에서 일치를 사용할 수 있도록하십시오.
import 'jest-enzyme' ; 스파이에 대한 expect() jest.fn() 하는 것이 좋습니다. , exmple의 경우, JSX로서 대상이되는 반응 요소.
그러나 Chai 및 Sinon과 같은 다른 라이브러리에 익숙하거나 엑스포를 사용하는 엑스포가있는 경우 포트 오버를 사용하는 경우 다음과 같습니다.
import sinon from 'sinon' ;
import { expect } from 'chai' ;그런 다음 평소처럼 테스트에서 사용자를 사용자가 사용하십시오.
참고 :이 기능은
[email protected]이상으로 제공됩니다.
앱을 사용하는 경우 테스트에서 조롱하거나 src/setupTests.js 실행하기 전에 자동으로 실행됩니다.
예를 들어:
src/setupTests.js const localStorageMock = {
getItem : jest . fn ( ) ,
setItem : jest . fn ( ) ,
clear : jest . fn ( )
} ;
global . localStorage = localStorageMock참고 :
src/setupTests.js만들기 전에 "꺼내기"로 결정한 경우 rendingpackage.json파일은 참조를 사용하지 않으므로 uuldsetupTestFrameworkScriptFile을 수동으로 만들어 JEST 구성에서 수동으로 생성합니다. :
"jest" : { // ... "setupTestFrameworkScriptFile" : "<rootDir>/src/setupTests.js" }
xit() 로 it() 하여 테스트를 실행되지 않게 제외 할 수 있습니다.
마찬가지로 fit() 하면 다른 테스트를 실행하면 특정 테스트에 집중할 수 있습니다.
Jest에는 ES6과 잘 어울리고 구성이 필요하지 않은 통합 커버리지 리포터가 있습니다.
npm test -- --coverage (중간에 -- )를 실행하여 다음과 같은 적용 범위 보고서를 포함하십시오.
테스트는 적용 범위에 따라 훨씬 느리게 실행되므로 일반 워크 플로에서 IT 섹션을 실행하는 것이 좋습니다.
Package.json의 농담 구성에 다음 지원 키를 추가하여 기본 농담 커버리지 구성을 재정의 할 수 있습니다.
지원되는 재정의 :
collectCoverageFromcoverageReporterscoverageThresholdsnapshotSerializerspackage.json 예제 :
{
"name" : " your-package " ,
"jest" : {
"collectCoverageFrom" : [
" src/**/*.{js,jsx} " ,
" !<rootDir>/node_modules/ " ,
" !<rootDir>/path/to/dir/ "
],
"coverageThreshold" : {
"global" : {
"branches" : 90 ,
"functions" : 90 ,
"lines" : 90 ,
"statements" : 90
}
},
"coverageReporters" : [ " text " ],
"snapshotSerializers" : [ " my-serializer-module " ]
}
} 기본적으로 npm test 대화식 CI 를 사용하여 감시자를 실행합니다.
npm test npm run build Linter 경고를 사용하여 응용 프로그램 빌드를 기본적으로 확인하지 않으면 환경 변수 CI 설정하여 빌드를 강제로 수행 할 수 있습니다.
인기있는 CI 서버는 이미 기본적으로 환경 변수 CI 설정했지만 직접 수행 할 수 있습니다.
.travis.yml 파일을 추가하십시오. language: node_js
node_js:
- 6
cache:
directories:
- node_modules
script:
- npm run build
- npm test
이 기사를 따라 React App 프로젝트를 만들어 CircleCi를 설정하십시오.
set CI = true && npm test set CI = true && npm run build(참고 : 공백의 부족은 무관심합니다.)
( $ env: CI = $true ) -and (npm test)( $ env: CI = $true ) -and (npm run build)CI=true npm test CI=true npm run build테스트 명령은 Jest가 한 번 테스트를 실행하도록 강요합니다.
개발 중에 자주이 작업을 수행하는 경우 사용 사례에 대해 알려주는 문제를 제기하고 더 많은 워크 플로를 수용하기 위해 작동 방식을 변경할 수 있습니다.
빌드 명령은 Linter 경고를 확인하고 발견 된 경우 실패합니다.
기본적으로 생성 된 프로젝트의 package.json 은 다음과 같습니다.
"scripts" : {
"start" : "react-scripts start" ,
"build" : "react-scripts build" ,
"test" : "react-scripts test --env=jsdom" JSDOM에 따라 테스트 중 어느 것도 없으면 --env=jsdom 안전하게 제거 할 수 있으며 테스트가 더 빨리 실행됩니다.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
- "test": "react-scripts test --env=jsdom"
+ "test": "react-scripts test"마음을 구성하는 데 도움이 되려면 다음은 JSDOM이 필요한 API 목록입니다.
window 및 document 와 같은 모든 브라우저 글로벌ReactDOM.render()TestUtils.renderIntoDocument() (위의 바로 가기)mount()대조적으로, 다음 API에는 JSDOM이 필요하지 않습니다 .
TestUtils.createRenderer() (얕은 렌더링)shallow()마지막으로 스냅 샷 테스트에는 JSDOM도 필요하지 않습니다.
Snapshot Testing은 구성 요소의 텍스트 스냅 샷을 생성하고 디스크에 저장하는 JEST의 기능입니다. UI 출력이 변경되면 스냅 샷 테스트에 대한 자세한 내용을 읽지 않고 알 수 있습니다.
Visual Studio Code를 사용하는 경우 Box의 React Create와 함께 작동하는 Jest Extension이 있습니다. 감시자를 자동으로 중지하고 한 번의 클릭 스냅 샷 업데이트를 제공합니다.
JEST 테스트를위한 디푸거를 설정하는 다양한 방법이 있습니다.
참고 : 디버깅 테스트에는 노드 8 이상이 필요합니다.
프로젝트의 package.json 의 scripts 섹션에 다음을 추가하십시오.
"scripts" : {
"test:debug" : " react-scripts --inspect-brk test --runInBand --env=jsdom "
} 모든 테스트 및 실행에 debugger; 배치하십시오.
$ npm run test:debug이렇게하면 JEST 테스트가 시작되지만 실행하기 전에 일시 중지하여 DePger가 프로세스에 첨부 할 수 있습니다.
크롬에서 다음을 열십시오
about:inspect
해당 링크를 열면 크롬 개발자 도구가 표시되면 Procestess에 inspect 선택하면 React IPT의 첫 번째 줄이됩니다 (이것은 단순히 개발자 도구를 열고 농담을 방지하기 위해 수행됩니다. 실행하기 전에 실행하기 전에 실행을 계속하기 위해 화면의 오른쪽 상단에있는 버튼을 클릭하십시오. 스택.
참고 : rannband CLI 옵션은 프로세스의 개별 테스트에 대한 Spawning 프로세스가 아닌 동일한 프로세스에서 테스트를 실행하도록합니다.
디버깅 농지 테스트는 Visual Studio Code의 상자에서 지원됩니다.
launch.json configuration 파일을 사용하십시오.
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug CRA Tests",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
"args": [
"test",
"--runInBand",
"--no-cache",
"--env=jsdom"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
일반적으로 앱에는 많은 UI 구성 요소가 있으며 각각의 다른 상태가 많으며 간단한 버튼 구성 요소가 있습니다
일반적으로 샘플 앱이나 몇 가지 예제를 실행하는 상태를보기가 어렵습니다.
React 앱 생성에는 기본적으로 도구가 포함되어 있지 않지만 REACT (Source) 또는 React StyleGuidist (소스)에 대한 스토리 북을 구성 요소 에 쉽게 추가 할 수 있습니다. 앱과 분리 된 상태 .
스토리 북 또는 스타일 가이드를 정적 앱으로 배포 할 수 있습니다.
Storybook은 반응 UI 구성 요소를위한 개발 환경입니다. 모든 구성 요소를 탐색하고 각 구성 요소의 다른 상태를보고 인터넷을 개발하고 테스트합니다.
먼저 다음 NPM 패키지를 전 세계적으로 설치하십시오.
npm install -g @storybook/cli그런 다음 앱 디렉토리에서 다음 명령을 실행하십시오.
getstorybook그런 다음 화면의 지침을 따르십시오.
React Storybook에 대해 자세히 알아보십시오.
Styleguidist는 모든 구성 요소가 소품 문서 및 사용법 exmples로 단일에 제공되는 스타일 가이드를 결합하여 Storybook과 유사하게 구성 요소를 분리하는 엔진과 마크 다운에서 예제를 작성합니다. 라이브 편집 가능한 놀이터로.
먼저 StyleGuidist 설치 :
npm install --save react-styleguidist 또는 yarn 사용할 수 있습니다.
yarn add react-styleguidist 그런 다음 package.json 에 스크립트를 추가하십시오.
"scripts": {
+ "styleguide": "styleguidist server",
+ "styleguide:build": "styleguidist build",
"start": "react-scripts start",그런 다음 앱 디렉토리에서 다음 명령을 실행하십시오.
npm run styleguide그런 다음 화면의 지침을 따르십시오.
React Styleguidist에 대해 자세히 알아보십시오.
React 앱 생성은 NPM에 구성 요소를 준비 할 수있는 내장 기능을 제공하지 않습니다. 프로젝션에서 구성 요소를 사용할 수 있습니다. 공개 준비하기에는 NWB와 너무 비슷합니다.
기본적으로 생산 빌드는 완벽하게 작동하는 사무실 우선 진보적 인 웹 앱입니다.
프로그레시브 웹 앱은 트랙션 웹 페이지보다 빠르고 신뢰할 수 있으며 매력적인 모바일 경험을 처리합니다.
sw-precache-webpack-plugin 생산 구성에 통합되어 있으며 현지 자산의 모든 자산을 작성하고 업데이트를 배포 할 때 최신 상태를 유지하는 서비스 작업자를 관리해야합니다 초기 HTML을 포함하여 로컬 자산에 대한 모든 요청을 처리하기위한 전략 웹 앱이 안정적으로 라이브 네트워크입니다.
서비스 작업자가 초기 제품 배포를 활성화하지 않으려면 registerServiceWorker() src/index.js 에 대한 통화를 제거한 다음
이전에 제품 배포에 서비스 작업자가 활성화되어 있고 기존의 모든 것을 좋아하기로 결정한 경우 Service Worker 가져 오기를 모델링하여 src/index.js 의 registerServiceWorker() 로 호출을 교체 할 수 있습니다.
import { unregister } from './registerServiceWorker' ; unregister() 가 unregister() 가있는 페이지를 방문한 후에 /service-worker.js 서비스 작업자가 제거되면 캐시가 무효화 되려면 최대 24 개의 주택이 필요할 수 있습니다.
서비스 작업자는 시설로 지역 테스트를 위해 해당 정책이 localhost 에 적용되지 않으면 HTTTTTTTTTTTTT PS를 지원하지 않으면 서비스 작업자 레지스트리가 실패하지만 나머지 웹 앱은 기능을 유지합니다.
서비스 작업자는 모든 웹 브라우저에서 Suportport가 부족한 브라우저에 대한 지원을받지 않습니다.
서비스 작업자는 제품 환경에서만 가능합니다. 예를 들어 npm run build 의 출력은 이전에 캐시 된 자산이 사용될 때 좌절을 초래할 수 있으므로 개발 환경에서 사무실 작업자를 가능하게하는 것이 좋습니다. 로컬에서 만든 최신 변경 사항을 포함하지 마십시오.
오프라인 최초의 서비스 작업자를 로컬로 테스트 해야하는 경우 ( npm run build 사용하여) create-react-app 에서 간단한 HTTP 서버를 실행하여 배포 지침에는 USIR 방법에 대한 지침이 있습니다 브라우저 캐시와 함께.
가능하면 HTTP 캐싱이 비활성화 된 경우 service-worker.js 로 제품 환경을 구성하십시오. 제품 사이트를 방문한 다음 service-worker.js HTTP 캐시를 초과하는 경우, 업데이트 된 제품을보아야 할 경우 이전에 COPHED 자산을 얻을 수 있습니다. 전개, Shift-refresh를 수행하면 서비스 작업자를 무력하게 비활성화하고 네트워크에서 모든 자산을 검색합니다.
Areer는 "이 웹 앱 작업 사무실"으로 항상 사무실 공사에 익숙합니다. "새로운 컨텐츠가 가능합니다; SSAGE).이 메시지를 보여주는 것은 현재 개발자에게 연습으로 남겨져 있지만 시작점으로서 사용자를 만들 수 있습니다. src/registerServiceWorker.js
기본적으로 생성 된 서비스 작업자 파일은 HTTP API 요청과 같은 교차 원산지 트래픽을 가로 채거나 캐시하지 않습니다. webpack.config.prod.js 의 SWPrecacheWebpackPlugin 섹션에서 runtimeCaching 옵션을 eject 구성 할 수 있습니다.
기본 구성에는 public/manifest.json 에 위치한 웹 앱이 포함되어있어 웹 응용 프로그램에 기본값으로 cuslyize를 할 수 있습니다.
사용자가 Android에서 홈 화면 사용자 또는 Firefox에 웹 앱을 추가하면 웹 앱이 표시 될 manifest.json E, 이름 및 브랜딩 색상을 결정합니다. 각 화재는, 그리고 당신의 사용자 정의가 당신이 소진하는 것을 긍정하는 방법을 의미합니다.
소스 맵 탐색기 소스 맵을 사용하여 JavaScript 번들 사용자를 분석합니다.
REACT APP 프로젝트에 소스 맵 탐색기를 추가하려면 다음 단계를 따르십시오.
npm install --save source-map-explorer 또는 yarn 사용할 수 있습니다.
yarn add source-map-explorer 그런 다음 package.json 에서 다음 줄을 scripts 에 추가하십시오.
"scripts": {
+ "analyze": "source-map-explorer build/static/js/main.*",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",분석은 생산 빌드를 실행 한 다음 분석 스크립트를 실행합니다.
npm run build
npm run analyze
npm run build 좋아하는 HTTP 서버를 설정하여 사이트의 방문자가 index.html 를 제공하고 /static/js/main.<hash>.js 과 같은 정적 경로에 대한 build 디렉토리를 만듭니다 /static/js/main.<hash>.js 파일의 내용.
노드를 사용하는 환경의 경우이를 처리하는 가장 쉬운 방법은 서버를 설치하고 나머지를 처리하는 것입니다.
npm install -g serve
serve -s build --port 표시된 마지막 명령은 -p 5000 에서 정적 사이트를 제공합니다.
사용 가능한 옵션의 전체 목록을 얻으려면이 커밋을 실행하십시오.
serve -hYou don't necessarily need a static server in order to run a Create React App project in production. It works just as fine integrated into an existing dynamic one.
Here's a programmatic example using Node and Express:
const express = require ( 'express' ) ;
const path = require ( 'path' ) ;
const app = express ( ) ;
app . use ( express . static ( path . join ( __dirname , 'build' ) ) ) ;
app . get ( '/' , function ( req , res ) {
res . sendFile ( path . join ( __dirname , 'build' , 'index.html' ) ) ;
} ) ;
app . listen ( 9000 ) ;The choice of your server software isn't important either. Since Create React App is completely platform-agnostic, there's no need to explicitly use Node.
The build folder with static assets is the only output produced by Create React App.
However this is not quite enough if you use client-side routing. Read the next section if you want to support URLs like /todos/42 in your single-page app.
If you use routers that use the HTML5 pushState history API under the hood (for example, React Router with browserHistory ), many static file servers will fail. For example, if you used React Router with a route for /todos/42 , the development server will respond to localhost:3000/todos/42 properly, but an Express serving a production build as above will not.
This is because when there is a fresh page load for a /todos/42 , the server looks for the file build/todos/42 and does not find it. The server needs to be configured to respond to a request to /todos/42 by serving index.html . For example, we can amend our Express example above to serve index.html for any unknown paths:
app.use(express.static(path.join(__dirname, 'build')));
- app.get('/', function (req, res) {
+ app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
}); If you're using Apache HTTP Server, you need to create a .htaccess file in the public folder that looks like this:
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
It will get copied to the build folder when you run npm run build .
If you're using Apache Tomcat, you need to follow this Stack Overflow answer.
Now requests to /todos/42 will be handled correctly both in development and in production.
On a production build, and in a browser that supports service workers, the service worker will automatically handle all navigation requests, like for /todos/42 , by serving the cached copy of your index.html . This service worker navigation routing can be configured or disabled by eject ing and then modifying the navigateFallback and navigateFallbackWhitelist options of the SWPreachePlugin configuration.
When users install your app to the homescreen of their device the default configuration will make a shortcut to /index.html . This may not work for client-side routers which expect the app to be served from / . Edit the web app manifest at public/manifest.json and change start_url to match the required URL scheme, for example:
"start_url" : "." , By default, Create React App produces a build assuming your app is hosted at the server root.
To override this, specify the homepage in your package.json , for example:
"homepage" : "http://mywebsite.com/relativepath" ,This will let Create React App correctly infer the root path to use in the generated HTML file.
Note : If you are using react-router@^4 , you can root <Link> s using the basename prop on any <Router> .
More information here.
예를 들어:
< BrowserRouter basename = "/calendar" />
< Link to = "/today" / > // renders <a href="/calendar/today"> Note: this feature is available with
[email protected]and higher.
If you are not using the HTML5 pushState history API or not using client-side routing at all, it is unnecessary to specify the URL from which your app will be served. Instead, you can put this in your package.json :
"homepage" : "." , This will make sure that all the asset paths are relative to index.html . You will then be able to move your app from http://mywebsite.com to http://mywebsite.com/relativepath or even http://mywebsite.com/relative/path without having to rebuild it.
See this blog post on how to deploy your React app to Microsoft Azure.
See this blog post or this repo for a way to use automatic deployment to Azure App Service.
Install the Firebase CLI if you haven't already by running npm install -g firebase-tools . Sign up for a Firebase account and create a new project. Run firebase login and login with your previous created Firebase account.
Then run the firebase init command from your project's root. You need to choose the Hosting: Configure and deploy Firebase Hosting sites and choose the Firebase project you created in the previous step. You will need to agree with database.rules.json being created, choose build as the public directory, and also agree to Configure as a single-page app by replying with y .
=== Project Setup
First, let ' s associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we ' ll just set up a default project.
? What Firebase project do you want to associate as default ? Example app (example-app-fd690)
=== Database Setup
Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.
? What file should be used for Database Rules ? database.rules.json
✔ Database Rules for example-app-fd690 have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to uploaded with firebase deploy. If you
have a build process for your assets, use your build ' s output directory.
? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔ Wrote build/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete! 중요 : firebase.json 파일에서 service-worker.js 파일에 대한 적절한 HTTP 캐싱 헤더를 설정해야합니다 "hosting" 그렇지 않으면 첫 번째 배포 후 변경 사항을 볼 수 없습니다 (발행 #2440) 다음:
{
"hosting": {
...
"headers": [
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
]
...
Now, after you create a production build with npm run build , you can deploy it by running firebase deploy .
=== Deploying to ' example-app-fd690 ' ...
i deploying database, hosting
✔ database: rules ready to deploy.
i hosting: preparing build directory for upload...
Uploading: [ ============================== ] 75%✔ hosting: build folder uploaded successfully
✔ hosting: 8 files uploaded successfully
i starting release process (may take several minutes)...
✔ Deploy complete !
Project Console: https://console.firebase.google.com/project/example-app-fd690/overview
Hosting URL: https://example-app-fd690.firebaseapp.comFor more information see Add Firebase to your JavaScript Project.
Note: this feature is available with
[email protected]and higher.
homepage to package.json The step below is important!
If you skip it, your app will not deploy correctly.
Open your package.json and add a homepage field for your project:
"homepage" : " https://myusername.github.io/my-app " ,or for a GitHub user page:
"homepage" : " https://myusername.github.io " , Create React App uses the homepage field to determine the root URL in the built HTML file.
gh-pages and add deploy to scripts in package.json Now, whenever you run npm run build , you will see a cheat sheet with instructions on how to deploy to GitHub Pages.
To publish it at https://myusername.github.io/my-app, run:
npm install --save gh-pages Alternatively you may use yarn :
yarn add gh-pages Add the following scripts in your package.json :
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build", The predeploy script will run automatically before deploy is run.
If you are deploying to a GitHub user page instead of a project page you'll need to make two additional modifications:
package.json scripts to push deployments to master : "scripts": {
"predeploy": "npm run build",
- "deploy": "gh-pages -d build",
+ "deploy": "gh-pages -b master -d build", npm run deployThen run:
npm run deploygh-pages Finally, make sure GitHub Pages option in your GitHub project settings is set to use the gh-pages branch:
You can configure a custom domain with GitHub Pages by adding a CNAME file to the public/ folder.
GitHub Pages doesn't support routers that use the HTML5 pushState history API under the hood (for example, React Router using browserHistory ). This is because when there is a fresh page load for a url like http://user.github.io/todomvc/todos/42 , where /todos/42 is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /todos/42 . If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj ). Read more about different history implementations in React Router.index.html page with a special redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you'll need to add code handling the redirect parameter to index.html . You can find a detailed explanation of this technique in this guide. Use the Heroku Buildpack for Create React App.
You can find instructions in Deploying React with Zero Configuration.
Sometimes npm run build works locally but fails during deploy via Heroku. Following are the most common cases.
If you get something like this:
remote: Failed to create a production build. Reason:
remote: Module not found: Error: Cannot resolve 'file' or 'directory'
MyDirectory in /tmp/build_1234/src
It means you need to ensure that the lettercase of the file or directory you import matches the one you see on your filesystem or on GitHub.
This is important because Linux (the operating system used by Heroku) is case sensitive. So MyDirectory and mydirectory are two distinct directories and thus, even though the project builds locally, the difference in case breaks the import statements on Heroku remotes.
If you exclude or ignore necessary files from the package you will see a error similar this one:
remote: Could not find a required file.
remote: Name: `index.html`
remote: Searched in: /tmp/build_a2875fc163b209225122d68916f1d4df/public
remote:
remote: npm ERR! Linux 3.13.0-105-generic
remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/node" "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/npm" "run" "build"
In this case, ensure that the file is there with the proper lettercase and that's not ignored on your local .gitignore or ~/.gitignore_global .
To do a manual deploy to Netlify's CDN:
npm install netlify-cli -g
netlify deploy Choose build as the path to deploy.
To setup continuous delivery:
With this setup Netlify will build and deploy when you push to git or open a pull request:
yarn build as the build command and build as the publish directoryDeploy siteSupport for client-side routing:
To support pushState , make sure to create a public/_redirects file with the following rewrite rules:
/* /index.html 200
When you build the project, Create React App will place the public folder contents into the build output.
Now offers a zero-configuration single-command deployment. You can use now to deploy your app for free.
Install the now command-line tool either via the recommended desktop tool or via node with npm install -g now .
Build your app by running npm run build .
Move into the build directory by running cd build .
Run now --name your-project-name from within the build directory. You will see a now.sh URL in your output like this:
> Ready! https://your-project-name-tpspyhtdtk.now.sh (copied to clipboard)
Paste that URL into your browser when the build is complete, and you will see your deployed app.
Details are available in this article.
See this blog post on how to deploy your React app to Amazon Web Services S3 and CloudFront.
Install the Surge CLI if you haven't already by running npm install -g surge . Run the surge command and log in you or create a new account.
When asked about the project path, make sure to specify the build folder, for example:
project path: /path/to/project/build Note that in order to support routers that use HTML5 pushState API, you may want to rename the index.html in your build folder to 200.html before deploying to Surge. This ensures that every URL falls back to that file.
You can adjust various development and production settings by setting environment variables in your shell or with .env.
| 변하기 쉬운 | 개발 | 생산 | 용법 |
|---|---|---|---|
| BROWSER | ✅ | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a browser to override this behavior, or set it to none to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to npm start will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the .js extension. | |
| 주인 | ✅ | By default, the development web server binds to localhost . You may use this variable to specify a different host. | |
| 포트 | ✅ | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. | |
| HTTPS | ✅ | When set to true , Create React App will run the development server in https mode. | |
| PUBLIC_URL | ✅ | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in package.json ( homepage ). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. | |
| CI | ? | ✅ | When set to true , Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. |
| REACT_EDITOR | ✅ | 앱이 개발중인 경우 클릭 가능한 스택 추적이있는 오류 오버레이가 표시되면 React App을 작성하면 현재 실행중인 프로세스를 기반으로 사용하는 편집기를 결정하고 관련 소스 파일을 엽니 다 선택한 편집자를 감지하면 자동 감지를 사용하면 시스템 경로가 편집자의 빈 폴더를 지적 할 none 있습니다. 완전히. | |
| CHOKIDAR_USEPOLLING | ✅ | When set to true , the watcher runs in polling mode, as necessary inside a VM. Use this option if npm start isn't detecting changes. | |
| GENERATE_SOURCEMAP | ✅ | When set to false , source maps are not generated for a production build. This solves OOM issues on some smaller machines. | |
| NODE_PATH | ✅ | ✅ | Same as NODE_PATH in Node.js, but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting NODE_PATH=src . |
npm start doesn't detect changes When you save a file while npm start is running, the browser should refresh with the updated code.
If this doesn't happen, try one of the following workarounds:
index.js and you're referencing it by the folder name, you need to restart the watcher due to a Webpack bug..env file in your project directory if it doesn't exist, and add CHOKIDAR_USEPOLLING=true to it. This ensures that the next time you run npm start , the watcher uses the polling mode, as necessary inside a VM.If none of these solutions help please leave a comment in this thread.
npm test hangs on macOS Sierra If you run npm test and the console gets stuck after printing react-scripts test --env=jsdom to the console there might be a problem with your Watchman installation as described in facebookincubator/create-react-app#713.
We recommend deleting node_modules in your project and running npm install (or yarn if you use it) first. If it doesn't help, you can try one of the numerous workarounds mentioned in these issues:
It is reported that installing Watchman 4.7.0 or newer fixes the issue. If you use Homebrew, you can run these commands to update it:
watchman shutdown-server
brew update
brew reinstall watchman
You can find other installation methods on the Watchman documentation page.
If this still doesn't help, try running launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist .
There are also reports that uninstalling Watchman fixes the issue. So if nothing else helps, remove it from your system and try again.
npm run build exits too early It is reported that npm run build can fail on machines with limited memory and no swap space, which is common in cloud environments. Even with small projects this command can increase RAM usage in your system by hundreds of megabytes, so if you have less than 1 GB of available memory your build is likely to fail with the following message:
The build failed because the process exited too early. This probably means the system ran out of memory or someone called
kill -9on the process.
If you are completely sure that you didn't terminate the process, consider adding some swap space to the machine you're building on, or build the project locally.
npm run build fails on HerokuThis may be a problem with case sensitive filenames. Please refer to this section.
If you use a Moment.js, you might notice that only the English locale is available by default. This is because the locale files are large, and you probably only need a subset of all the locales provided by Moment.js.
To add a specific Moment.js locale to your bundle, you need to import it explicitly.
예를 들어:
import moment from 'moment' ;
import 'moment/locale/fr' ; If import multiple locales this way, you can later switch between them by calling moment.locale() with the locale name:
import moment from 'moment' ;
import 'moment/locale/fr' ;
import 'moment/locale/es' ;
// ...
moment . locale ( 'fr' ) ;This will only work for locales that have been explicitly imported before.
npm run build fails to minifySome third-party packages don't compile their code to ES5 before publishing to npm. This often causes problems in the ecosystem because neither browsers (except for most modern versions) nor some tools currently support all ES6 features. We recommend to publish code on npm as ES5 at least for a few more years.
module field in package.json . Note that even if a library provides an ES Modules version, it should still precompile other ES6 features to ES5 if it intends to support older browsers .Fork the package and publish a corrected version yourself.
If the dependency is small enough, copy it to your src/ folder and treat it as application code.
In the future, we might start automatically compiling incompatible third-party modules, but it is not currently supported. This approach would also slow down the production builds.
Ejecting lets you customize anything, but from that point on you have to maintain the configuration and scripts yourself. This can be daunting if you have many similar projects. In such cases instead of ejecting we recommend to fork react-scripts and any other packages you need. This article dives into how to do it in depth. You can find more discussion in this issue.
If you have ideas for more “How To” recipes that should be on this page, let us know or contribute some!
