React 입문 - 기본 파일 구조

<파일구조>

■ index.html

리액트가 렌더링되는 기본 html파일, 

하나의 html 파일로 동작하는 단일 페이지 애플리케이션(SPA)의 루트

 

리액트가 여기에 필요한 js파일을 삽입

<div id=“root”></<div> 요소가 있으며, 여기에 React 컴포넌트가 렌더링 됨

 

■ index.js 

애플리케이션의 진입점(entry point) 

ReactDOM을 사용하여 App 컴포넌트를 <div id=“root”></<div>에 렌더링 

 

■ index.js 

메인 컴포넌트 파일, 

다른 하위 컴포넌트 포함하고 애플리케이션 구조 정의 

주요 레이아웃이나 라우팅 등을 설정 

 

■ App.js 

메인 컴포넌트 파일

다른 하위 컴포넌트를 포함하고, 

애플리케이션 구조를 정의 

레이아웃이나 라우팅 설정

 

■ components/ChildComponents.js

App.js 내에서 사용하는 자식 컴포넌트 파일

하위 컴포넌트를 정의해 ui 구성함

 

□ index.css

전역 스타일 정의