React(Udemy)
code: JavaScript
const { name, age } = myProfile; // 値の分割代入
const message3 = 名前は${name};
console.log(...arr1); // 1 2と出力される
const arr6 = ...arr4; // ...で全く同じ配列をコピーできる console.log(arr7);
for (let index = 0, index< nameArr.length; index++){
console.log(nameArrindex); }
const nameArr2 = nameArr.map((name) => {
return name;
})
const newNumArr = numArr3.filter((num) => {
return num % 2 === 1;
})
nameArr.map((name, index) => {
console.log(${index + 1}番目は${name}です)
})
const newNameArr = nameArr.map(() => {
if(name === "じゃけえ"){
return name
} else {
return ${name}さん
}
})
console.log(newNameArr);
const val1 = 1>0 ? 'trueです' : 'falseです'; // 三項演算子
const num = "1300";
console.log(num.toLocaleString());
const checkSum = (num1, num2) => {
return num1 + num2 > 100 ? '100を超えています!' : '今日範囲内です';
}
console.log(checkSum(40, 50));
import { render } from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
render(<App />, rootElement);
useState、useEffect
code: TypeScript
/* */
import React, { useState, useEffect} from "react";
import { VFC } from "react;
const App = () => {
const num, setNum = useState<number>(0); // stateとして使用する変数名と実行するための関数を分割代入 const onClickCountUp: VFC = () => {
setNum(num + 1);
};
const onClickShowFlag: VFC = () => {
setFaceShowFlag(!faceShowFlag);
};
useEffect(() => {
if(num > 0){
if(num % 3 === 0){
faceShowFlag || setFaceShowFlag(true); // 左のfaceShowFlagがfalseの時右が実行される
}else {
faceShowFlag && setFaceShowFlag(false);
}
}
}, num); // numに関心をもつ、第二引数の変数が変化した時だけ動く return (
<>
<button onClick={onClickCountUp}>カウントアップ</button>
<button onClick={onClickShowFlag}>on/off</button>
<P>{num}</p>
{ faceShowFlag && <p>😉</p>}
</>
);
};
export default App;