メモ（React I）

Reactを読み込んでrenderにjsxを記述

• JSXとJS ( JavaScript ) の記述部分は分かれている
• renderメソッドのreturn内のみ、JSXで記述する必要がある
• JSXで記述された要素はブラウザに表示される

import React from 'react';

class App extends React.Component{
  render(){
    return (
      <h1>Hello React</h1>
    );
  }
  
}

export default App;

returnの外で定数に色々入れて、jsxでは定数を書く

• なんか、srcで"とか'がいらなかったぞ・・。理屈がよくわからん

import React from 'react';

class App extends React.Component {
  render() {
    const name="にんじゃわんこ";
    const imgUrl="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/ninjawanko.png";
    
    return (
      <div>
        <h1>{name}</h1>
        <img src={imgUrl} />        
      </div>
    );
  }
}

export default App;

stateの定義、表示、変更（クリックしたら表示を変更）

• ユーザーの動きに合わせて変わる値のことを、Reactではstateと呼ぶ
• Reactでは、stateの値に直接代入することで値を変更してはいけない
• 値を変更したい場合は、setStateを使う
• onClickの最初のCが大文字

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: 'にんじゃわんこ'};
  }
  
  handleClick(name){
    this.setState({name: name});
  }
  
  render() {
    return (
    	<div>
    	  <h1>こんにちは、{this.state.name}さん！</h1>
        <button onClick={() => {this.handleClick('ひつじ仙人')} }>ひつじ仙人</button>
        <button onClick={() => {this.handleClick('にんじゃわんこ')} }>にんじゃわんこ</button>
        
      </div>
    );
  }
}

export default App;

stateの定義、表示、変更（カウントアップ）

• なんか知らんが＋＋が使えんでずっと引っかかってた。どうしてくれるん？

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 0};
  }
  
  handleClick(){
    this.setState({count:this.state.count+1});
  }
  
  render() {
    return (
      <div>
        <h1>
          {this.state.count}
        </h1>
        <button onClick={()=>{this.handleClick()} }>+</button>
      </div>
    );
  }
}

export default App;