React Folder Structure

1. npx create-react-app my-app 을 한 후 의 폴더 구조 입니다. 

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

 

2. 처음 npm start를 했을 때 나오는 화면은 src/ app.js 파일 입니다.  

 

3. app.js는 index.js에 App 컴포넌트로 들어가 있는 형태입니다. 

document.getElementById('root')) 는 public/index.html의 id="root "를 그려줍니다. 

 - public/index.html   -> page template

 - src/index.js  -> Javascript entry point

 

 public/
    index.html
    favicon.ico

-  public 폴더에 있는 파일들은 오직은 public/index.html만 쓰일 수 있습니다. 

 

src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

- Webpack에 의해 관리가 되는 파일들은 src 폴더 안에 있는 것만 관리가 되기 때문에 css와 image 파일들은  src 폴더에 넣어주어야 합니다. 그렇지 않으면 webpack에 의해 관리가 되지 않습니다. 

 

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

Folder Structure | Create React App