Component 만들기
예제파일에서 pure.html 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<h1>WEB</h1>
world wide WEB
</header>
<nav>
<ul>
<li><a href="1.html">Html</a></li>
<li><a href="2.html">css</a></li>
<li><a href="3.html">java script</a></li>
</ul>
</nav>
<article>
<h2>HTML</h2>
html is hypertext markup language
</article>
</body>
</html>app.js 파일 들어가서
class를 만들어 component를 상속시킨 다음
render 함수안에
return 값을
pure.html의 각 태그
header, nav, article 별로 각각 Componet 생성
마지막 클래스에 추가
import React, { Component } from 'react';
class Subject extends Component {
render() {
return (
<header>
<h1>WEB</h1>
world wide WEB
</header>
);
}
}
class TOC extends Component {
render() {
return (
<nav>
<ul>
<li><a href="1.html">Html</a></li>
<li><a href="2.html">css</a></li>
<li><a href="3.html">java script</a></li>
</ul>
</nav>
);
}
}
class Content extends Component {
render() {
return (
<article>
<h2>HTML</h2>
html is hypertext markup language
</article>
);
}
}
class App extends Component {
render() {
return (
<div className="App">
<Subject></Subject>
<TOC></TOC>
<Content></Content>
</div>
);
}
}
export default App;npm run build 시키고
npx serve -s build
시킨다음 열면 반영..
근데 자동반영이 안되서 왜 그런지 모르겠다
vs 터미널
jin@jin-17Z990-R-AAC9U1:~/react-practice$ npm run build
> react-practice@0.1.0 build /home/jin/react-practice
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
39.87 KB (-11 B) build/static/js/2.558cbf11.chunk.js
777 B build/static/js/runtime-main.243fa92c.js
615 B (-180 B) build/static/js/main.ac460987.chunk.js
547 B build/static/css/main.5f361e03.chunk.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
bit.ly/CRA-deploy
jin@jin-17Z990-R-AAC9U1:~/react-practice$ npx serve -s build
npx: 78개의 패키지를 4.094초만에 설치했습니다.
┌─────────────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:5000 │
│ - On Your Network: http://10.58.1.142:5000 │
│ │
│ Copied local address to clipboard! │
│ │
└─────────────────────────────────────────────────┘
^C
INFO: Gracefully shutting down. Please wait...
jin@jin-17Z990-R-AAC9U1:~/react-practice$ ^C
jin@jin-17Z990-R-AAC9U1:~/react-practice$ npx serve -s build
npx: 78개의 패키지를 3.14초만에 설치했습니다.
┌─────────────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:5000 │
│ - On Your Network: http://10.58.1.142:5000 │
│ │
│ Copied local address to clipboard! │
│ │
└─────────────────────────────────────────────────┘
^C
INFO: Gracefully shutting down. Please wait...
jin@jin-17Z990-R-AAC9U1:~/react-practice$ npm run build
> react-practice@0.1.0 build /home/jin/react-practice
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
39.87 KB build/static/js/2.558cbf11.chunk.js
777 B build/static/js/runtime-main.243fa92c.js
735 B (+120 B) build/static/js/main.41e1366e.chunk.js
547 B build/static/css/main.5f361e03.chunk.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
bit.ly/CRA-deploy
jin@jin-17Z990-R-AAC9U1:~/react-practice$ npx serve -s build
npx: 78개의 패키지를 3.24초만에 설치했습니다.
┌─────────────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:5000 │
│ - On Your Network: http://10.58.1.142:5000 │
│ │
│ Copied local address to clipboard! │
│ │
└─────────────────────────────────────────────────┘
^C
INFO: Gracefully shutting down. Please wait...
jin@jin-17Z990-R-AAC9U1:~/react-practice$ npm run build
> react-practice@0.1.0 build /home/jin/react-practice
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
39.87 KB build/static/js/2.558cbf11.chunk.js
777 B build/static/js/runtime-main.243fa92c.js
727 B (-8 B) build/static/js/main.c670edba.chunk.js
278 B (-269 B) build/static/css/main.5ecd60fb.chunk.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
bit.ly/CRA-deploy
jin@jin-17Z990-R-AAC9U1:~/react-practice$ npx serve -s build
npx: 78개의 패키지를 3.932초만에 설치했습니다.
┌─────────────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:5000 │
│ - On Your Network: http://10.58.1.142:5000 │
│ │
│ Copied local address to clipboard! │
│ │
└─────────────────────────────────────────────────┘
