[생활코딩-React] 컴포넌트 만들기 2

[출처 : Youtube - 생활코딩]

https://youtu.be/J3WQKH35f0M?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi

 

 

src/App.js

import './App.css';
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">JavaScript</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;