nesl-archive / react-sample

[Sample] React ts

react-sample

about

u can getting started with Create-React-App.

this project init follow

npx create-react-app axxon-viewer --template=typescript
cd axxon-viewer
npm i node-sass
npm i --save-dev @types/react @types/react-dom
npm i --save-dev @types/react-router @types/react-router-dom

ref

• https://zh-tw.coderbridge.com/series/baa71d69e008468ea0c69a4f98882863/posts/6f6d77167394498f958b402200d3e137
• https://ithelp.ithome.com.tw/articles/10205439
• https://ithelp.ithome.com.tw/users/20105162/ironman/2776?page=2

note

• useState(): 更新值，並刷新頁面。 用法:

const [uuidString, setUuidString] = useState('')
setUuidString("123")
console.log(uuidString)

• useRef(): 更新值，但不刷新頁面。 用法:

const countRef = useRef(0)
countRef.current +=1
console.log(countRef.current)

• useEffect(function,[]): 訂閱[]中的值並執行 function。用法:

const [uuidString, setUuidString] = useState('')
const countRef = useRef(0)

useEffect(():void=>{
   async function fetch() {
       const response= await axios.get("http://httpbin.org/uuid")
       setUuidString(response.data["uuid"])
   }
   fetch()
}, [countRef.current])

countRef.current +=1
console.log(uuidString)