Reactのcomponentについて

Reactとは

HTMLのように1つの画面を複数の要素を組み合わせて表現可能な言語
この要素をReactではcomponentと言う

さらにReactは，componentの状態が更新されたら，その変更に合わせて画面を更新可能
この更新はstateを用いることで可能となる
つまり，ある画面において，変更があるコンポーネントのみにstateを持たせるとよい
また，stateを更新する際には，setStateを用いる

componentの種類

class componentとfunction componentの2つが存在する．
この2つについて紹介する

class component

-stateを持つことのできる
-event handlerを定義可能
-他のcomponetのpropとして情報を渡すことができる

典型的な構造

// ComponentもReactと一緒にインポートする
import React, { Component } from 'react';

//classの宣言
class コンポーネント名 extends Component {

  //Event handlerやstateを定義する場所

  //render()メソッド
  render() {

    //return
    return (

    );
  }
}
export default コンポーネント名; 

function component

stateを持つことができない

典型的な構造

// Componentをインポートする必要はありません。
import React from 'react';

// functional componentの宣言
const コンポーネント名 = () => {

  //return
  return(

  )
}

export default コンポーネント名;

文献

【無料！】 Reactの基礎を学んでTODOアプリを作ろう！
React初心者のためのハンズオン
初めてのReact「入門編」導入から基本まで〜TODOアプリを作ってを学ぼう！