React : 리액트 프로젝트 만들기
by 담담이담React 개발 기초
1) 프로젝트 세팅
// 폴더 이름에 해당하는 디렉토리에서 프로젝트를 만들겠다.
npm init react-app <폴더 이름>
// 현재 디렉토리에서 프로젝트를 만들겠다.
npm init react-app .
// 개발 모드 실행
npm run start
// 다운 받은 프로젝트 실행하기
npm install
2) 인덱스 파일이 하는 일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>주사위 게임</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
i) index.html
웹 브라우저에서 가장 먼저 실행되는 파일
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>안녕 리액트!</h1>);
ii) index.js
index.html이 열리고 나서 실행됨
react 코드 중 가장 먼저 실행되는 코드
import ReactDOM from 'react-dom/client';
react-dom이라는 패키지에서 디폴트로 익스포트 하는 객체를
ReactDom이라는 이름으로 임포트해서
이 객체의 createRoot라는 메소드로 html의 선택자를 선택해주고
render로 h1태그를 만들어서 화면에 그려준다.
보통 render 메소드는 js 코드에서 한 번만 실행된다.
'React' 카테고리의 다른 글
| React : 디자인 적용 방법 (1) | 2023.10.24 |
|---|---|
| React : State (1) | 2023.10.17 |
| React : Props (0) | 2023.10.17 |
| React : 컴포넌트 (0) | 2023.10.17 |
| React : JSX 문법 (1) | 2023.10.17 |
블로그의 정보
유명한 담벼락
담담이담