100のプロジェクト40 -静的暗号データベースを作成することによって反応ルータを使用している実践

おい!私は、100を反応させる任務にいます.月8日終了のJSプロジェクト.あなたの質問があれば私のdev . toプロファイルまたは私の更新のために私のdevに従って、アウトに達すること自由に感じなさい.あなたのサポートに感謝!
今日の配備されたアプリケーションへのリンクLink
レポへのリンクgithub
あなたが反応アプリケーションを構築しているならば、あなたは別々のページを表示する簡単な方法を持っているように、ほとんどいつもいくつかのルートを構築する必要があるでしょう.これらの日の標準はreact-router-dom NPMパッケージ
このプロジェクトは、Ant DesignとLodashを使用して簡単なブログUIを構築します.あなたが最初からこれを構築したいならば、それは始まる最高の場所です.

反応ルータ

Router Routerはあなたのアプリケーションのコンポーネントへの人工ルーティングを作成するツールです.なぜ人工?よく、URLルートは本物です、しかし、反応は一つのページ・アプリケーションを作成するので、ページ自体はちょうど「URLがこのアドレスにあるとき、この成分を示すだけです」とあなたが言っているだけです.
このプロジェクトではreact-router-dom パッケージは、私は実際にそれをするための(素晴らしい)ドキュメントを読んでいた私は次のチュートリアルはかなり古いと非推奨のルーティングシステムを使用します.
まず、パッケージをファイルにインポートする必要があります.私はすべての記事のプレビューを表示する私のアプリのコンポーネントでこれをやった.以下はパッケージのインポート方法です.

import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";

インポートオブジェクトが利用できることに気づくでしょうaliasing “セクシー”に“セクシー”ブラウザールータの名前を変更する.
お使いのアプリケーションでルータを使用するには、まず最初にJSX要素を開き、ルータコンポーネントを作成します.スイッチを使用して、最初に一致するパスでコンポーネントを表示するようにReply Routerに指示します.この理由のために、我々は我々のインデックスページを底でリストします.

const App = () => {
  return (
    <div className="app_container">
      <Router>
        <Switch>
          <Route path='/post/:id'>
            <Post />
          </Route>
          <Route path='/'>
            <Posts />
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

あなたは、私たちがから持ってきた3つのコンポーネントのすべてを利用したことをここで見ることができますbrowser-router-dom . ルータは、それがルータであるということを知っていて、それに応じて振る舞うということを知っています、スイッチは、ルータに、それがpath 属性.ルート要素は、ルートにするパスを定義する場所です.次に、子要素がルート要素に与えられ、どの要素を表示したいかを指定します.
PATH '/'のインデックスページでは、投稿コンポーネントを示します.以下のようなデータを持つ可能性のあるすべての暗号の一覧を示します.

このコンポーネントでは、私たちのモックアップAPI、暗号化に関する情報で満たされたオブジェクトの配列を持つJSONファイルからデータをインポートします.我々は、模擬API配列の各オブジェクトをマップし、画面上に表示する私たちを使用してPostSnippet コンポーネント.これは昨日のプロジェクトでカバーされていたので、私は二度とそれをやり直すつもりはありません.しかし、そのためにJSXをチェックするためにGithubを見てください.また、私は非常にクールを使用してAntのデザインの中古コンポーネントを使用してNavbarを設定表示することができますtitle 属性.

正しいコンポーネントの表示

この時点で私は途方に暮れた.このチュートリアルでは、Request Routerを使用していました.実際には、:id ポストパスの変数は、私たちがどうにか、我々がポストの中にいるとき、それを得る必要があります.どうやってこれをダイナミックに行うことができますか?私たちは小道具を渡すことができますが、もし私が記事を持っている10000個の暗号がある場合?
反応ルータに入るuseParams() メソッド.インポート後useParams からのオブジェクトreact-router-dom パッケージのポストコンポーネントでは、次のようにメソッドを使用して、このページの実際の一意IDを取得できます.

import {useParams} from 'react-router-dom';
...

const postId = useParams().id;

これは実際のURLのパラメータを検索して、id . 私たちは、このIDを我々の模擬クリプトカルスAPIを通して検索し、正しい情報を見つけることができます.私は次にuseState and useEffect そのPostid変数の変更があるときはいつでも、ポストコンポーネントの状態を設定するためにフックを反応させます.ここでは、そのコンポーネントが私のように見えます.

import React, {useState,useEffect} from 'react';
import {Card,PageHeader} from 'antd';
import {useParams} from 'react-router-dom';
import api from '../mock_api';

const Post = (props) => {

  const postId = useParams().id;
  const [title,setTitle] = useState('');
  const [content,setContent] = useState('');
  const [imageUrl,setImageUrl] = useState('');

  useEffect(() => {
    let post = api[postId];
    setTitle(post.coin);
    setContent(post.description);
  },[postId])

  return (
    <div className="post_container">
      <div className="page_header_container">
        <PageHeader
          style={{
            border: '1px solid rgb(235,237,240)'
          }}
          title={title}
        />
      </div>
      <div className="post_content_container">
        <Card style={{marginTop: '20px'}} >
          {
            content.split('\n').map((textParagraph,idx) => {
              return <p key={idx}>{textParagraph}</p>
            })
          }
        </Card>
      </div>
    </div>
  )
}

export default Post;

また、昨日のチュートリアルでカバーされているAnt DesignからカードとPageHeaderコンポーネントを使用することもできます.また、Pagebreakがあるときはいつでも、読み取り可能な段落に記述を分割するためのMAPメソッドも使用できます\n テキストにエンコードされます.
特定の株式とクリプトの周りの今週の誇大宣伝のすべてで、私はそれが彼らの名誉でトップ5 Coindesk CryptoCurrencyの上で少しのデータベースをつくることが楽しいと思いました.
明日のダイナミックデータを見て!これ以上の模擬API!