React基本 #JavaScript

JSX

FaceBookが開発したjavascript拡張機能。HTMLタグをjavascriptの中に書ける。実際はBabelを使ってHTMLの部分をjavascriptのプログラムに置き換えている

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <div id="app"></div>
    <script src="app.js"></script>
  </body>
</html>

// jsxを使用できるようにreactのモジュールをimport
import React from "react";
import ReactDOM from "react-dom";

// 描画関数のReactDom.renderにh1タグを渡して'app'に描画する
const app = document.getElementById('app');
ReactDOM.render(<h1> Hello </h1>, app);

注意点

コンポーネント名は大文字から始める
class属性は「className」と書く
returnで戻すタグは一つ。複数返したい場合はdivとかでくくる
閉じタグがない場合はエラー
属性値は""でくくる。テンプレート文字列(``)は指定できない
{}でくくるとjavascriptが使用できる

import React from "react";
import ReactDOM from "react-dom";

// 関数コンポーネント。大文字から始める
const App = () =>{
  // class属性はclassName
  // 属性値は””でくくる
  // 戻すタグはdivなどで一つにまとめる
  return (
    <div>
      <h1 className="greeting"> Hello </h1>
    </div>
  )
}

const app = document.getElementById('app');
ReactDOM.render(<App>, app);

コンポーネント

独立した再利用可能な部品として分けられたもの

関数コンポーネント

// JSXの項で描いたやつ
const App = () =>{
  return (
    <div>
      <h1 className="greeting"> Hello </h1>
    </div>
  )
}

クラスコンポーネント

// importしたReactモジュールのComponentを継承する
// renderメソッドに描画したい内容を定義する
class App extends React.Component {
  render(){
    return(
      <div>
        <h1 className="greeting"> Hello </h1>
      </div>
    )
  }
}

renderメソッドについて

renderは以下のタイミングでReactが自動的に呼び出す

javascriptがブラウザにロードされた直後
コンポーネントのpropsが変更された時
コンポーネント内でsetState()メソッドを実行してstateが変更された時

※setState()を複数回呼んだからといって毎回render呼び出しされるわけではないみたい

setStateを複数回実行してもrenderは1回しか呼ばれない
 【翻訳記事】関数型setStateはReactの未来だ

State

コンポーネントが保持する状態、値のこと

注意点

stateはthis.stateというインスタンス変数に格納される
stateの更新は必ずthis.setState()メソッドを使用する
this.setState()はrender()メソッドで呼び出してはいけない。this.setState()によってrender()が呼び出され再帰呼び出しエラーとなってしまうため


class Human extends React.Component {
  constructor() {
    super();
    // stateの初期処理
    this.state = { name: '' }
  }

  setName(){
    const name = this.getName()

    this.setState({ 
      name: name
    });
  }
   ...

  render(){
    return(
      <div>
        <h1>{this.state.name}</h1>
      </div>
    )
  }
}

Props

コンポーネントに渡されるパラメータのこと

class Human extends React.Component {
   ...

  render(){
    return(
      // Greetingコンポーネントのnameにパラメータを渡す
      <Greeting name={this.state.name}>
    )
  }
}

const Greeting = (props) => {
  const greeting = this.currentTimeGreeting()

  return (
    <div>
      <h1>私は{props.name}です{greeting}!</h1>
    </div>
  )
}

参考

公式ドキュメント
 setStateを複数回実行してもrenderは1回しか呼ばれない
 【翻訳記事】関数型setStateはReactの未来だ