Reactの基本学習
仕事でreactを使用する事になったので、インフラの勉強と並行してこちらも手をつける。
基本構文
import React from "react";
class App extends React.Component {
ここにJSを書く
constructorを書く(stateの処理)
methodを定義する。
render() {
return(
jsx部分を記述する。
);
}
}
どうやらjsとjsx(htmlと同じような感じで記述する)を同時に記述できるような感じっぽい。
jsで動きをつけるためのイベントとstateについて
イベントはクリックとかで、記述した処理を着火させる。
ex)
<button onClick={() => {処理}}>
stateはイベントで着火させたものの処理を書く。
ex)
下準備としてstateを準備する。
constructor(props) {
super(props);
this.state = {name: "hogehoge" }
}
以上で準備完了。
<h1> こんにちは、{ this.state.name } さん。</h1>
<button onClick={() => {console.log({name: "こんにちはhogehoge"})}}>hogehoge</button>
流れとしては、下準備して、表示させる部分を書いて、変更の記述をする流れ。
忘れてた事
constructor()について
rubyでいうinitializeみたいな感じ。
インスタンスを生成するときに実行される。
引数を指定する事で、それをconstructorの中で使用できる。
参考:progate