React book search page 1

反応...私たちは永遠に一緒にいます.
ノマド리액트 영화 웹 만들기講座を通じて、反応に触れることができます.すぐに理解できる学習内容ではないので、もう2回聞いて、講義に基づいてコードを書き、他のものを追加して、自分のものにします!」とちょっと恥ずかしかったアイテムを完成させました.
APIの魅力を感じました他のAPIの使用は非常に自由になった.初めて挑戦したのは音楽APIですこれは偶然の結果mockに失敗しましたjsonファイルを作成し、配列リストを抽出しましたが...まずスキップ
図書APIを手に入れたのは、本に興味があるからかもしれません.読書記録帳を作ろうと思っていたが、これも次の...まず、教保文庫、アラジン、ミリーの書斎、リディ書店などのプラットフォームをめくって、本を検索するページに参加して、反応項目を始めます!
グーグルがなかったら...本当に永遠にできないかもしれません.
ページ切り替えのホームページ、Join、Login、Searchページはルーティングで、残りはコンポーネントです.
デザインというか、残念なデザインで、とにかくプロジェクトが完成しましたー!

1. header

영화웹と同じです.構成が似ている.div内でflexを使用してレイアウトを行います.bookアプリとsearch、会員入力、登録フォームはspace-betweenと定められており、両側のmarginが正確に中央に位置しておらず、片側にmarginを少し増やしただけであることは残念です.home-searchボタンをクリックしてページをめくるときはまだいいですが、会員加入-ログインページに入るときは向いていません^ㅜ...
そしてメモを作って考えました.
頭の部分をnavにすればよかったのに.現在のページは上端ナビゲーションバーが固定された状態でスクロールされていますが、残念ながら持っていません.これは今度補充しましょう.

2. img-Slide

画像のスライド部分はミリーの書斎から取った.メイン画面を切り取ってPSで作っただけですいいえ、このように一気にスキップした部分が私の粗末なデザインを補うことができると思いますので、挑戦しました.方法は特に思いつかないのでCSS動画を使用しました.repeat-xによって横方向のみに流れ、いびきが速すぎて100000msに設定されている.

3.ココアAPI

NAVERAPIと悩んでやっと官カレーを手に入れた理由は….これはやりやすいし、いろいろな例があるので、私のような傀儡は見つけてやりやすいです.この近接性の面でKakaoは本当によくやった.これをもらって次はマップAPIに挑戦したい!
APIを使用するために、プロジェクト内にaxiosがインストールされている.

axios?

xiosはブラウザ、ノードです.js向けPromise APIを利用したHTTP非同期通信ライブラリ.すなわち、Ajaxとともに使用され、バックエンドおよびフロントエンドとの通信を容易にする.Javascriptには既にfetch apiがあるが,フレームワークでajaxを実現する際にaxiosを用いると考えられる.$ npm install axios

* 기본문법

axios({
url: 'https://test/api/cafe/list/today', // 통신할 웹문서
method: '', // 통신할 방식
data: { // 인자로 보낼 데이터
foo: 'diary'
}
});

4.図書を入れる

useStateを使用してリストを生成し、useEffectを使用して書目を受け入れる関数を作成します.ここでは,結果値が得られるまでasync-await非同期関数を用いて図書apiを修正した.

const Bestseller = () => {
  const [books, setBooks] = useState([]);

  useEffect(() => {
    getBooks();
  }, []);

  const getBooks = async () => {
    const params = {
      query: "민음사",
      sort: "recency",
      size: "10",
      target: "",
    };

    const {
      data: { documents },
    } = await bookSearch(params);
    setBooks(documents);
  };

queryに民音詞のみが入っている理由.多くの種類になっていないからです.すべての出版社のベストセラーを救おうとしたが、失敗した.検索も失敗しました.

{books.map((book, index) => (
          <Books
            key={index}
            author={book.authors}
            title={book.title}
            image={book.thumbnail}
          />

上で受信した関数はmap配列メソッドで呼び出され、割り当て値の配列のインデックスのみが呼び出されます.