React復習

8607 ワード
React テキストリンク

JSX構文

  • <div>ラベルは必ず閉じる.
  • <Hello />自己閉鎖
  • ラベルが2つ以上ある場合は、一番外側に<>小包.
    • <>
  <div>두개 이상의</div>
  <p>태그는 감싸자</p>
</>
  • JS値を表示する場合は中かっこで囲みます.
    • const name = '이렇게';
return <div>JS값 보여줄 땐, {name}</div>
  • JSX内部でスタイル値を使用する場合、起動するにはオブジェクト形式で入れなければなりません.
    • const style = {
	background: 'gray',
}
return (
	<div style={style}>
  		<div className="my-style">
          </div>
		</div>
)

    コメントの使用方法

    return (
	<div>
  		{/*주석은 이렇게*/}
  		<input
  			// or like this
  		/>
  	</div>
)

    条件付きレンダリング

    {isSpecial ? <b>*</b> : null}
  • isSpecial値が真であれば*を付け、そうでなければ何でもない.

    • useStateの使用

    import React, { useState } from 'react';

function Counter() {
const [number, setNumber] = useState(0);

const onIncrease = () => {
	setNumber(number + 1);
};
  
const onDecrease = () => {
	setNumber(number -1);
};
  
return (
	<div>
  		<h1>{number}</h1>
  		<button onClick={onIncrease}>+1</button>
		<button onClick={onDecrease}>-1</button>
	</div>
      )
}
  • number状態、この状態のデフォルト値は0です.
  • serNumberは現在の状態を更新する関数です.
    • const onIncrease = () => {
	setNumber(prevNumber => prevNumber + 1);
}
  • ここではprenumberとは言わず、コードがどのように動いているのか気になります.

    • Reactからの入力状態の管理

    Vue.jsの勉強で超簡単なタスク管理アプリを作ってみる
    200118_TIL