리액트 앱을 생성해보자.

참고로 npx 란, 노드 환경의 패키지 설치 명령어이다. npm레지스트리내의 react 프로젝트 설치 패키지를 현재 디렉토리에 설치해준다.

이런 메세지와 함께,

이런 폴더 구조가 생성된다.

보면 바벨도 설치되어 있다.

웹팩도 있음

리액트 프로젝트의 디렉토리 구조

https://create-react-app.dev/docs/folder-structure/

여기를 참고해보자.

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

리액트 프로젝트는 기본적으로 위의 구조를 갖는다.

html 파일은 public 디렉토리에 들어간다. 이를 리액트에선 html들을 페이지 템플릿이라고 부른다.

css 와 js 파일들은 src디렉토리에 들어간다. 이 파일들이 html을 꾸며준다.

폴더 구조를 위해선 public과 src라는 디렉토리 명은 절대로 변경되면 안된다.

웹팩은 src디렉토리 내의 파일들을 번들링해준다고 함.. 따라서 src디렉토리 밖의 파일은 웹팩이 다루지 않는다. 리액트 소스코드들은 src에 위치할 것임.