kinokong
1.0.0
이 프로젝트는 Create React 앱으로 부트 스트랩되었습니다.
아래에는 일반적인 작업을 수행하는 방법에 대한 정보가 있습니다.
이 안내서의 최신 버전을 여기에서 찾을 수 있습니다.
<title>public 폴더 사용public 폴더를 사용하는시기.env 에서 개발 환경 변수 추가<meta> 태그 생성npm start 변경 사항을 감지하지 않습니다npm test Macos Sierra에서 매달리거나 충돌합니다npm run build 너무 일찍 출구됩니다npm run build 실패합니다npm run build 실현되지 않습니다React 앱 생성은 두 가지 패키지로 나뉩니다.
create-react-app 새로운 프로젝트를 만드는 데 사용하는 글로벌 명령 줄 유틸리티입니다.react-scripts 생성 된 프로젝트 (이 프로젝트 포함)에서 개발 의존성입니다. create-react-app 자체를 업데이트 할 필요가 거의 없습니다. 모든 설정을 react-scripts 로 위임합니다.
create-react-app 실행하면 항상 최신 버전의 react-scripts 로 프로젝트를 생성하므로 새로 생성 된 앱에서 모든 새로운 기능과 개선 사항을 자동으로 얻을 수 있습니다.
기존 프로젝트를 새 버전의 react-scripts 로 업데이트하려면 ChangEleg를 열고 현재 중이에있는 버전을 찾아 (확실하지 않은 경우이 폴더에서 package.json )를 찾은 다음 최신에 마이그레이션 지침을 적용하십시오. 버전.
대부분의 경우 package.json 에서 react-scripts 버전을 충돌 시키고이 폴더에서 npm install (또는 yarn install )를 실행하면 충분해야하지만 잠재적 인 중단 변경을 위해 ChangElog를 참조하는 것이 좋습니다.
우리는 파괴 변화를 최소화하기 위해 노력하여 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 폴더에 생산을위한 앱을 빌드합니다.
생산 모드에서 올바르게 반응하고 최상의 성능을 위해 빌드를 최적화합니다.
빌드는 미니어지고 파일 이름에는 해시가 포함됩니다.
앱을 배포 할 준비가되었습니다!
자세한 내용은 배포에 대한 섹션을 참조하십시오.
npm run eject 참고 : 이것은 편도 작업입니다. 일단 당신 eject , 당신은 돌아갈 수 없습니다!
빌드 도구 및 구성 선택에 만족하지 않으면 언제든지 eject 할 수 있습니다. 이 명령은 프로젝트에서 단일 빌드 종속성을 제거합니다.
대신 모든 구성 파일과 전이 종속성 (웹 팩, 바벨, eslint 등)을 프로젝트에 바로 복사하여 전체 제어를 제공합니다. eject 제외한 모든 명령은 여전히 작동하지만 복사 된 스크립트를 가리켜 조정할 수 있습니다. 이 시점에서 당신은 혼자입니다.
eject 사용할 필요는 없습니다. 선별 된 기능 세트는 중소 배포에 적합 하며이 기능을 사용해야 할 의무가 없어야합니다. 그러나 우리는이 도구가 준비가되었을 때 사용자 정의 할 수 없다면 유용하지 않다는 것을 이해합니다.
기본적으로 생성 된 프로젝트는 모든 최신 브라우저를 지원합니다.
Internet Explorer 9, 10 및 11에 대한 지원에는 폴리 필이 필요합니다.
이 프로젝트는 최신 JavaScript 표준의 슈퍼 세트를 지원합니다.
ES6 구문 기능 외에도 다음을 지원합니다.
다양한 제안 단계에 대해 자세히 알아보십시오.
우리는 약간의주의를 기울여 실험 제안을 사용하는 것이지만 Facebook은 제품 코드에서 이러한 기능을 크게 사용하므로 이러한 제안이 향후 변경되면 Codemods를 제공하려고합니다.
이 프로젝트에는 기본적으로 폴리 필이 포함되어 있지 않습니다 .
런타임 지원이 필요한 다른 ES6+ 기능 (예 : Array.from() 또는 Symbol )이 필요한 경우 적절한 폴리 플릴을 수동으로 포함 시키거나 대상으로하는 브라우저가 이미 지원하는지 확인하십시오.
좋아하는 텍스트 편집기에서 구문 강조 표시를 구성하려면 관련 Babel 문서 페이지로 이동하여 지침을 따르십시오. 가장 인기있는 편집자 중 일부는 다루었습니다.
참고 :이 기능은
[email protected]이상으로 제공됩니다.
또한 NPM 3 이상에서만 작동합니다.
Sublime Text, Atom 및 Visual Studio Code를 포함한 일부 편집자는 Eslint 용 플러그인을 제공합니다.
그들은 줄무늬가 필요하지 않습니다. 터미널과 브라우저 콘솔에서 Linter 출력이 바로 표시되어야합니다. 그러나 편집자에 보풀 결과가 나타나는 것을 선호하는 경우 몇 가지 추가 단계가 있습니다.
편집기를 위해 먼저 Eslint 플러그인을 설치해야합니다. 그런 다음 프로젝트 루트에 .eslintrc 라는 파일을 추가하십시오.
{
"extends" : "react-app"
}이제 편집자가 라인 경고를보고해야합니다.
.eslintrc 파일을 더 편집하더라도 이러한 변경 사항은 편집기 통합에만 영향을 미칩니다 . 터미널 및 브라우저 내 보풀 출력에는 영향을 미치지 않습니다. 이는 React App Creat가 의도적으로 일반적인 실수를 찾는 최소한의 규칙 세트를 제공하기 때문입니다.
프로젝트의 코딩 스타일을 시행하려면 Eslint 스타일 규칙 대신 더 예쁘게 사용하는 것을 고려하십시오.
이 기능은 현재 Visual Studio Code 및 Webstorm에서만 지원됩니다.
React App을 사용하여 Visual Studio Code 및 WebStorm 지원 박스에서 디버깅을 지원합니다. 이를 통해 개발자로서 편집자를 떠나지 않고 React Code를 작성하고 디버깅 할 수 있으며, 가장 중요한 것은 도구간에 전환 할 필요가 없으므로 컨텍스트 전환이 최소화되는 지속적인 개발 워크 플로우를 가질 수 있습니다.
최신 버전의 VS 코드 및 VS Code Chrome Debugger Extension이 설치되어 있어야합니다.
그런 다음 아래 블록을 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}/* "
}
}
]
}참고 : 호스트 또는 포트 환경 변수를 통해 조정 한 경우 URL이 다를 수 있습니다.
npm start 실행하여 앱을 시작하고 F5 눌렀거나 녹색 디버그 아이콘을 클릭하여 VS 코드에서 디버깅을 시작하십시오. 이제 코드를 작성하고, 중단 점을 설정하고, 코드를 변경하고, 새로 수정 된 코드를 편집기에서 디버깅 할 수 있습니다.
대 코드 디버깅에 문제가 있습니까? 문제 해결 안내서를 참조하십시오.
WebStorm 및 JetBrains IDE가 Chrome Extension을 지원해야합니다.
WebStorm 메뉴에서 Run Edit Configurations... 그런 다음 + 클릭하고 JavaScript Debug 선택하십시오. http://localhost:3000 URL 필드에 붙여 넣고 구성을 저장하십시오.
참고 : 호스트 또는 포트 환경 변수를 통해 조정 한 경우 URL이 다를 수 있습니다.
npm start 실행하여 앱을 시작한 다음 Windows 및 Linux에서 MacOS 또는 F9 에서 ^D 누르거나 Green Debug 아이콘을 클릭하여 WebStorm에서 디버깅을 시작하십시오.
Intellij Idea Ultimate, Phpstorm, Pycharm Pro 및 Rubymine에서 응용 프로그램을 디버깅 할 수 있습니다.
Pretier는 JavaScript, CSS 및 JSON을 지원하는 의견이 많은 코드 포맷터입니다. Pretier를 사용하면 프로젝트 내에서 코드 스타일을 보장하기 위해 자동으로 작성된 코드를 포맷 할 수 있습니다. 자세한 내용은 Pretier의 Github 페이지를 참조 하고이 페이지를 보고이 페이지를 확인하십시오.
GIT에 커밋 될 때마다 코드를 작성하려면 다음 종속성을 설치해야합니다.
npm install --save husky lint-staged prettier 또는 yarn 사용할 수 있습니다.
yarn add husky lint-staged prettierhusky NPM 스크립트 인 것처럼 Githooks를 쉽게 사용할 수 있습니다.lint-staged 사용하면 GIT의 무대 파일에서 스크립트를 실행할 수 있습니다. Lint-Staged에 대한이 블로그 게시물을 참조하여 자세한 내용을 알아보십시오.prettier 는 우리가 커밋하기 전에 실행할 JavaScript Formatter입니다. 이제 프로젝트 루트의 package.json 에 몇 줄을 추가하여 모든 파일이 올바르게 형식화되어 있는지 확인할 수 있습니다.
package.json 섹션에 다음 필드를 추가하십시오.
+ "husky": {
+ "hooks": {
+ "pre-commit": "lint-staged"
+ }
+ } 다음으로 package.json 에 'Lint-Staged'필드를 추가합니다.
"dependencies": {
// ...
},
+ "lint-staged": {
+ "src/**/*.{js,jsx,json,css}": [
+ "prettier --single-quote --write",
+ "git add"
+ ]
+ },
"scripts": { 이제 커밋 할 때마다 더 예쁘게 변경된 파일을 자동으로 포맷합니다. ./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx}" 실행하여 전체 프로젝트를 처음으로 실행할 수 있습니다.
다음으로 좋아하는 편집자에 더 예쁘게 통합 할 수 있습니다. 더 Pretier Github 페이지에서 편집기 통합 섹션을 읽으십시오.
<title> 생성 된 프로젝트의 public 폴더에서 소스 html 파일을 찾을 수 있습니다. <title> 태그를 편집하여 제목을 "React App"에서 다른 것으로 변경할 수 있습니다.
일반적으로 public 폴더의 파일을 자주 편집하지 않습니다. 예를 들어, 스타일 시트 추가는 HTML을 만지지 않고 수행됩니다.
콘텐츠에 따라 페이지 제목을 동적으로 업데이트 해야하는 경우 브라우저 document.title 사용할 수 있습니다. React 구성 요소에서 제목을 변경하려는 경우보다 복잡한 시나리오를 보려면 타사 라이브러리 인 React Helmet을 사용할 수 있습니다.
프로덕션에서 앱에 사용자 정의 서버를 사용하고 브라우저로 보내기 전에 제목을 수정하려면이 섹션에서 조언을 따를 수 있습니다. 또는 각 페이지를 정적 HTML 파일로 사전 구축 한 다음 여기에서 다루는 JavaScript 번들을로드 할 수 있습니다.
생성 된 프로젝트에는 REACT 및 RECTDOM이 종속성으로 포함됩니다. 또한 React App을 개발 종속성으로 사용하는 스크립트 세트도 포함되어 있습니다. npm 과 함께 다른 종속성 (예 : 반응 라우터)을 설치할 수 있습니다.
npm install --save react-router-dom 또는 yarn 사용할 수 있습니다.
yarn add react-router-dom 이것은 react-router-dom 뿐만 아니라 모든 라이브러리에서 작동합니다.
이 프로젝트 설정은 WebPack 덕분에 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 ;기본값과 이름이 지정된 수출의 차이점을 알고 있어야합니다. 그것은 일반적인 실수의 원천입니다.
모듈이 하나의 것을 내보내는 경우 (예 : 구성 요소) 기본 가져 오기 및 내보내기를 사용하는 것이 좋습니다. import Button from './Button' export default Button 과 가져 오기 버튼을 사용하면 얻을 수 있습니다.
명명 된 내보내기는 여러 기능을 내보내는 유틸리티 모듈에 유용합니다. 모듈에는 최대 하나의 기본 내보내기가 있고 원하는만큼 이름이 지정 될 수 있습니다.
ES6 모듈에 대해 자세히 알아보십시오.
사용자가 사용하기 전에 전체 앱을 다운로드하는 대신 코드 분할을 사용하면 코드를 작은 청크로 분할하여 주문시로드 할 수 있습니다.
이 프로젝트 설정은 Dynamic 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 라우터를 사용하는 경우 코드 분할을 사용하는 방법에 대한이 자습서를 확인하십시오. 동반자 Github 저장소를 여기에서 찾을 수 있습니다.
또한 React Documentation에서 코드 분할 섹션을 확인하십시오.
이 프로젝트 설정은 모든 자산을 처리하기 위해 WebPack을 사용합니다. WebPack은 JavaScript 이상의 import 개념을 "확장"하는 맞춤형 방법을 제공합니다. JavaScript 파일이 CSS 파일에 따라 다르다는 것을 표현하려면 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에게는 필요하지 않지만 많은 사람들 이이 기능이 편리하다고 생각합니다. 이 접근법의 이점에 대해 여기에서 읽을 수 있습니다. 그러나 코드는 웹 팩보다 다른 빌드 도구 및 환경에 대한 코드가 덜 휴대용이 가능하다는 것을 알고 있어야합니다.
개발에서 이러한 방식으로 종속성을 표현하면 스타일을 편집 할 때 스타일을 즉석로 다시로드 할 수 있습니다. 제작에서 모든 CSS 파일은 빌드 출력에서 단일 미니스트 .css 파일로 연결됩니다.
Webpack-Specific Semantics를 사용하는 것이 걱정된다면 모든 CSS를 src/index.css 에 바로 배치 할 수 있습니다. src/index.js 에서 여전히 가져 오지만 나중에 다른 빌드 도구로 마이그레이션하면 항상 해당 가져 오기를 제거 할 수 있습니다.
참고 :이 기능은
[email protected]이상으로 제공됩니다.
이 프로젝트는 [name].module.css 파일 이름 지정 규칙을 사용하여 일반 스타일 시트와 함께 CSS 모듈을 지원합니다. CSS 모듈은 [filename]_[classname]__[hash] 형식의 고유 한 클래스 이름을 자동으로 생성하여 CSS를 스코핑 할 수 있습니다.
팁 : SASS로 스타일 시트를 전제하려면 설치 지침을 따르고 다음과 같이 스타일 파일 확장을 변경하십시오 :
[name].module.scss또는[name].module.sass.
CSS 모듈을 사용하면 충돌 명명에 대해 걱정하지 않고 다른 파일에서 동일한 CSS 클래스 이름을 사용할 수 있습니다. CSS 모듈에 대해 자세히 알아보십시오.
Button.module.css. error {
background-color : red;
}another-stylesheet.css. error {
color : red;
}Button.js import React , { Component } from 'react' ;
import styles from './Button.module.css' ; // Import css modules stylesheet as styles
import './another-stylesheet.css' ; // Import regular stylesheet
class Button extends Component {
render ( ) {
// reference as a js object
return < button className = { styles . error } > Error Button < / button > ;
}
} 다른 .error 클래스 이름의 충돌이 없습니다
<!-- This button has red background but not red text -->
< button class =" Button_error_ax7yz " > </ div > 이것은 선택적 기능입니다. 일반 <link> 스타일 시트 및 CSS 파일이 완전히 지원됩니다. .module.css extension으로 끝나는 파일의 경우 CSS 모듈이 켜집니다.
참고 :이 기능은
[email protected]이상으로 제공됩니다.
일반적으로 다른 구성 요소에서 동일한 CSS 클래스를 재사용하지 않는 것이 좋습니다. 예를 들어, <AcceptButton> 및 <RejectButton> 구성 요소에서 .Button css 클래스를 사용하는 대신 <AcceptButton> 및 <RejectButton> 이 모두 렌더링 할 수있는 자체 .Button 스타일로 <Button> 구성 요소를 작성하는 것이 좋습니다. 상속).
이 규칙에 따라 Mixins 및 Nesting과 같은 기능이 구성 요소 구성으로 대체되므로 CSS 전 처리기가 덜 유용하게 만듭니다. 그러나 귀중한 것으로 판단되면 CSS 전 처리기를 통합 할 수 있습니다.
Sass를 사용하려면 먼저 node-sass 설치하십시오.
$ npm install node-sass --save
$ # or
$ yarn add node-sass 이제 src/App.css src/App.scss 로 바꾸고 src/App.js 업데이트하여 src/App.scss 가져올 수 있습니다. 이 파일 및 기타 파일은 Extension .scss 또는 .sass 로 가져 오면 자동으로 컴파일됩니다.
SASS 파일간에 변수를 공유하려면 SASS 가져 오기를 사용할 수 있습니다. 예를 들어, src/App.scss 및 기타 구성 요소 스타일 파일은 @import "./shared.scss"; 가변 정의로.
이것은 당신이 같은 수입을 할 수있게합니다
@import ' styles/_colors.scss ' ; // assuming a styles directory under src/
@import ' ~nprogress/nprogress ' ; // importing a css file from the nprogress node module팁 : CSS 모듈 에서도이 기능을 사용하는 것을 선택할 수 있습니다!
참고 : 위에 표시된대로
node_modules에서 가져 오는 것을~해야합니다.
이 프로젝트 설정은 CSS를 최소화하고 autoprefixer를 통해 자동으로 공급 업체 접두사를 추가하므로 걱정할 필요가 없습니다.
all Property, break Properties, Custom Properties 및 Media 쿼리 범위와 같은 새로운 CSS 기능을 지원하여 이전 브라우저에 대한 지원을 추가하기 위해 자동으로 폴리 채식됩니다.
BrowsersList package.json 에 따라 browserslist 키를 조정하여 대상 지원 브라우저를 사용자 정의 할 수 있습니다.
예를 들어, 이것은 다음과 같습니다.
. 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;
}어떤 이유로 autoprefixing을 비활성화 해야하는 경우이 섹션을 따르십시오.
CSS 그리드 레이아웃 접두사는 기본적으로 비활성화되었지만 수동 접두사를 제거하지는 않습니다 . CSS 그리드 접두사를 옵트 인하려면 먼저 그 한계에 대해 익숙해 지십시오.
CSS 그리드 접두사를 활성화하려면 /* autoprefixer grid: on */ CSS 파일의 상단에 켜집니다.
Webpack을 사용하면 이미지 및 글꼴과 같은 정적 자산을 사용하는 것이 CSS와 유사하게 작동합니다.
JavaScript 모듈에서 파일을 바로 import 수 있습니다. 이것은 웹 팩에 해당 파일을 번들에 포함하도록 지시합니다. CSS 가져 오기와 달리 파일을 가져 오면 문자열 값이 제공됩니다. 이 값은 코드에서 참조 할 수있는 최종 경로 (예 : 이미지의 src 속성 또는 PDF 링크의 href 입니다.
서버에 대한 요청 수를 줄이려면 10,000 바이트 미만의 이미지를 가져 오면 경로 대신 데이터 URI를 반환합니다. 이것은 다음 파일 확장에 적용됩니다 : BMP, GIF, JPG, JPEG 및 PNG. SVG 파일은 #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 모듈을 가져올 때와 같이 컴파일 오류가 표시됩니다. 컴파일 된 번들의 최종 파일 이름은 Content Hashes의 Webpack에 의해 생성됩니다. 파일 내용이 향후 파일이 변경되면 WebPack은 프로덕션에서 다른 이름을 제공하므로 장기 자산 캐싱에 대해 걱정할 필요가 없습니다.
이것은 또한 Webpack의 사용자 정의 기능이기도합니다.
React에는 필요하지 않지만 많은 사람들이 그것을 즐깁니다 (그리고 React Native는 이미지에 대해 유사한 메커니즘을 사용합니다).
정적 자산을 처리하는 대체 방법은 다음 섹션에 설명되어 있습니다.
참고 :이 기능은
[email protected]이상으로 제공됩니다.
SVG 파일을 추가하는 한 가지 방법은 위의 섹션에 설명되었습니다. SVG를 React 구성 요소로 직접 가져올 수도 있습니다. 두 가지 접근 방식 중 하나를 사용할 수 있습니다. 코드에서는 다음과 같습니다.
import { ReactComponent as Logo } from './logo.svg' ;
const App = ( ) => (
< div >
{ /* Logo is an actual React component */ }
< Logo / >
< / div >
) ; SVG를 별도의 파일로로드하지 않으려면 편리합니다. 수입품의 곱슬 버팀대를 잊지 마십시오! ReactComponent 가져 오기 이름은 특별하며 Filename이 아닌 SVG를 렌더링하는 React 구성 요소를 원한다고 React App을 작성합니다.
public 폴더 사용참고 :이 기능은
[email protected]이상으로 제공됩니다.
public 폴더에는 HTML 파일이 포함되어있어 예를 들어 페이지 제목을 설정하도록 조정할 수 있습니다. 컴파일 된 코드가있는 <script> 태그는 빌드 프로세스 중에 자동으로 추가됩니다.
public 폴더에 다른 자산을 추가 할 수도 있습니다.
대신 자바 스크립트 파일로 자산을 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 실행하면 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 . $ ;이것은 오타가 아닌 의도적으로 글로벌 변수를 사용하고 있음을 분명히합니다.
또는 Linter가 // eslint-disable-line 추가하여 라인을 무시하도록 강요 할 수 있습니다.
ReactStrap과 함께 Reacttrap을 사용할 필요는 없지만 Bootstrap을 React 앱과 통합하기위한 인기있는 라이브러리입니다. 필요한 경우 다음 단계를 수행하여 React App 만들기와 통합 할 수 있습니다.
NPM에서 ReactStrap 및 Bootstrap을 설치하십시오. ReactStrap은 부트 스트랩 CSS가 포함되어 있지 않으므로 설치해야합니다.
npm install --save reactstrap bootstrap@4 또는 yarn 사용할 수 있습니다.
yarn add bootstrap@4 reactstrap 부트 스트랩 CSS 및 선택적으로 부트 스트랩 테마 CSS src/index.js 파일의 시작 부분에서 부트 스트랩 테마 CSS :
import 'bootstrap/dist/css/bootstrap.css' ;
// Put any other imports below so that CSS from your
// components takes precedence over default styles. 필수 반응 스트랩 컴포넌트 가져 오기 src/App.js 파일 또는 사용자 정의 구성 요소 파일 :
import { Button } from 'reactstrap' ; 이제 렌더 메소드에 정의 된 구성 요소 계층 내에서 가져온 반응식 구성 요소를 사용할 준비가되었습니다. 다음은 ReactStrap을 사용하여 App.js 다시 작성합니다.
참고 :이 기능은
[email protected]이상으로 제공됩니다.
때로는 부트 스트랩의 시각적 스타일 (또는 동등한 패키지)을 조정해야 할 수도 있습니다.
[email protected] 으로 .scss 파일을 가져올 수 있습니다. 따라서 글로벌 스타일 환경 설정에 패키지의 내장 SASS 변수를 사용할 수 있습니다.
부트 스트랩을 사용자 정의하려면 src/custom.scss (또는 이와 유사)라는 파일을 만들고 부트 스트랩 소스 스타일 시트를 가져 오십시오. 가져온 파일 전에 재정의를 추가하십시오. 사용 가능한 변수의 이름에 대해 Bootstrap의 문서를 참조 할 수 있습니다.
// Override default variables before the import
$body-bg : #000 ;
// Import Bootstrap and its default variables
@import ' ~bootstrap/scss/bootstrap.scss ' ;참고 : 위에 표시된대로
node_modules에서 가져 오는 것을~해야합니다.
마지막으로 src/index.js 파일의 시작 부분에서 기본 부트 스트랩 .css 대신 새로 생성 된 .scss 파일을 가져옵니다.
import './custom.scss' ; Flow는 버그가 적은 코드를 작성하는 데 도움이되는 정적 유형 검사기입니다. 이 개념에 익숙하지 않은 경우 JavaScript의 정적 유형 사용에 대한이 소개를 확인하십시오.
최근 버전의 흐름 작업이 Box에서 React App 프로젝트를 만들었습니다.
React 앱 생성 프로젝트에 흐름을 추가하려면 다음 단계를 따르십시오.
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 )을 실행하여 파일에 유형 오류가 있는지 확인할 수 있습니다. 더 나은 통합 경험을 위해 IDE와 같은 IDE를 선택적으로 사용할 수 있습니다. 앞으로 우리는이를 React App Create에보다 면밀히 통합 할 계획입니다.
Flow에 대한 자세한 내용은 문서를 확인하십시오.
릴레이는 GraphQL에 의해 구동되는 데이터 중심 반응 응용 프로그램을 구축하기위한 프레임 워크입니다. 릴레이의 현재 릴리스 후보는 Babel Macros를 사용하여 Box Off Box에서 Create React App Projects와 함께 작동합니다. 릴레이 문서에 제시된대로 프로젝트를 설정 한 다음 매크로를 제공하는 Babel 플러그인 버전이 있는지 확인하십시오.
추가하려면 실행 :
npm install --save --dev babel-plugin-relay@dev 또는 yarn 사용할 수 있습니다.
yarn upgrade babel-plugin-relay@dev 그런 다음 graphql 템플릿 태그를 사용하는 곳마다 매크로를 가져옵니다.
import graphql from 'babel-plugin-relay/macro' ;
// instead of:
// import { graphql } from "babel-plugin-relay"
graphql `
query UserQuery {
viewer {
id
}
}
` ;릴레이에 대한 자세한 내용은 문서를 확인하십시오.
React App 만들기는 특정 라우팅 솔루션을 처방하지 않지만 React 라우터는 가장 인기있는 솔루션입니다.
추가하려면 실행 :
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' 와 동일하며 생산 번들을 만들기 위해 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 로 설정되며 BOLD 텍스트는 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 파일을 사용할 수 있습니까?Note: this feature is available with
[email protected]and higher .
.env : Default..env.local : Local overrides. This file is loaded for all environments except test..env.development , .env.test , .env.production : Environment-specific settings..env.development.local , .env.test.local , .env.production.local : Local overrides of environment-specific settings.Files on the left have more priority than files on the right:
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 (note .env.local is missing) These variables will act as the defaults if the machine does not explicitly set them.
Please refer to the dotenv documentation for more details.
Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need these defined as well. Consult their documentation how to do this. For example, see the documentation for Travis CI or Heroku.
.envNote: this feature is available with
[email protected]and higher.
Expand variables already on your machine for use in your .env file (using dotenv-expand).
For example, to get the environment variable npm_package_version :
REACT_APP_VERSION=$npm_package_version
# also works:
# REACT_APP_VERSION=${npm_package_version}
Or expand variables local to the current .env file:
DOMAIN=www.example.com
REACT_APP_FOO=$DOMAIN/foo
REACT_APP_BAR=$DOMAIN/bar
Some popular libraries use decorators in their documentation.
Create React App intentionally doesn't support decorator syntax at the moment because:
However in many cases you can rewrite decorator-based code without decorators just as fine.
Please refer to these two threads for reference:
Create React App will add decorator support when the specification advances to a stable stage.
React doesn't prescribe a specific approach to data fetching, but people commonly use either a library like axios or the fetch() API provided by the browser.
The global fetch function allows you to easily make AJAX requests. It takes in a URL as an input and returns a Promise that resolves to a Response object. You can find more information about fetch here.
A Promise represents the eventual result of an asynchronous operation, you can find more information about Promises here and here. Both axios and fetch() use Promises under the hood. You can also use the async / await syntax to reduce the callback nesting.
Make sure the fetch() API and Promises are available in your target audience's browsers. For example, support in Internet Explorer requires a polyfill.
You can learn more about making AJAX requests from React components in the FAQ entry on the React website.
These tutorials will help you to integrate your app with an API backend running on another port, using fetch() to access it.
Check out this tutorial. You can find the companion GitHub repository here.
Check out this tutorial. You can find the companion GitHub repository here.
API Platform is a framework designed to build API-driven projects. It allows to create hypermedia and GraphQL APIs in minutes. It is shipped with an official Progressive Web App generator as well as a dynamic administration interface, both built for Create React App. Check out this tutorial.
Note: this feature is available with
[email protected]and higher.
People often serve the front-end React app from the same host and port as their backend implementation.
For example, a production setup might look like this after the app is deployed:
/ - 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
Such setup is not required. However, if you do have a setup like this, it is convenient to write requests like fetch('/api/todos') without worrying about redirecting them to another host or port during development.
To tell the development server to proxy any unknown requests to your API server in development, add a proxy field to your package.json , for example:
"proxy" : "http://localhost:4000" , This way, when you fetch('/api/todos') in development, the development server will recognize that it's not a static asset, and will proxy your request to http://localhost:4000/api/todos as a fallback. The development server will only attempt to send requests without text/html in its Accept header to the proxy.
Conveniently, this avoids CORS issues and error messages like this in development:
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.
Keep in mind that proxy only has effect in development (with npm start ), and it is up to you to ensure that URLs like /api/todos point to the right thing in production. You don't have to use the /api prefix. Any unrecognized request without a text/html accept header will be redirected to the specified proxy .
The proxy option supports HTTP, HTTPS and WebSocket connections.
If the proxy option is not flexible enough for you, alternatively you can:
When you enable the proxy option, you opt into a more strict set of host checks. This is necessary because leaving the backend open to remote hosts makes your computer vulnerable to DNS rebinding attacks. The issue is explained in this article and this issue.
This shouldn't affect you when developing on localhost , but if you develop remotely like described here, you will see this error in the browser after enabling the proxy option:
Invalid Host header
To work around it, you can specify your public development host in a file called .env.development in the root of your project:
HOST=mypublicdevhost.com
If you restart the development server now and load the app from the specified host, it should work.
If you are still having issues or if you're using a more exotic environment like a cloud editor, you can bypass the host check completely by adding a line to .env.development.local . Note that this is dangerous and exposes your machine to remote code execution from malicious websites:
# NOTE: THIS IS DANGEROUS!
# It exposes your machine to attacks from the websites you visit.
DANGEROUSLY_DISABLE_HOST_CHECK=true
We don't recommend this approach.
Note: this feature is available with
[email protected]and higher.
If the proxy option is not flexible enough for you, you can get direct access to the Express app instance and hook up your own proxy middleware.
You can use this feature in conjunction with the proxy property in package.json , but it is recommended you consolidate all of your logic into src/setupProxy.js .
First, install http-proxy-middleware using npm or Yarn:
$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware Next, create src/setupProxy.js and place the following contents in it:
const proxy = require ( 'http-proxy-middleware' ) ;
module . exports = function ( app ) {
// ...
} ; You can now register proxies as you wish! Here's an example using the above http-proxy-middleware :
const proxy = require ( 'http-proxy-middleware' ) ;
module . exports = function ( app ) {
app . use ( proxy ( '/api' , { target : 'http://localhost:5000/' } ) ) ;
} ;Note: You do not need to import this file anywhere. It is automatically registered when you start the development server.
Note: This file only supports Node's JavaScript syntax. Be sure to only use supported language features (ie no support for Flow, ES Modules, etc).
Note: Passing the path to the proxy function allows you to use globbing and/or pattern matching on the path, which is more flexible than the express route matching.
Note: this feature is available with
[email protected]and higher.
You may require the dev server to serve pages over HTTPS. One particular case where this could be useful is when using the "proxy" feature to proxy requests to an API server when that API server is itself serving HTTPS.
To do this, set the HTTPS environment variable to true , then start the dev server as usual with npm start :
set HTTPS = true && npm start(Note: the lack of whitespace is intentional.)
( $ env: HTTPS = $true ) -and (npm start)HTTPS=true npm startNote that the server will use a self-signed certificate, so your web browser will almost definitely display a warning upon accessing the page.
<meta> Tags on the Server Since Create React App doesn't support server rendering, you might be wondering how to make <meta> tags dynamic and reflect the current URL. To solve this, we recommend to add placeholders into the HTML, like this:
<!doctype html >
< html lang =" en " >
< head >
< meta property =" og:title " content =" __OG_TITLE__ " >
< meta property =" og:description " content =" __OG_DESCRIPTION__ " > Then, on the server, regardless of the backend you use, you can read index.html into memory and replace __OG_TITLE__ , __OG_DESCRIPTION__ , and any other placeholders with values depending on the current URL. Just make sure to sanitize and escape the interpolated values so that they are safe to embed into HTML!
If you use a Node server, you can even share the route matching logic between the client and the server. However duplicating it also works fine in simple cases.
If you're hosting your build with a static hosting provider you can use react-snapshot or react-snap to generate HTML pages for each route, or relative link, in your application. These pages will then seamlessly become active, or “hydrated”, when the JavaScript bundle has loaded.
There are also opportunities to use this outside of static hosting, to take the pressure off the server when generating and caching routes.
The primary benefit of pre-rendering is that you get the core content of each page with the HTML payload—regardless of whether or not your JavaScript bundle successfully downloads. It also increases the likelihood that each route of your application will be picked up by search engines.
You can read more about zero-configuration pre-rendering (also called snapshotting) here.
Similarly to the previous section, you can leave some placeholders in the HTML that inject global variables, for example:
< ! 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.
Note: this feature is available with
[email protected]and higher.
Read the migration guide to learn how to enable it in older projects!
Create React App uses Jest as its test runner. To prepare for this integration, we did a major revamp of Jest so if you heard bad things about it years ago, give it another try.
Jest is a Node-based runner. This means that the tests always run in a Node environment and not in a real browser. This lets us enable fast iteration speed and prevent flakiness.
While Jest provides browser globals such as window thanks to jsdom, they are only approximations of the real browser behavior. Jest is intended to be used for unit tests of your logic and your components rather than the DOM quirks.
We recommend that you use a separate tool for browser end-to-end tests if you need them. They are beyond the scope of Create React App.
Jest will look for test files with any of the following popular naming conventions:
.js suffix in __tests__ folders..test.js suffix..spec.js suffix. The .test.js / .spec.js files (or the __tests__ folders) can be located at any depth under the src top level folder.
We recommend to put the test files (or __tests__ folders) next to the code they are testing so that relative imports appear shorter. For example, if App.test.js and App.js are in the same folder, the test just needs to import App from './App' instead of a long relative path. Colocation also helps find tests more quickly in larger projects.
When you run npm test , Jest will launch in the watch mode. Every time you save a file, it will re-run the tests, just like npm start recompiles the code.
The watcher includes an interactive command-line interface with the ability to run all tests, or focus on a search pattern. It is designed this way so that you can keep it open and enjoy fast re-runs. You can learn the commands from the “Watch Usage” note that the watcher prints after every run:
By default, when you run npm test , Jest will only run the tests related to files changed since the last commit. This is an optimization designed to make your tests run fast regardless of how many tests you have. However it assumes that you don't often commit the code that doesn't pass the tests.
Jest will always explicitly mention that it only ran tests related to the files changed since the last commit. You can also press a in the watch mode to force Jest to run all tests.
Jest will always run all tests on a continuous integration server or if the project is not inside a Git or Mercurial repository.
To create tests, add it() (or test() ) blocks with the name of the test and its code. You may optionally wrap them in describe() blocks for logical grouping but this is neither required nor recommended.
Jest provides a built-in expect() global function for making assertions. A basic test could look like this:
import sum from './sum' ;
it ( 'sums numbers' , ( ) => {
expect ( sum ( 1 , 2 ) ) . toEqual ( 3 ) ;
expect ( sum ( 2 , 2 ) ) . toEqual ( 4 ) ;
} ) ; All expect() matchers supported by Jest are extensively documented here.
You can also use jest.fn() and expect(fn).toBeCalled() to create “spies” or mock functions.
There is a broad spectrum of component testing techniques. They range from a “smoke test” verifying that a component renders without throwing, to shallow rendering and testing some of the output, to full rendering and testing component lifecycle and state changes.
Different projects choose different testing tradeoffs based on how often components change, and how much logic they contain. If you haven't decided on a testing strategy yet, we recommend that you start with creating simple smoke tests for your components:
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 ) ;
} ) ; This test mounts a component and makes sure that it didn't throw during rendering. Tests like this provide a lot of value with very little effort so they are great as a starting point, and this is the test you will find in src/App.test.js .
When you encounter bugs caused by changing components, you will gain a deeper insight into which parts of them are worth testing in your application. This might be a good time to introduce more specific tests asserting specific expected output or behavior.
If you'd like to test components in isolation from the child components they render, we recommend using shallow() rendering API from Enzyme. To install it, run:
npm install --save enzyme enzyme-adapter-react-16 react-test-renderer Alternatively you may use yarn :
yarn add enzyme enzyme-adapter-react-16 react-test-rendererAs of Enzyme 3, you will need to install Enzyme along with an Adapter corresponding to the version of React you are using. (The examples above use the adapter for React 16.)
The adapter will also need to be configured in your global setup file:
src/setupTests.js import { configure } from 'enzyme' ;
import Adapter from 'enzyme-adapter-react-16' ;
configure ( { adapter : new Adapter ( ) } ) ;Note: Keep in mind that if you decide to "eject" before creating
src/setupTests.js, the resultingpackage.jsonfile won't contain any reference to it. Read here to learn how to add this after ejecting.
Now you can write a smoke test with it:
import React from 'react' ;
import { shallow } from 'enzyme' ;
import App from './App' ;
it ( 'renders without crashing' , ( ) => {
shallow ( < App / > ) ;
} ) ; Unlike the previous smoke test using ReactDOM.render() , this test only renders <App> and doesn't go deeper. For example, even if <App> itself renders a <Button> that throws, this test will pass. Shallow rendering is great for isolated unit tests, but you may still want to create some full rendering tests to ensure the components integrate correctly. Enzyme supports full rendering with mount() , and you can also use it for testing state changes and component lifecycle.
You can read the Enzyme documentation for more testing techniques. Enzyme documentation uses Chai and Sinon for assertions but you don't have to use them because Jest provides built-in expect() and jest.fn() for spies.
Here is an example from Enzyme documentation that asserts specific output, rewritten to use Jest matchers:
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)).toBe(true);
expect ( wrapper . contains ( welcome ) ) . toEqual ( true ) ;
} ) ; All Jest matchers are extensively documented here.
Nevertheless you can use a third-party assertion library like Chai if you want to, as described below.
Additionally, you might find jest-enzyme helpful to simplify your tests with readable matchers. The above contains code can be written more simply with jest-enzyme.
expect ( wrapper ) . toContainReact ( welcome ) ; To enable this, install jest-enzyme :
npm install --save jest-enzyme Alternatively you may use yarn :
yarn add jest-enzyme Import it in src/setupTests.js to make its matchers available in every test:
import 'jest-enzyme' ; We recommend that you use expect() for assertions and jest.fn() for spies. If you are having issues with them please file those against Jest, and we'll fix them. We intend to keep making them better for React, supporting, for example, pretty-printing React elements as JSX.
However, if you are used to other libraries, such as Chai and Sinon, or if you have existing code using them that you'd like to port over, you can import them normally like this:
import sinon from 'sinon' ;
import { expect } from 'chai' ;and then use them in your tests like you normally do.
Note: this feature is available with
[email protected]and higher.
If your app uses a browser API that you need to mock in your tests or if you just need a global setup before running your tests, add a src/setupTests.js to your project. It will be automatically executed before running your tests.
예를 들어:
src/setupTests.js const localStorageMock = {
getItem : jest . fn ( ) ,
setItem : jest . fn ( ) ,
clear : jest . fn ( ) ,
} ;
global . localStorage = localStorageMock ;Note: Keep in mind that if you decide to "eject" before creating
src/setupTests.js, the resultingpackage.jsonfile won't contain any reference to it, so you should manually create the propertysetupTestFrameworkScriptFilein the configuration for Jest, something like the following:
"jest" : { // ... "setupTestFrameworkScriptFile" : "<rootDir>/src/setupTests.js" }
You can replace it() with xit() to temporarily exclude a test from being executed.
Similarly, fit() lets you focus on a specific test without running any other tests.
Jest has an integrated coverage reporter that works well with ES6 and requires no configuration.
Run npm test -- --coverage (note extra -- in the middle) to include a coverage report like this:
Note that tests run much slower with coverage so it is recommended to run it separately from your normal workflow.
The default Jest coverage configuration can be overridden by adding any of the following supported keys to a Jest config in your package.json.
Supported overrides:
collectCoverageFromcoverageReporterscoverageThresholdsnapshotSerializersExample package.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 " ]
}
} By default npm test runs the watcher with interactive CLI. However, you can force it to run tests once and finish the process by setting an environment variable called CI .
When creating a build of your application with npm run build linter warnings are not checked by default. Like npm test , you can force the build to perform a linter warning check by setting the environment variable CI . If any warnings are encountered then the build fails.
Popular CI servers already set the environment variable CI by default but you can do this yourself too:
.travis.yml file to your git repository. language: node_js
node_js:
- 8
cache:
directories:
- node_modules
script:
- npm run build
- npm test
Follow this article to set up CircleCI with a Create React App project.
set CI = true && npm test set CI = true && npm run build(Note: the lack of whitespace is intentional.)
( $ env: CI = $true ) -and (npm test)( $ env: CI = $true ) -and (npm run build)CI=true npm test CI=true npm run buildThe test command will force Jest to run tests once instead of launching the watcher.
If you find yourself doing this often in development, please file an issue to tell us about your use case because we want to make watcher the best experience and are open to changing how it works to accommodate more workflows.
The build command will check for linter warnings and fail if any are found.
If you know that none of your tests depend on jsdom, you can safely set --env=node , and your tests will run faster:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
- "test": "react-scripts test"
+ "test": "react-scripts test --env=node"To help you make up your mind, here is a list of APIs that need jsdom :
window and documentReactDOM.render()TestUtils.renderIntoDocument() (a shortcut for the above)mount() in EnzymeIn contrast, jsdom is not needed for the following APIs:
TestUtils.createRenderer() (shallow rendering)shallow() in EnzymeFinally, jsdom is also not needed for snapshot testing.
Snapshot testing is a feature of Jest that automatically generates text snapshots of your components and saves them on the disk so if the UI output changes, you get notified without manually writing any assertions on the component output. Read more about snapshot testing.
If you use Visual Studio Code, there is a Jest extension which works with Create React App out of the box. This provides a lot of IDE-like features while using a text editor: showing the status of a test run with potential fail messages inline, starting and stopping the watcher automatically, and offering one-click snapshot updates.
There are various ways to setup a debugger for your Jest tests. We cover debugging in Chrome and Visual Studio Code.
Note: debugging tests requires Node 8 or higher.
Add the following to the scripts section in your project's package.json
"scripts" : {
"test:debug" : " react-scripts --inspect-brk test --runInBand "
} Place debugger; statements in any test and run:
$ npm run test:debugThis will start running your Jest tests, but pause before executing to allow a debugger to attach to the process.
Open the following in Chrome
about:inspect
After opening that link, the Chrome Developer Tools will be displayed. Select inspect on your process and a breakpoint will be set at the first line of the react script (this is done simply to give you time to open the developer tools and to prevent Jest from executing before you have time to do so). Click the button that looks like a "play" button in the upper right hand side of the screen to continue execution. When Jest executes the test that contains the debugger statement, execution will pause and you can examine the current scope and call stack.
Note: the --runInBand cli option makes sure Jest runs test in the same process rather than spawning processes for individual tests. Normally Jest parallelizes test runs across processes but it is hard to debug many processes at the same time.
Debugging Jest tests is supported out of the box for Visual Studio Code.
Use the following launch.json configuration file:
{
"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"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
Usually, in an app, you have a lot of UI components, and each of them has many different states. For an example, a simple button component could have following states:
Usually, it's hard to see these states without running a sample app or some examples.
Create React App doesn't include any tools for this by default, but you can easily add Storybook for React (source) or React Styleguidist (source) to your project. These are third-party tools that let you develop components and see all their states in isolation from your app .
You can also deploy your Storybook or style guide as a static app. This way, everyone in your team can view and review different states of UI components without starting a backend server or creating an account in your app.
Storybook is a development environment for React UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.
First, install the following npm package globally:
npm install -g @storybook/cliThen, run the following command inside your app's directory:
getstorybookAfter that, follow the instructions on the screen.
Learn more about React Storybook:
Styleguidist combines a style guide, where all your components are presented on a single page with their props documentation and usage examples, with an environment for developing components in isolation, similar to Storybook. In Styleguidist you write examples in Markdown, where each code snippet is rendered as a live editable playground.
First, install Styleguidist:
npm install --save react-styleguidist Alternatively you may use yarn :
yarn add react-styleguidist Then, add these scripts to your package.json :
"scripts": {
+ "styleguide": "styleguidist server",
+ "styleguide:build": "styleguidist build",
"start": "react-scripts start",Then, run the following command inside your app's directory:
npm run styleguideAfter that, follow the instructions on the screen.
Learn more about React Styleguidist:
Create React App doesn't provide any built-in functionality to publish a component to npm. If you're ready to extract a component from your project so other people can use it, we recommend moving it to a separate directory outside of your project and then using a tool like nwb to prepare it for publishing.
The production build has all the tools necessary to generate a first-class Progressive Web App, but the offline/cache-first behavior is opt-in only . By default, the build process will generate a service worker file, but it will not be registered, so it will not take control of your production web app.
In order to opt-in to the offline-first behavior, developers should look for the following in their src/index.js file:
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker . unregister ( ) ; As the comment states, switching serviceWorker.unregister() to serviceWorker.register() will opt you in to using the service worker.
Offline-first Progressive Web Apps are faster and more reliable than traditional web pages, and provide an engaging mobile experience:
However, they can make debugging deployments more challenging so, starting with Create React App 2, service workers are opt-in.
The workbox-webpack-plugin is integrated into production configuration, and it will take care of generating a service worker file that will automatically precache all of your local assets and keep them up to date as you deploy updates. The service worker will use a cache-first strategy for handling all requests for local assets, including navigation requests for your HTML, ensuring that your web app is consistently fast, even on a slow or unreliable network.
If you do decide to opt-in to service worker registration, please take the following into account:
Service workers require HTTPS, although to facilitate local testing, that policy does not apply to localhost . If your production web server does not support HTTPS, then the service worker registration will fail, but the rest of your web app will remain functional.
Service workers are not supported in older web browsers. Service worker registration won't be attempted on browsers that lack support.
The service worker is only enabled in the production environment, eg the output of npm run build . It's recommended that you do not enable an offline-first service worker in a development environment, as it can lead to frustration when previously cached assets are used and do not include the latest changes you've made locally.
If you need to test your offline-first service worker locally, build the application (using npm run build ) and run a simple http server from your build directory. After running the build script, create-react-app will give instructions for one way to test your production build locally and the deployment instructions have instructions for using other methods. Be sure to always use an incognito window to avoid complications with your browser cache.
Users aren't always familiar with offline-first web apps. It can be useful to let the user know when the service worker has finished populating your caches (showing a "This web app works offline!" message) and also let them know when the service worker has fetched the latest updates that will be available the next time they load the page (showing a "New content is available; please refresh." message). Showing this messages is currently left as an exercise to the developer, but as a starting point, you can make use of the logic included in src/registerServiceWorker.js , which demonstrates which service worker lifecycle events to listen for to detect each scenario, and which as a default, just logs appropriate messages to the JavaScript console.
By default, the generated service worker file will not intercept or cache any cross-origin traffic, like HTTP API requests, images, or embeds loaded from a different domain.
The default configuration includes a web app manifest located at public/manifest.json , that you can customize with details specific to your web application.
When a user adds a web app to their homescreen using Chrome or Firefox on Android, the metadata in manifest.json determines what icons, names, and branding colors to use when the web app is displayed. The Web App Manifest guide provides more context about what each field means, and how your customizations will affect your users' experience.
Progressive web apps that have been added to the homescreen will load faster and work offline when there's an active service worker. That being said, the metadata from the web app manifest will still be used regardless of whether or not you opt-in to service worker registration.
Source map explorer analyzes JavaScript bundles using the source maps. This helps you understand where code bloat is coming from.
To add Source map explorer to a Create React App project, follow these steps:
npm install --save source-map-explorer Alternatively you may use yarn :
yarn add source-map-explorer Then in package.json , add the following line to scripts :
"scripts": {
+ "analyze": "source-map-explorer build/static/js/main.*",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",Then to analyze the bundle run the production build then run the analyze script.
npm run build
npm run analyze
npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html , and requests to static paths like /static/js/main.<hash>.js are served with the contents of the /static/js/main.<hash>.js file.
For environments using Node, the easiest way to handle this would be to install serve and let it handle the rest:
npm install -g serve
serve -s build The last command shown above will serve your static site on the port 5000 . Like many of serve's internal settings, the port can be adjusted using the -p or --port flags.
Run this command to get a full list of the options available:
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 when you've opted-in, a 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.
You can create an arbitrary build environment by creating a custom .env file and loading it using env-cmd.
For example, to create a build environment for a staging environment:
.env.staging.env file (eg REACT_APP_API_URL=http://api-staging.example.com )$ npm install env-cmd --save
$ # or
$ yarn add env-cmdpackage.json , building with your new environment: {
"scripts" : {
"build:staging" : " env-cmd .env.staging npm run build "
}
} Now you can run npm run build:staging to build with the staging environment config. You can specify other environments in the same way.
Variables in .env.production will be used as fallback because NODE_ENV will always be set to production for a build.
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! IMPORTANT: you need to set proper HTTP caching headers for service-worker.js file in firebase.json file or you will not be able to see changes after first deployment (issue #2440). It should be added inside "hosting" key like next:
{
"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 " ,or for a custom domain page:
"homepage" : " https://mywebsite.com " , 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.
Your CNAME file should look like this:
mywebsite.com
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. If, when deploying, you get /dev/tty: No such a device or address or a similar error, try the following:
git remote set-url origin https://<user>:<token>@github.com/<user>/<repo> .npm run deploy again If, when deploying, you get Cannot read property 'email' of null , try the following:
git config --global user.name '<your_name>'git config --global user.email '<your_email>'npm run deploy again 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:
Build your 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 | ✅ | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can send a pull request to detect your editor of choice. Setting this environment variable overrides the automatic detection. If you do it, make sure your systems PATH environment variable points to your editor's bin folder. You can also set it to none to disable it completely. | |
| 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 or crashes on macOS Sierra If you run npm test and the console gets stuck after printing react-scripts test to the console there might be a problem with your Watchman installation as described in facebook/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:
프로세스가 너무 일찍 종료되어 빌드가 실패했습니다. 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 you are importing 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 minify Before [email protected] , this problem was caused by third party node_modules using modern JavaScript features because the minifier couldn't handle them during the build. This has been solved by compiling standard modern JavaScript features inside node_modules in [email protected] and higher.
If you're seeing this error, you're likely using an old version of react-scripts . You can either fix it by avoiding a dependency that uses modern syntax, or by upgrading to react-scripts@>=2.0.0 and following the migration instructions in the changelog.
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!
