생활코딩

Coding Everybody

코스 전체목록

닫기

컴포넌트 만들기

강의소개

사용자 정의 태그인 컴포넌트를 만드는 방법을 소개합니다. 

 

 

 

강의

 

 

 

소스코드

변경점

import logo from './logo.svg';
import './App.css';
function Header(){
  return <header>
    <h1><a href="/">WEB</a></h1>
  </header>
}
function Nav(){
  return <nav>
    <ol>
      <li><a href="/read/1">html</a></li>
      <li><a href="/read/2">css</a></li>
      <li><a href="/read/3">js</a></li>
    </ol>
  </nav>
}
function Article(){
  return <article>
    <h2>Welcome</h2>
    Hello, WEB
  </article>
}
function App() {
  return (
    <div>
      <Header></Header>
      <Nav></Nav>
      <Article></Article>
    </div>
  );
}

export default App;

 

 

 

 

라이브 데모

 

댓글

댓글 본문
  1. 남윤서
    2024 07 13
  2. 야생의코린이
    2024-06-13 완료
  3. 감자순대
    24.05.23
  4. Jaehong Jun
    23.11.28
  5. 진뒹
    230831
  6. 코딩두
    23.07.14
  7. 어흥
    230710
  8. 파시
    230706
  9. RoRA
    2023-04-15 완료
  10. 당당
    2022.09.21
  11. Yujin Kim
    필요하신 분 계실까해서 영상 요약된 노트 공유드립니다 :)
    [1강] 수업소개: https://bit.ly/3dhgpzI
    [2강] 실습환경 구축: https://bit.ly/3BmMnm6
    [3강] 소스코드 수정방법: https://bit.ly/3QPTA3X
    [4강] 컴포넌트 만들기: https://bit.ly/3xrB8aQ

    나머지 노트는 공부하는대로 업데이트할게요 ~~
  12. MelonMusk
    08/18
  13. 정스
    완료당
  14. toonfac
    220704 오전 12시 54분 완료
  15. 마스터하자
    핵심 React를 사용하면서 생산성을 높일 수 있다.
  16. 프렌치카페
    2022.06.18 component
  17. choi
    2022.4.6완료
  18. LLLEE
    22.04.02 수강
    사용자 정의 태그 = component
    component를 만들어 생산성과 유지, 보수를 획기적으로 높인다.
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기