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