다음과 같은 Application을 만들어 보도록 하겠습니다.
1. create-react-app를 이용하여 app001 프로젝트를 만듭니다.
1) 프로젝트 작성 D:\React> npx create-react-app app001 2) 폴더이동 D:\React> cd app001 3) visual code 실행 D:\React\app001> code . 4) public 폴더와 src폴더의 모든 파일을 삭제합니다. |
2. 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>React Hello World</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
|
cs |
3. src 폴더에 다음과 같이 index.js파일을 생성합니다.
|
1
2
3
4
5
6
7
8
9
10
|
import React from 'react';
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.querySelector("#app"));
root.render(
<React.StrictMode>
<h1>Hello World!!!</h1>
<h2>Hello React!!!</h2>
</React.StrictMode>
);
|
cs |
4. visual code에서 [새 터미널] 창을 열고 "npm start"명령으로 애플리케이션을 시작합니다.
5. 내용을 가운데 정렬해 보도록 하겠습니다. src폴더에 다음과 같이 index.css파일을 만들어 줍니다.
|
1
2
3
4
5
6
|
body {
margin: 0;
}
#app {
text-align: center;
}
|
cs |
6. index.js파일의 상단에 "import './index.css'"를 추가해 줍니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css' // 내용 추가
const root = ReactDOM.createRoot(document.querySelector("#app"));
root.render(
<React.StrictMode>
<h1>Hello World!!!</h1>
<h2>Hello React!!!</h2>
</React.StrictMode>
);
|
cs |
7. 실행화면입니다.
8. 이미지를 추가해 보도록 하겠습니다. 다음 이미지를 다운로드 받아 src폴더에 넣습니다.
9. index.js 파일을 다음과 같이 수정합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css'
import map from './Korea.svg' // 내용 추가
const root = ReactDOM.createRoot(document.querySelector("#app"));
root.render(
<React.StrictMode>
<img src={map} style={{height:'60vmin'}}/> {/* 다음 이미지 태그 추가 */}
<h1>Hello World!!!</h1>
<h2>Hello React!!!</h2>
</React.StrictMode>
);
|
cs |
10. 실행화면입니다.
'Front End > React' 카테고리의 다른 글
| [React Exam 17] 컴포넌트(Component)에 값을 속성으로 전달하기 (0) | 2024.10.21 |
|---|---|
| [React Exam 16] 컴포넌트(Component)를 만들어 사용해 보자 (1) | 2024.10.16 |
| [React Exam 14] 수동으로 React Application 작성하기 (0) | 2024.10.16 |
| [React Exam 13] create-react-app를 이용한 Application 작성하기 (0) | 2024.10.15 |
| [React Exam 12] HTML로 시작해보는 React 보너스(박스오피스 보기) (1) | 2024.10.15 |
