🐶どうして反応するの?

すぐにコードを見てみましょう.

const number = document.getElementById('number');
const increase = document.getElementById('increase');
const decrease = document.getElementById('decrease');
increse.onclick()=>{
  const now = parseInt(number.innerText, 10);
  number.innerText = current + 1;
};
decrease.onclick()=>{
  const now = parseInt(number.innerText, 10);
};
  

上のコードを説明します
+1を押してidがnumberのdomを選択し、属性に1を追加します.
上のコードは簡単でユーザとのコミュニケーションはないが,これらのインタラクションはしばしば発生し,またこれらのイベントも多様化して増加し,管理が必要な状態値も多様化し,DOMも多様化するため,メンテナンスや管理が困難になる.
しかし、反応の中では、上のコードのようにDOMをどうするかというルールを作るのではなく、最初からすべてを消して、最初からすべてを創造します.

🐶props

propsはpropertiesの略です.
任意の値を構成部品に渡す必要がある場合はpropsを使用します.

👍hello素子を使用するとnameという値が渡されます

👍App.js

import React from 'react';
import Hello from './Hello';

function App(){
  return(
  	<Hello name="yeongjae" />
    );
}
export default App

🍎Hello.js

import React from 'react';

function Hello(props){
  return
  	<div>안녕하세요 {props.name}</div>
}
Hello.defaultProps ={
  name: '이름 없음'
}
export default Hello;

ここでdefaultPropsは、propsに値がない場合に設定されるデフォルト値です.

🍎state

前のpropsは親が子供にあげるときに使います
また、子供の立場ではpropsは読むために使われています.
今回はこれとは少し違うstateについてご紹介します.
stateは内部で変更できます.
変更時には常にsetStateという関数が使用されます.
変更が必要な場合は、stateは内部で変更できます.componentというsetState()関数を使用します.

👌stateを使用して+1/-1ボタンを作成する

App.js

import React, { Component } from "react";
import Counter from "./Counter";

class App extends Component{
  render(){
    return <Counter />
  }
  }
  export default App;

Counter.js

import React, {Component} from "react";

class Counter extends Component{
  state = {
    number : 0
  };

handleIncrease = () =>{
  this.setState({
    number: this.state.number+1
  });
};

handleDecrease = () =>{
  this.setState({
    number: this.state.number-1
  });
};
render(){
  <div>
    <div>값: {this.state.number}</div>
  	<button onClick={this.handleIncrease}>+</button>
  	<button onClick={this.handleDecrease}>-</button>
   </div>
  );
}
}
export default Counter;

コードの説明後、handleIncrease、handleDecrease関数を宣言し、+1、-1機能を実行できるようにします.
ここで重要なのはnumber値が変化するのでsetStateに設定する必要があります.
buttonではonClickというイベントを使用して、それぞれの関数を適用します.

上記の結果が出力され、+/-のボタンをクリックするたびに1が追加され、1が削除されます.

💯上のコードで3週間歩いたのですが...

進度と実力はやはりずいぶん遅れている.心配しないと言えば嘘ですが、焦るとかそういうよりは自分のペースで概念をじっくり見て、整理して、ゆっくりでも確実にやります!
一番大切なのは楽しい気持ちを保つことです!ほほほ