reactを基本的な書き方をまとめてみました

昨今流行っているフロントのフレームワークのreactを使ってみたいと思い、テキストエディタだけで出来る範囲で簡単にWebページを作ってみましたので、基本的なことをまとめたいと思います。

ちゃんと開発する場合は npmでcreate-react-appを入れてビルドして配置することになりますが、まずはどういうものか理解する程度であればhtmlファイル1つで実装することができます。

【参考】作ってみたWebページ

react + bulmaで住宅購入時のローンや予算を見積もるサイトを作ってみました。htmlファイル1つで全て実装していますので参考になればと。
https://mussyu1204.myhome.cx/fp/budget_estimate/index.html

1. reactを使うための準備

htmlのheadタグから以下のようにreactのjsファイルを読み込めば使えるようになります。

<!-- react -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

2. 基本的な書き方

2-1. コンポーネントクラスを作る

まず、React.Componentを継承したクラスを作ります。最低限必要なものはrender()関数で、これはコンポーネントのHTML部分をJSXで記述したものを返却する関数になります。
あとは、stateなどの初期化を行う際にはconstructor関数を定義します。

class TestComponent extends React.Component {
  // コンストラクタ、stateの定義など
  constructor(props){
    super(props);
    this.state = {}; //stateを定義
  }

  // コンポーネントのDOMを定義(JSXで記載)
  render(){
    return(
      <h1>This is test</h1>
    )
  }
}

2-2. コンポーネントを埋め込む

次にコンポーネントをHTMLに埋め込みます。ReactDOM.render関数を呼び出し、第一引数にコンポーネントクラス、第二引数に埋め込み先のDOMエレメントを指定します。これで、コンポーネントがタグに埋め込まれ画面に表示されます。

<div id="testComponent"></div>
<script>
ReactDOM.render(
  <TestComponent />,
  document.getElementById('testComponent')
);
</script>

以上がReactを動かすための最低限の記述になるかと思います。基本的にこのコンポーネントを組み合わせて画面を作っていくことになります。

コンポーネントにはライフサイクルもありますので、ライフサイクルの説明や細かいノウハウなどを次に書いていきます。

3. コンポーネントのライフサイクル

3-1. マウント(Mounting)
ReactDOM.render()で埋め込まれたり、他のコンポーネントから埋め込まれた状態です。最初にconstrunctorが実行されるため、stateの初期化とイベントハンドラのバインドを実施します。
次にrender()が実行され、最後にComponentDidMount関数が実行されます。 ComponentDidMount関数ではデータフェッチやタイマーのセットなどを行います。

3-2. 更新(Updating)
コンポーネントはporpsやstateが変化したときなどに更新処理が行われ画面が再描画されます。render()が実行され、次にcomponentDidUpdate()が実行されます。

3-3. アンマウント(Unmounting)
コンポーネントがDOMから削除されるとcomponentWillUnmount()が実行されます。 componentWillUnmount関数ではタイマーなど不要なものを破棄してメモリ開放などを行います。

4. propsとstateについて

Reactコンポーネントはpropsとstateで状態を管理します。propsやstateで管理している値が更新された場合、コンポーネントが更新され再描画が行われます。

4-1. props

propsは他のコンポーネントから呼び出された際に渡された値を保持します。
以下のサンプルのように、コンポーネントを埋め込む際のタグの属性で値を渡すことができます。(name = Taro)
コンポーネントからはthis.props.nameのように参照できます。(propsはコンストラクタの引数にもなっています)

class SampleComponent extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

ReactDOM.render(
  <SampleComponent name="Taro" />,
  document.getElementById('root')
);

4-2. state

stateはそのコンポーネント内ので管理される状態(変数)となります。コンストラクタで初期化し、setStateで状態を変更することができます。

class SampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {name: 'Taro'}; //stateを初期化
  }

  handleChange(e) {
    //stateの更新はsetStateを使う
    this.setState({name: e.target.value}); 
  }

  render() {
    return 
      <div>
        <input onChange={this.handleChange} value={this.state.name} />
        <h1>Hello, {this.state.name}</h1>
      </div>
    );
  }
}

5. ノウハウ

5-1. render()で複数のルートタグを返す方法

コンポーネントクラスのrender()関数に記述するHTMLのルートタグは1つである必要があります。2つ以上のルートタグがある場合は以下のような場合は「SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag」といったエラーとなります。

// エラーとなるパターン
render(){
  return(
    <h1>This is test1</h1>
    <h2>This is test2</h2>
  )
}

ただし、以下のように<React.Fragment>タグをrootタグにすることで複数タグをルートとすることができます。

render(){
  return(
    <React.Fragment>
      <h1>This is test1</h1>
      <h2>This is test2</h2>
    </React.Fragment>
  )
}

5-2. render()で返すタグのclass属性はclassNameとする。スタイルの記述方法もHTMLとは異なる。

render関数が返すHTMLはJSXで記述するため、class属性はclassNameとする必要があります。また、style属性の指定方法も通常のHTMLとは異なります。

render(){
  return(
    <div className="xxx" style={{width:"100px", height:"100px"}}>This is test1</div>
  )
}

5-3. render()で返すタグにコメントを記述する

render()で返却するJSX内のコメントは{/* */}で括ります。

render(){
  return(
    <div>
      <h1>test</h1>
      {/* コメント */}
    </div>
  )
}

5-4. reactコンポーネントの処理でDOM要素にアクセスする方法

render()で返却するタグの中に以下のようにref属性を付けてコンポーネント内変数にDOMエレメントを格納することで、コンポーネント内からDOM要素にアクセスできます。

this.errorMessage.innerHTML = "半角数字で入力してください";

render(){
  return(
    <div>
      <p ref={(input) => {this.errorMessage= input} }></p>
    </div>
  )
}

5. onClickなどのイベントを記述する方法

コンポーネント内にイベントハンドラ関数を定義し、コンストラクタ内でバインドします。あとはrender内のJSXのinputタグのonChangeなどにイベントハンドラ関数を指定することで、イベント処理を実装できます。

class SampleComponent extends React.Component {
  constructor(props) {
    super(props);
    //コンストラクタでイベントハンドラをバインド
    this.sampleOnClick= this.sampleOnClick.bind(this);
  }

  //イベントハンドラ
  sampleOnClick(e) {
  }

  render() {
    return 
      <div>
        <input onChange={this.sampleOnClick} />
      </div>
    );
  }
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です