反応開始−反応前に先端樹人を開発する

¥npmプロジェクト作成

npm init -y

¥localhost:5000 Webサーバで実行

npx serve

反応ライブラリをCDNとして使用

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

反応する前に先端樹人を開発する

HTML構造化文書

を使用
スタイル

CSSの

Javascript操作DOM

を使用
サンプルコード

HTMLで構造をキャプチャします.

<div id="root"></div>
<button id="btn_plus">+</button>

CSSを使用してスタイルを適用します.(headラベルのstyleラベルを使用)

// 모든 태그에 대해서 margin, padding, border를 0으로
* {margin: 0; padding: 0; border: 0}

// 200px 너비의 초록색 배경 박스
#root p {
  color: #fff;
  font-size: 20px;
  background-color: green;
  text-align: center;
  width: 200px;
}

// 200px 너비의 빨간 배경 박스
#btn_plus {
  background-color: #f00;
  border: 2px solid #000;
  font-size: 15px;
  width: 200px
}

Javascriptを使用してDOMを操作します.

// Id가 root인 DOM 요소 내의 Element를 선택
const root = document.querySelector('#root')

// Id가 btn_plus인 DOM 요소 내의 Element를 선택
const btn_plus = document.querySelector('#btn_plus')

// 변수 i에 초기값 0을 할당
let i = 0

// root 요소 내에 p 태그 요소를 추가해 초기 뷰(?) 생성
root.innerHTML = '<p>init : 0</p>'

// btn_plus를 클릭하면 함수를 실행시키는 이벤트를 연결
btn_plus.addEventListener('click', () => {
  // Template literals를 이용해 1씩 증가하는 i를 보여줌
  root.innerHTML = `<p>init : ${++i}</p>`
})

テキスト内容、innerTextとinnerHTMLの違い