[React] React의 기본 구조 - 리액트 들여다보기

[ React 프로젝트 생성 ]

 

 다음 블로그 포스팅을 참고해주세요:)

 

https://iridescent-zeal.tistory.com/192?category=1279256 

[React]리액트 React란? - 개발환경 세팅

 

 

 

 

[ React 디렉토리 구조 ]

 

 

★ node_modules 폴더

 설치된 패키지들과 이 패키지들이 활용될 때 사용되는 다른 패키지들이 함께 들어있는 폴더입니다. 

 

 설치된 패키지들은 package.json에서 확인할 수 있습니다. 

 

 

★ public 폴더

 static 파일들을 위한 폴더로 정적 파일(html, 이미지, ... )등이 위치한 폴더입니다. 

파일명	설명
favicon.ico	웹사이트 상단에 위치한 파비콘 이미지
index.html	가상 DOM을 위한 HTML 파일 메인 프로그램인 index.js에 대응되는 파일로 index.js에 의해 일어 와서 렌더링된 경과가 표시됨
manifest.json	앱 스토어없이 기기의 홈화면에 설치할 수 있는 웹 사이트

 

 

★ src 폴더

 리액트를 작업할 폴더입니다. 

파일명	설명
index.js	HTML 템플릿 및 JavaScript의 컴포넌트를 조합하여 렌더링하고 실제 표시함 ReactDON.render() 안에 보여주고 싶은 컴포넌트를 추가
App.js	컴포넌트를 정의하는 작업 파일로, 실제로 화면에 표시되는 내용은 여기에서 정의함
App.css	App.js에 대한 css 파일

 

 

 

 

[ Hello World! ]

// src/App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div>Hello World!</div>
  );
}

export default App;