cmd 창에서 작업을 진행 합니다.
1. 폴더를 만듭니다.
D:\React>md my-app2
2. 만든 폴더로 이동합니다.
D:\React>cd my-app2
3. npm을 이용하여 프로젝트를 초기화 합니다.(package.json파일을 만듭니다.)
D:\React\my-app2>npm init -y
Wrote to D:\React\my-app2\package.json:
{
"name": "my-app2",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
4. 만들어진 파일 목록을 확인해 봅니다.
D:\React\my-app2>dir
5. 리액트 모듈을 설치 합니다. 3개의 모듈을 설치 합니다.
D:\React\my-app2>npm i react react-dom react-scripts
6. 설치된 모듈을 확인해 봅니다.
D:\React\my-app2>npm list
my-app2@1.0.0 D:\React\my-app2
+-- react-dom@18.3.1
+-- react-scripts@5.0.1
`-- react@18.3.1
7. public과 src 두개의 폴더를 작성합니다.
D:\React\my-app2>md public
D:\React\my-app2>md src
8. 현재 폴더에서 visual code를 실행 합니다.
D:\React\my-app2>code .
9. public 폴더에 index.html 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
|
cs |
10. src 폴더에 index.js파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
|
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.querySelector("#app"));
root.render(
<div>
<h2>My React Application!!!</h2>
</div>
);
|
cs |
11. package.json 파일의 script영역을 다음과 같이 변경하고 저장합니다.
|
1
2
3
4
5
|
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "react-scripts start",
"build": "react-scripts build"
},
|
cs |
12. visual code에서 [새 터미널] 창을 열고 "npm start"명령을 실행해서 애플리케이션을 시작합니다.
13. 다음은 실행 결과 입니다.
이렇게 수동으로 리액트 프로그램을 작성해 보았습니다.
create-react-app는 이렇게 수동으로 작성하는 것을 자동화 해준것 뿐입니다.
앞으로는 자동으로 애플리케이션을 작성하고 public 폴더와 src폴더의 모든 파일을 삭제한 후 index.html파일과 index.js파일을 만들면서 진행하도록 하겠습니다.
14. 다음과 같은 명령으로도 애플리케이션을 작성 가능합니다.
D:\React>npm init react-app my-app3 D:\React>cd my-app3 D:\React\my-app3>nmp start |
다음 두개의 명령은 동일합니다.
npm init react-app 애플리케이션이름
npx create-react-app 애플리케이션이름
'Front End > React' 카테고리의 다른 글
| [React Exam 16] 컴포넌트(Component)를 만들어 사용해 보자 (1) | 2024.10.16 |
|---|---|
| [React Exam 15] create-react-app로 Hello World출력하기 (1) | 2024.10.16 |
| [React Exam 13] create-react-app를 이용한 Application 작성하기 (0) | 2024.10.15 |
| [React Exam 12] HTML로 시작해보는 React 보너스(박스오피스 보기) (1) | 2024.10.15 |
| [React Exam 11] HTML로 시작해보는 React 보너스(천자문 보기 2) (0) | 2024.10.15 |
