우리는 기본적으로 무엇을 얻는가?

React Create App은 모든 React 애플리케이션의 시작점을 포함하여 여러 가지를 즉시 제공합니다.

• 빌드 설정 (transpiling을위한 webpack 및 Babel)
• 편리한 폴더 구조
• 응용 프로그램을 실행할 스크립트
• 프로덕션을 위해 번들로 제공 할 스크립트
• Sass, TypeScript 등으로 확장 할 수 있는 기능

빌드 설정 

우리의 React 어플리케이션은 모든 브라우저가 읽을 수 있는 ES6 코드로 변환하기 위한 빌드 단계가 필요합니다. 따라서 Create React App을 사용하지 않는 많은 설정이 webpack 및 Babel을 설정할 것입니다.

Create React App은 webpack과 Babel로 구성되어 있으므로 설정하지 않아도 됩니다. 

폴더 구조 

다음은 Create React App 애플리케이션 시작을 위한 폴더 구조입니다.

my-app
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
├── README.md
├── node_modules
├── package.json
├── .gitignore

public/ folder : 공용 폴더의 모든 항목이 브라우저에서 사용할 수 있습니다. 우리는 여기에서 너무 자주 일하지 않을 것입니다. 이것은 최소한의 작업으로 애플리케이션과 함께 번들로 제공 할 자산입니다.

src/ folder : 여기서 우리는 대부분의 작업을 수행 할 것입니다. 모든 React 구성 요소는 src/ 폴더 내에 있습니다.

root 폴더 : 여기에 우리의 구성 파일이 있습니다. 대부분의 구성은 package.json에 있습니다.

빌드 스크립트 

Create React App은 우리의 개발에 도움이 되는 몇 가지 스크립트와 함께 제공됩니다. 우리가 원할 때마다 다음 스크립트를 사용할 것입니다 :

• 개발을 위한 애플리케이션 실행
• 제품을 위한 애플리케이션 구축
• 테스트를 만든 경우 응용 프로그램을 테스트하십시오.

스크립트가 있는 package.json 파일을 볼 수 있습니다.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

우리는 다음 명령을 사용하여 위의 명령을 실행할 수 있습니다.

# starting our app for development
npm start
npm run start
yarn start

# building our app for production
npm run production
yarn production

# testing our application
npm run test

# ejecting our application (ONLY DO IF YOU KNOW WHAT YOURE DOING)
npm run eject

start :이 명령은 개발을 위한 응용 프로그램을 시작합니다. 또한 http : // localhost : 3000의 브라우저에서 개발 용 응용 프로그램을 열어줍니다.

build : 우리는 프로덕션을 위해 응용 프로그램을 번들로 제공하고 사용자를 위해 호스팅 할 수 있는 파일을 몇 개만 생성 할 수 있습니다.

test : App.test.js에 React Create App과 함께 제공되는 테스트와 같은 테스트를 모두 실행합니다.

eject : Ejecting은 React 애플리케이션의 모든 측면을 구성 할 수 있는 액세스 권한을 제공합니다. 즉, Create React App은 더 이상 응용 프로그램의 구성을 처리하지 않습니다. 이 명령은 CRA의 편이성을 유지하고 추가 구성이 필요하다고 100 % 확신하는 사람들을 위한 것입니다.

테스트 실행 기능 

다음은 npm run test와 같이 실행중인 테스트의 모습입니다.

제품을 위한 번들링 

사용자가 사용할 수 있는 애플리케이션을 호스팅하려면 모든 코드를 사용자가 로드 할 수 있는 몇 가지 JavaScript 파일로 묶어야 합니다. React App 만들기는 편리한 스크립트와 함께 제공됩니다.

다음을 실행하여 몇 가지 빌드 파일을 만들 수 있습니다.

# bundle this app for production
npm run build

작성된 새 파일을 확인하십시오. 이것이 React 앱을 사용자에게 제공하는 데 필요한 전부입니다!

그런 다음 새로 생성 된 빌드 폴더에서 새 파일을 볼 수 있습니다. 이것은 우리가 서버에서 호스팅하고 index.html 파일을 향해 사용자를 안내 할 것입니다. React은 나머지를 처리 ​​할 것입니다.

다음 게시글에서 제작용 번들링의 의미에 대해 더 자세히 설명하겠습니다.

결론

Create React App은 React 개발자에게 유용한 도구입니다. 우리는 이전에 우리 자신의 webpack 및 Babel 설정을 구성해야 했습니다.

이제 React 개발자는 멋진 React 응용 프로그램을 개발할 수 있습니다. 더 이상 설정에 대해 걱정할 필요가 없습니다. 

React Create App을 사용하여 응용 프로그램을 시작하십시오. 그것은 견고한 기반을 제공하고 React 팀에 의해 계속 업데이트됩니다.