初めてのREACT-v2

# 初めてのREACT-2

今回はボタンコンポーネントを作っていきたいと思います。
JSX,REACT,REACT DOMが既に入っているこちらのIDEを使って一緒に進めていくとやりやすいです。
https://jscomplete.com/playground

# ボタンコンポーネント

function Button() {
  const [counter, setCounter] = useState(0);
	return <button onClick={() => setCounter(counter+1)}>{counter}</button>; 
}

ReactDOM.render(
  <Button />, 
  document.querySelector('html'),
);

このコードはボタンをクリックすると数が増えていくものになります
まず一行目から解説していきたいのですが、Reactの関数コンポーネントは必ず大文字から始めないといけないルールがあります。
仮に'function button(){}'とした場合Reactは空の要素をレンダリングしてしまうのです。

# useStateとはなんぞ?

ReactにはFunction ComponentとClass Componentというコンポーネントの種類があります。

# Function Component

const MyComponent = (props) => {
  return(
    <hoge />
  )
}

# Class Component

class MyComponent extends React.Component{
	render(){
		return(
			<hoge />
		)
	}
}

Function Componentの方が完結に書かれているのがわかります。
一番の違いとしてはprops(状態オブジェクト)を触れることができるようになってます
この状態オブジェクトをフックできるのがReactが用意してくれたuseState()という関数です。
useState()には以下のような配列をいれることができます。

const [a,b] = useState(c);

aには状態オブジェクト(今現在の値)を持つことができ
bにはその状態オブジェクトを変更する関数をいれられ
cには初期の値を設定することが可能です。
試しに下記のようにbutton要素の中にcounterを置いてみるとcの値が表示できることが確認できるかと思います。

function Button() {
  const [counter, setCounter] = useState(0);
	return <button>{counter}</button>; 
}
ReactDOM.render(
  <Button />, 
  document.querySelector('html'),
);

# Reactのクリックイベントについて

Reactの場合でもhtmlのDOM APIと同じでonClickにて動作することができます。 通常のDOMバージョンと異なる点はこのonClick属性に関数をあてることができる点です。

function Button() {
  const [counter, setCounter] = useState(0);
	return <button onClick={() => alert(Math.random())}>{counter}</button>; 
}

ReactDOM.render(
  <Button />, 
  document.querySelector('html'),
);

なので上記のようにそのまま関数を直接いれることも可能です。

# まとめ

今回はボタンコンポーネントを利用して状態オブジェクトの操作を行いました。
IDEを使って確かめてみてください。