A chapter for internalizing the component pattern, which you could call the infrastructure of React
https://www.youtube.com/watch?v=QG4RxNHz-bc&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=10
1. Goal of this chapter
To firmly internalize the pattern of creating components
2. Build the basic structure we want to implement
puer.html
<html>
<body>
<header>
<h1>WEB</h1>
world wide web !
</header>
<nav>
<ul>
<li><a href="1.html"></a> HTML</li>
<li><a href="2.html"></a> CSS</li>
<li><a href="3.html"></a> JS</li>
</ul>
</nav>
<article>
<h2> HTML </h2>
HTML is HyperText
</article>
</body>
</html>
3. puer.html to react
In app.js, use components to build the same page layout as puer.html.
app.js
import React, {Component} from 'react';
import './App.css';
//*컴포넌트들이 '들어가는(나열되는)' 영역
class App extends Component{
render(){
return (
<div className="App">
<Subject></Subject>
<Navigation></Navigation>
<Contents></Contents>
</div>
);
}
}
//컴포넌트(사용자정의 테그)를 만드는 코드영역
class Subject extends Component{
//class 안에서는 function을 생략할 수 있다.
render(){
return(
<header>
<h1>WEB</h1>
world wide web !
</header>
);
}
}
//컴포넌트(사용자정의 테그)를 만드는 코드영역
class Navigation extends Component{
//class 안에서는 function을 생략할 수 있다.
render(){
return(
<nav>
<ul>
<li><a href="1.html"></a> HTML</li>
<li><a href="2.html"></a> CSS</li>
<li><a href="3.html"></a> JS</li>
</ul>
</nav>
);
}
}
//컴포넌트(사용자정의 테그)를 만드는 코드영역
class Contents extends Component{
//class 안에서는 function을 생략할 수 있다.
render(){
return(
<article>
<h2> HTML </h2>
HTML is HyperText
</article>
);
}
}
export default App;
(Note) The code below is written in JSX, a language created by Facebook — React converts this part into plain JS under the hood.
<div className="App">
<Subject></Subject>
<Navigation></Navigation>
<Contents></Contents>
</div>
4. The benefit of this approach
Through this process, by letting us focus only on the component names, it dramatically lowers complexity.
