React:: 폴더구조 살펴보기

index.html

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

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>//html으로 랜더링 됌 index.html 의 id root의 자식으로 포함
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals(); // 웹 퍼포먼스를 측정

• 리액트에서 jsx문법으로 만들어지는 것을 넣을 수 있는 (랜더링) 리액트 돔의 루트로 만들겠다

 <div id="root">
	 <div class="App"> //  index.js에서 App.js를 임포트 해서 사용
	 </div>
 
 </div>

package.json: 종속성 정의 Maven의 pom.xml과 비슷한 역할.

node_modules: 종속성이 다운로드 되는 폴더

React Initialization

• Public/index.html
  • 제일 처음으로 로드 되는 파일은 index.html이다
  • root div 를 포함하고 있다.
• src/index.js
  • 리액트 앱을 초기화하고 앱 컴포넌트 로드
  • 스타일 정보(css)도 포함하고 있다.
• src/App.js
  • 앱 컴포넌트를 위한 코드
  • src/App.css - 앱 컴포넌트 스타일링
  • src/App.test.js 단위테스트