React 프로젝트 구성

리액트 프로젝트

프로젝트 에디터

Visual Studio Code 사용
https://code.visualstudio.com/

프로젝트 설치

npx create-react-app react-tutorial

react-tutorial이라는 이름으로 프로젝트를 구성한다.

💡터미널 단축키 Ctrl + `

프로젝트 실행

npm start

Create React App

프로젝트 구성요소

public/index.html 실제 브라우저에서 보여지는 파일
앞으로 만들 리액트의 내용은 index.html내부에 포함되어있다.

index.html

<div id="root"></div>

index.html을 보면 id가 root로 지정되어있는 div태그가 있다. 이 부분이 리액트가 렌더링 되는 부분이다.

package.json

설치된 의존성을 리스트와 명령어 등이 저장되어있는 파일이다.

READEME.md

프로젝트의 내용을 서술 할 수 있는 마크업 파일로 github에 올리게 되면 프로젝트 하단에 설명을 보여줄 수 있다.
(자동적으로 생성되지 않는파일이다)

초기 구성

src 파일을 제거하고 새롭게 src 폴더를 생성하고 index.js파일을 추가해 준다.