react 기초

react

react
react-dom

webpack -
babel -

index.html 에서 html 코드를 짜는것이 아니라
기본 틀만 만들어 놓고
js 파일로 데이터를 입력 시켜주는 것이다.

리액트 설치

npx create-react-app blog

react cdn링크

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

babel 링크

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

컴포넌트 BABEL

<div  id="root">

</div>

<script  type="text/babel">

//react : react 문법

//react-dom : 바뀐값을 찾아서 그 영역만 바꿔주는 아이

// content 컴포넌트

class  Tables  extends  React.Component{

render(){

return(

<table>

<Subject/>

<Content/>

</table>

)

}

}

class  Subject  extends  React.Component{

render(){

return(

<tr>

<td>번호</td>

<td>제목</td>

<td>작성자</td>

<td>작성일</td>

<td>조회수</td>

<td>::</td>

</tr>

)

}

}

class  Content  extends  React.Component{

render(){

return(

<tr>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

<td>1</td>

</tr>

)

}

}

</script>