분류 Reactjs

React강좌 - 16 - Create React App를 사용하여 응용 프로그램 만들기

컨텐츠 정보

  • 조회 324 (작성일 )

본문

일반적으로 React 응용 프로그램을 만들면 단일 페이지 응용 프로그램 (SPA)이 생성됩니다. 단일 페이지 응용 프로그램을 보다 쉽게 ​​설정하기 위해 create-react-app라는 CLI 도구가 만들어졌습니다.


CLI 도구를 사용하면 React 응용 프로그램을 빠르게 만들 수 있습니다. 

다음은 React Create App으로 React 애플리케이션을 만드는 데 사용할 수 있는 명령입니다.


# generate a new react app called my-new-app
npx create-react-app my-new-app

# go into our newly created folder
cd my-new-app

# start our app
yarn start

npx는 npm 5.2 이상과 함께 제공되는 도구입니다. 그것은 우리에게 create-react-app의 최신 버전을 부여하고 그것을 사용하여 설치합니다.


Create-Reaction-App에는 무엇이 있습니까? 


상자에서 나올 좋은 것들이 많이 있습니다. Sass 나 TypeScript 같은 것들을 쉽게 추가 할 수 있습니다.


우리는 하나의 명령을 실행하여 다음과 같은 새로운 React 애플리케이션을 얻을 수 있습니다.

  • 권장되는 시작 폴더 구조
  • webpack 및 Babel을 사용한 견고한 빌드 설정 (설정에 대해 걱정할 필요가 없음)
  • React 애플리케이션을 실행할 스크립트
  • 확장성

create-react-app 설치하기 


create-react-app를 설치하는 방법은 여러 가지가 있습니다. 팀과 환경에 가장 적합한 방법을 사용하십시오.


# using npx (npm 5.2+)
npx create-react-app my-new-app

# using npm (npm 6+)
npm init react-app my-new-app

# using yarn (yarn 0.25+)
yarn create react-app my-new app

나는 개인적으로 npx 방식을 사용하는데, 그 이유는 나에게 익숙한 것이고 나는 처음부터 사용 해왔다.


새로운 React 프로젝트 시작하기 


npx를 사용하여 새 프로젝트를 만듭니다.


npx create-react-app super-duper-app

lhmf3c6cdvda510vhx5e.png 



s7jyjtu4dylhrupacwjd.png 


이것은 우리가 볼 새로운 폴더 구조입니다 :


m0jd7trvsgz2lco6o9um.png 


새로운 애플리케이션으로 우리가 할 수 있는 것을 탐구 해보자.


React App 시작하기 


React 응용 프로그램에서 개발을 시작하기 위해 브라우저에서 모든 것을 실행하고 http://localhost:3000의 브라우저에서 응용 프로그램을 열도록 CLI에 지시 할 수 있습니다.


# with npm
npm run start

# with yarn
yarn start

시작 명령은 webpack 및 Babel을 실행하고 우리의 응용 프로그램을 로드합니다.


본질적으로 이 명령이 하는 일은 transpiling, 오류 검사, Sass 컴파일, 모든 코드의 JavaScript 번들 생성, public / index.html 파일에 이 코드 삽입, 마지막으로 브라우저에서의 로드 등 모든 React 코드를 컴파일하는 것입니다 .






Create React App