---

Create React App

Create React App(이하 CRA)은 리액트로 웹을 만들기 위한 환경을 제공한다. 이를 사용하면 babel과 webpack을 포함한 여러 개발 환경을 한번에 구축할 수 있다.

설치 방법

npx

npm 5.2 이상인 경우

$ npx create-react-app [프로젝트명]

yarn

$ yarn create react-app [프로젝트명]

위 명령어로 프로젝트를 생성하면 프로젝트 폴더 내부에 아래와 같은 파일들이 생성되어 있는 것을 확인할 수 있다.

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

❌ 지우면 안되는 목록

• index.html
• index.js
• package.json

위 파일들을 제외한 나머지는 삭제하거나 수정해도 된다.

>> public

정적 파일이 저장되는 디렉터리로, 리액트로 작성한 스크립트를 실행할 대상이 되는 HTML 파일이 저장된다.
ex) index.html

>> src

실제 애플리케이션의 소스 코드가 저장되는 디렉터리이다. 리액트로 작성한 js 파일이나 css 파일, 이미지 파일 등이 저장된다.
ex) index.js, index.css, App.js etc..

앱 실행하기

프로젝트 폴더로 이동해서 yarn start 또는 npm start 명령어로 앱을 실행할 수 있다.

$ cd [프로젝트명] $ yarn start

브라우저에서 http://localhost:3000를 열면 아래와 같은 화면을 볼 수 있다.

---