Skip to content

Commit 0926b35

Browse files
Hwang-Kyu-CheolHwang-Kyu-Cheol
committed
First React Project
1 parent 0e44c64 commit 0926b35

File tree

6 files changed

+170
-58
lines changed

6 files changed

+170
-58
lines changed

‎public/pure.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Example</title>
5+
</head>
6+
<body>
7+
<header>
8+
<h1>WEB</h1>
9+
<p>World Wide Web</p>
10+
</header>
11+
12+
<nav>
13+
<ul>
14+
<li><a href="1.html">HTML</a></li>
15+
<li><a href="2.html">CSS</a></li>
16+
<li><a href="3.html">JavaScript</a></li>
17+
</ul>
18+
</nav>
19+
20+
<article>
21+
<h2>HTML</h2>
22+
<p>Its HTML</p>
23+
</article>
24+
</body>
25+
</html>

‎src/App.css

Lines changed: 0 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1 @@
1-
.App {
2-
text-align: center;
3-
}
41

5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
8-
}
9-
10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
14-
}
15-
16-
.App-header {
17-
background-color: #282c34;
18-
min-height: 100vh;
19-
display: flex;
20-
flex-direction: column;
21-
align-items: center;
22-
justify-content: center;
23-
font-size: calc(10px + 2vmin);
24-
color: white;
25-
}
26-
27-
.App-link {
28-
color: #61dafb;
29-
}
30-
31-
@keyframes App-logo-spin {
32-
from {
33-
transform: rotate(0deg);
34-
}
35-
to {
36-
transform: rotate(360deg);
37-
}
38-
}

‎src/App.js

Lines changed: 83 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,88 @@
1-
import React from 'react';
2-
import logo from './logo.svg';
1+
import React, { Component } from 'react';
2+
import Header from './components/Header';
3+
import Navigation from './components/Navigation';
4+
import Article from './components/Article';
35
import './App.css';
46

5-
function App() {
6-
return (
7-
<div className="App">
8-
<header className="App-header">
9-
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>src/App.js</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
21-
</header>
22-
</div>
23-
);
7+
class App extends React.Component {
8+
constructor(props){
9+
super(props);
10+
this.state = {
11+
mode: 'Welcome',
12+
subject: {
13+
title: "WEB",
14+
sub: "World Wide Web"
15+
},
16+
Welcome: {
17+
title: "Welcome",
18+
description: "Welcome to Web"
19+
},
20+
selected_contents: {
21+
id:0
22+
},
23+
contents: [
24+
{
25+
id: 1,
26+
title: "HTML",
27+
description: "Its HTML"
28+
},
29+
{
30+
id: 2,
31+
title: "CSS",
32+
description: "Its CSS"
33+
},
34+
{
35+
id: 3,
36+
title: "JavaScript",
37+
description: "Its JavaScript"
38+
}
39+
]
40+
};
41+
}
42+
43+
render() {
44+
let _title, _desc;
45+
if(this.state.mode === 'Welcome'){
46+
_title = this.state.Welcome.title;
47+
_desc = this.state.Welcome.description;
48+
} else {
49+
for(let i = 0; i<this.state.contents.length; i++){
50+
if(this.state.contents[i].id === this.state.selected_contents){
51+
_title = this.state.contents[i].title;
52+
_desc = this.state.contents[i].description;
53+
break;
54+
}
55+
}
56+
}
57+
return (
58+
<div className="App">
59+
<Header
60+
title={this.state.subject.title}
61+
sub={this.state.subject.sub}
62+
onChangePage={function(){
63+
this.setState(
64+
{
65+
mode: 'Welcome'
66+
}
67+
)
68+
}.bind(this)}
69+
></Header>
70+
<Navigation
71+
contents={this.state.contents}
72+
onChangePage={function(id){
73+
this.setState(
74+
{
75+
mode: 'Read',
76+
selected_contents: Number(id)
77+
}
78+
);
79+
}.bind(this)}
80+
></Navigation>
81+
<hr></hr>
82+
<Article title={_title} description={_desc}></Article>
83+
</div>
84+
);
85+
}
2486
}
2587

2688
export default App;

‎src/components/Article.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React, { Component } from 'react';
2+
3+
class Article extends Component {
4+
render() {
5+
return (
6+
<article>
7+
<h2>{this.props.title}</h2>
8+
<p>{this.props.description}</p>
9+
</article>
10+
);
11+
}
12+
}
13+
14+
export default Article;

‎src/components/Header.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { Component } from 'react';
2+
3+
class Header extends React.Component {
4+
render() {
5+
return (
6+
<header>
7+
<h1><a href="/" onClick={function(event){
8+
event.preventDefault();
9+
this.props.onChangePage();
10+
}.bind(this)}>{this.props.title}</a></h1>
11+
<p>{this.props.sub}</p>
12+
</header>
13+
);
14+
}
15+
}
16+
17+
export default Header;

‎src/components/Navigation.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React, { Component } from 'react';
2+
3+
class Navigation extends Component {
4+
render() {
5+
const contents = this.props.contents;
6+
7+
let lists = [];
8+
for(let i = 0; i<contents.length; i++){
9+
lists.push(
10+
<li key={contents[i].id}>
11+
<a
12+
href={"/contents/"+contents[i].id}
13+
data-id={contents[i].id}
14+
onClick={function(event){
15+
event.preventDefault();
16+
this.props.onChangePage(event.target.dataset.id);
17+
}.bind(this)}
18+
>{contents[i].title}</a></li>);
19+
}
20+
21+
return (
22+
<nav>
23+
<ul>
24+
{lists}
25+
</ul>
26+
</nav>
27+
);
28+
}
29+
}
30+
31+
export default Navigation;

0 commit comments

Comments
 (0)