Progate React

Progate

React I

  • HTML like な JSX を用いる。HTML との違いは以下の通り。
    • 複数の要素がある場合は、<div></div> で囲む
    • コメントアウトは {/* と */} で囲む
    • <img src='URL'> のように閉じタグがないやつは <img src='URL'/> とする。
    • JSX のクラス属性は className='クラス名' (CSSはclassと同じ)
  • React の記述ファイル
// app.js
import React from "react"; // react のインポート
class App extends React.Component { // React.Component クラスを継承する
  render() { // render メソッドを定義(このなかにreturnを書く)
    const text = "Hello World!";
    const imgUrl = "https://...";
    return ( // return の内側には JSX, 外側には JavaScript を書く
      <h1>{text}</h1> // JSX の内部での参照は {変数}
      <img src={imgUrl}/> // タグ内にも持ち込める
    );
  }
}
export default App; // クラスをエクスポートする
  • イベントの設置
<button onClick={アロー関数とか}>クリック時の動作を規定</button>
  • state の定義
    • 変数の保存, 参照, 変更
class App extends React.Component {
  constructor(props) {
    super(props); // props はこのクラスを呼び出す側で指定するやつ
    this.state = {count: 5}; // state はオブジェクトとして定義する
  }
  counterSetting(num) {
    this.setState({count: num}) // メソッド化できる
    // this.state.count = 0 のような代入による変更は不可
    // 変更はリアルタイムに反映される
  }
  render() {
    return (
      <h1>{this.state.count}</h1> {/* 参照 */}
      <button onClick={()=>{this.counterSetting(0)}}>0セット</button>
    );
  }
}

React II

  • 構成: App.js は index.js を介して index.html に挿入される
    • CSS も有効
/index.html
/src/index.js
/src/components/App.js
/stylesheet.css
// /src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App'; // クラスのインポート
// インポートしたクラスの return の中身を id が 'root' な位置に突っ込む.
ReactDOM.render(<App />, document.getElementById('root'));
<link rel="stylesheet" href="stylesheet.css">
<!-- /index.html の一部 -->
<div id='root'></div>
<script src="bundle.js"></script>
  • React は1つのクラス(Hoge)が1つのコンポーネントになるような使い方をする。
    • Hoge クラスを App.js でインポートして, App クラスの render の return 内で <Hoge /> で Hoge で return されたものが埋め込まれる。(当然複数回呼び出せる)
  • 呼び出す側(App.jsのreturn内)でpropsを指定可能。
<Hoge name="hoge" age=25 />
{/*改行すると見やすい*/}
<Hoge
  name={ValueDefinedInThisFile}
  age=5
/>
  • 呼び出される側(Hogeクラス)では this.props.age などとして使える。
  • return の中で return を呼び出せる
render(){
    const list = ["hoge", "fuga"];
    return(
        <div>
            { list.map((item)=>{
                return(<p>{item}</p>)
            })}
        </div>
    )
}

React III

  • 変数にJSXを格納
render() {
  let text;
  let modal
  if(this.state.isDisplay){
    text=<p>変数にJSXを格納可能</p>;
    modal=(
      <div>
        <p>複数行にわたるときは括弧で囲んで代入(returnも同じ)</p>
      </div>
    );
  }
  return(
    <div>
      <h2>{text}<h2> {/*ブロック内変数なのでthisはいらない*/}
      {modal} {/*空なら表示されない*/}
    </div>
  )
}

React IV

  • HTML と JSX の違い
    • <input> : <input/>
    • <textarea></textarea> : <textarea/>
  • イベント
    • <form onSubmit={()=>{}}> </form>
    • <button onClick={()=>{}}> </button>
    • <input onChange={()=>{}}> 変更が起きた時の処理

入力値をstateにセットする

<input value={this.state.inputValue} onChange={(event)=>{
  this.handleMethod(event);
}}>
handleMethod(event) {
  const inputString = event.target.value;
  this.setState({inputValue:inputString});
}
constructor(props) {
  super(props);
  this.state = {inputValue:""};
}
  • ab と入力するとき
    1. inputValueの初期値が""なので, 入力欄は空
    2. a を押した時点で即座に
    3. 入力欄が空欄から a に変わったので, onChange イベントが反応して event.target.value が "a" になる
    4. これがinputStringに代入されてinputValueにセットされる
    5. すると, 入力欄の値が a になる。(inputValueの更新をしないと, 入力欄は元の空欄に引き戻される)
    6. さらに b を押した時点で
    7. 入力欄が a から ab に変わったので, event.target.value が ab になる。
    8. 以下略