1.4~5 React masterClass (CoinStore)

16766 ワード
react-query googlefont styled-reset coinpaprikaAPI styled components React typescript JavaScript テキストリンク
TSを利用してWinterを修復する難点は、objectのタイプやcontextAPIなどの状態管理が指定されていないため、多くの不要なプロセスを受けてから、また受講を開始する必要があることです...すべてが解決した...やはり私はこのような不便を見逃すことはありません.
ReactMasterClassの最初のタスクは、https://api.coinpaprika.com/が提供するAPIを使用してTSを使用してCoinStoreを作成することです.
コイン情報を受信して展示しているページです.
まず、styled-resetを使用せず、styled-resetのgithubからコードをコピーし、cssをリセットします.
(出典:https://www.npmjs.com/package/styled-reset)
フォントはGooglefontのNanum Pen Scriptを使用しています.
(出典:https://fonts.google.com/specimen/Nanum+Pen+Script?subset=korean)
色はflatuicorsが推奨する色の組み合わせを参照しています.
(出典:https://flatuicolors.com/)
私が望むcssに合わせるためにGlobalstyleというstyled-componentを作成し、resetコードとフォントを追加しました.フォントの置き方は後でポスターで個別に処理します.(単純)
では、簡単なcss設定が終了すると、apiから正式にデータが受信されます.
まずはRoutertsx上にホームページのCoinsルータと個別のコインルータを作成します.
function Router() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/:coinId">
          <Coin />
        </Route>
        <Route path="/">
          <Coins />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

export default Router;
Coinsはすべてのコインに関する情報と
(Coins : https://api.coinpaprika.com/v1/coins )
コインには個別のコインについての詳細が表示されます.
(Coin : https://api.coinpaprika.com/v1/coins/{coin_id} ,
price : https://api.coinpaprika.com/v1/tickers/{coin_id} )
まずはコインから作ると.
userEffectを使用してapiを接続し、stateを作成して、最初のレンダリング時にデータを受信します.jsとの違いは,stateを初めて定義する際にstateのタイプを明確にしなければならないことである.
コンソールウィンドウでapiが受信したデータを検索し、ステータスに入る値のタイプを理解して指定します.
コインのデータのタイプを示すインタフェースを作成し、const[congions,setCoins]=usState(後で習ったreact-queryは、後で交換してあげます)
interface CoinProps {
  id: string;
  name: string;
  symbol: string;
  rank: number;
  is_new: boolean;
  is_active: boolean;
  type: string;
}

const [coins, setCoins] = useState<CoinProps[]>();
  
useEffect(() => {
    (async () => {
      const response = await fetch("https://api.coinpaprika.com/v1/coins");
      const json = await response.json();
      setCoins(json.slice(0, 50));
      setLoading(false);
    })();
  }, []);
また、データのload値を受信したかどうかを確認するとbooleanタイプのstateも作成され、trueではload中にデータが解放され、falseではデータが解放されます.
受け取ったコインのデータが多すぎますか?slcie.map(()=>{})による裁断
cf) .わあ.違いはTSです.そう言えば必ずありますか?なくても、あなたを可能にします.
  const [loading, setLoading] = useState(true);

  return (
    <Container>
      <Header>
        <Title>코인</Title>
      </Header>
      {loading ? (
        <Loader>Loading...</Loader>
      ) : (
      {coins?.slice(0, 100).map(
      (coin)=> <div>{coin.name}</div>
      )
      })}
    </Container>
  );
今ではstyled-componentできれいな装飾を行い、https://cryptoicon-api.vercel.app/api/icon活動場所を表す銅貨の画像を追加します.
アプリケーションは背景色などを使用します.jsではThmeProviderがRouterを囲みます.
ThemeProviderはstyled-conentが提供するモジュールで、テーマとしてproperが必要です.
前述したようにstyled-componentのDefautThemeを使用して値を作成します.
import { DefaultTheme } from "styled-components";

// ! theme 값 지정
export const theme: DefaultTheme = {
  bgColor: "#808e9b",
  textColor: "#d2dae2",
  accentColor: "#ffdd59",
};
この値を使用するには、styled-componsesのtypeに追加する必要があります.
import "styled-components";

// ! 여기에 테마의 속성값 타입을 지정해준다.
declare module "styled-components" {
  export interface DefaultTheme {
    textColor: string;
    bgColor: string;
    accentColor: string;
    // borderRadius: string;

    // colors: {
    //   main: string;
    //   secondary: string;
    // };
  }
}
そしてアプリtsxでかばうと.
function App() {
  return (
    <>
      <ThemeProvider theme={theme}>
        <GlobalStyle />
        <Router />
      </ThemeProvider>
    </>
  );
}
完了!

このような画面を作ることができます.
次に、個々のコインに関するデータを表示するルータを作成します.
このルータのパスは/:coinIdです.コインからチェーンに移動することができます.
react-routerが提供するlinkはtoをaタグとするhrefを使用しており、ここにはURLだけでなく、データ送信も含まれている.関数もできます!
(注:https://v5.reactrouter.com/web/api/Link)
<Link
	to={{
	pathname: `/${coin.id}`,
	state: { name: coin.name },
	}}
>
同様に、データを送信し、受信したコンポーネントでreact-routerが提供するuseLocationを使用することによって、データにアクセスすることができる.
(注:https://v5.reactrouter.com/web/api/Hooks/useLocation)
受信したデータの値にtypeを指定し、useLocationを使用してデータを受信できます.
また,userParamsを用いてURLのparamsを知ることができる.
interface CoinProps {
  coinId: string;
}
interface StateProps {
  name: string;
}

const { coinId } = useParams<CoinProps>();
const { state } = useLocation<StateProps>();
今これを利用します.
Coin : https://api.coinpaprika.com/v1/coins/{coin_id} ,
price : https://api.coinpaprika.com/v1/tickers/{coin_id}
私が受け取るデータ.
今回はreact-queryを使用してデータを受信し、react-queryを使用してデータを受信する利点は、コードがより簡潔でcashingが自動的に行われ、データが受信されるとurlが変更されてもデータが消えないことです.
使用方法:
yarn add react-query
また、有名なライブラリにはtypeがあります.
yarn add @types/react-query
react-queryの使用
QueryClient()を作成し、ThemeProviderを使用するようにパッケージし、そのコンポーネントはreact-queryを使用できます.
import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";

const queryClient = new QueryClient();

function App() {
  return (
    <>
      <QueryClientProvider client={queryClient}>
        <ThemeProvider theme={theme}>
          <GlobalStyle />
          <Router />
        </ThemeProvider>
        {/* //! 이걸 사용해서 캐시에 뭐가 저장되어있는지 확인 할 수 있다 */}
        <ReactQueryDevtools initialIsOpen={true} />
      </QueryClientProvider>
    </>
  );
}
また、ここではReactQueryDevtoolsというdevtoolsも提供されており、追加すると現在react-queryでキャッシュされているデータが表示されます!

現在、データをロードする場所でreact-queryを提供するhook userQueryが使用されています.
公式ホームページ上のuseQueryの使用例を以下に示します.
(注:https://react-query.tanstack.com/quick-start)
const { isLoading, error, data } = useQuery('repoData', () =>
     fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
       res.json()
     )
   )
componenetから取得したくない場合は、別の取得ファイルを作成します.
// api.ts
// !fetcher function 모음

const BASE_URL = `https://api.coinpaprika.com/v1`;

export function fetchCoinInfo(coinId: string) {
  return fetch(`${BASE_URL}/coins/${coinId}`).then((res) => res.json());
}

export function fetchCoinPrice(coinId: string) {
  return fetch(`${BASE_URL}/tickers/${coinId}`).then((res) => res.json());
}
コインもtsxで
  const { isLoading: infoLoding, data: info } = useQuery(
    ["info", coinId],
    () => fetchCoinInfo(coinId),
    { refetchInterval: 5000 }
  );
  const { isLoading: tickersLoading, data: priceInfo } = useQuery(
    ["tichers", coinId],
    () => fetchCoinPrice(coinId)
  );
このように使えます.
ここで、userQueryは一意のキー値とfetch関数を受信し、objは選択的に受信することもできる.
戻り値は、Loading状態を知らせるisLoading値と取得したデータを返します.
cf)エラーが発生した場合もエラー値が返されます.詳しくはreact-queryで整理しましょう
これでコインで働いた国で働く必要はありません.(fetchが完了すると、保存したobjにすぐにデータが戻り、loadのような状態も必要ありません.)
  const [coins, setCoins] = useState<CoinProps[]>([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    (async () => {
      const response = await fetch("https://api.coinpaprika.com/v1/coins");
      const json = await response.json();
      setCoins(json.slice(0, 50));
      setLoading(false);
    })();
  }, []);
こんなハーモニー.
const { isLoading : loading, data : coins } = useQuery<CoinProps[]>("allCoins", fetchCoins);
こうなります.お金さえ出して.素晴らしいですね.
受信したデータに重複する名前がない場合(ES 6構文)、両方のデータが受信された場合にのみ変更してロードを完了します.
const loading = infoLoding || tickersLoading;
ここもstyled-componentで飾ると

データがこんなによく伝わってきた!
今回の学習の核心は

  • react-routerの詳細機能(linkにpathを書いたのか...公式ドキュメントを読むのか...)と役に立つhook useParams、useLocation.
    新しいバージョンがある以上、react-router公式ドキュメントを読んで、また勉強して整理する必要があると思います.

  • react-queryという素晴らしい技術を学びました!でも今は「こんな風に書いてあったのか」くらいしか知らないので、私にはそうではなく、これも公式文書を読んで勉強しなければなりません...後は…^^英語を一生懸命勉強しなければならない.

  • TSの使い方、、、、、と...みんな...?OBjのtypeを指定するのは難しいですが、consoleウィンドウをうまく利用すれば簡単な方法が学べますし、後で自動的に完成する方法があるので、しっかり勉強しましょう!TSの多くの疑問が解決したので、聞いてから冬に一度応用してみましょう.そして私も私のページもずいぶん成長すると思います!
    • 次のポスターでは、ApexChartを使用してグラフを飾り、Recoilを使用してステータス管理を行い、暗いモード、光モードを作成することを宣伝します.よし、よし、ますます面白くなってきた.
    ps.
    今日も起きられない...明日は必ず起きます.JBJたまご、目を開けたら歯を磨いて、すぐ出かけます!
    私の英語の勉強はあまりよくないと思います.だから、私は計画が必要だと思います.ちょうど楊・金とYoutuberという英語学習の専門家を知っています.日常の任務などの計画を立ててアップロードした学習者に感謝しています.だから、参加することにしました.明日の朝6時に参加するなら直接やるか翌日から!毎日2時間英語から1日を始めましょう.
    そして道亨がどのように親に相談するのか予想して、このままではいけません!!私はお金を持って仕事をしていますが、子供の成績はあまり悪くないです.母に宿題をしっかりチェックさせなければなりません.
    今日も運動できなかったのかな…?体もだんだん筋肉がなくなってきた正直、だるくなったように顔を洗って、腕立て伏せを60個、サレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレレそれをするときちょうど10分これをしないと時間じゃなくて意志力がない!!!
    1つの文字列の中の文字がすべて別の文字列に現れるかどうかを判断する(HashSet実装)
    [白俊]12946:六角板