반응형
아래는 일반적인 HTML 코드 이다.
<html>
<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">JavaScript</a></li>
</ul>
</nav>
<article>
<h2>HTML</h2>
HTML is HyperText Markup Lang.
</article>>
</body>>
</html>
컴포넌트를 만들기 위해 App.js의 class를 다루면 될 것이다.
- 이 class 는 component를 상속받아 동작하는 클래스이다.
- 자바스크립트의 최근 버전에서는 class 안에 있는 function은 function을 적지 않고 사용한다.
- 컴포넌트는 반드시 하나의 최상위 태그로 시작해야 한다.
React가 컴포넌트화 된 것을 자동으로 웹브라우저가 인식할 수 있는 코드로 바꾸어 준다.
- 웹 브라우저는 React의 존재를 모른다고 생각해도 된다.
- console 에서 class를 실행시켜 보면 문법 오류가 발생한다.
- 이것이 리액트의 JSX 언어이다.
최종 변화된 코드이다
import React, {Component} from 'react';
import './App.css';
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">JavaScript</a></li>
</ul>
</nav>
)
}
}
class Content extends Component{
render(){
return(
<article>
<h2>HTML</h2>
HTML is HyperText Markup Lang.
</article>
);
}
}
class App extends Component {
render() {
return (
<div className="App">
<Subject></Subject>
<TOC></TOC>
<Content></Content>
</div>
);
}
}
export default App;반응형
'웹서비스 개발 > React-App 개발' 카테고리의 다른 글
| Component를 파일로 분리하기 (0) | 2021.04.25 |
|---|---|
| Props & React Developer Tools (0) | 2021.04.24 |
| CSS 수정 및 배포 (0) | 2021.04.24 |
| JS 코딩 (0) | 2021.04.22 |
| React 개발환경 구축 (0) | 2021.04.21 |
댓글