React Hello world

大綱

• React + Typescript 建置
• React Hello world，把 react run 起來
• React with API（axios, fetch）
• CSS（Tailwind）

React + Typescript 建置

透過 React 提供的 create-react-app 即可以快速的建立可以使用 TypeScript 的 React 專案，只需要在一般建立 React 專案的指令最後加上 --template typescript 即可。

$ npx create-react-app typescript-react-sandbox --template typescript

$ cd typescript-react-sandbox

比起原本的 react project 多了一個tsconfig.json檔，以及.js檔變成.tsx檔，除此之外沒有太大的區別

在 terminal 中，輸入指令npm start即可啟動專案

React with API（axios, fetch）

Fetch

fetch 是在 javascript 中內建的函式，用來發送 http request，fetch 會 return 一個 promise object

//in App.tsx
import React, { useEffect } from 'react';
import './App.css';

function App() {
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos')
      .then(response => response.json()) //將 response 的 body 轉為很像 json 的 object
      .then(res => {
        console.log(res);
      })
      .catch(err => console.log(err));
  }, [])
  return (
    <div className="App">
    </div>
  );

}

export default App;

useEffect 是 React 中的其中一種 hook，裡面的 function（第一個參數）會在第二個參數被修改時呼叫，或是 component 被 render 時（這裡指得是 App component） 因爲 fetch function 和 .json() 都會回傳 promise，使用 then 來承接 promise 成功時的情況，catch 承接 promise 失敗時的情況