
AXIOSを使うと
APIに接続して、情報をJSON(ほぼテキスト)で取れるので、読み込み時間がめっちゃ少なくなる=サイトが早くなる!
やり方
手順1
コンポーネント、indexどのファイルでもいいのでaxiosを使うページで下記を書いてリアクトからaxiosを読み込み
import React, { useEffect, useState } from 'react'; import axios from 'axios';
手順2
こんな感じで、AXIOSを呼び出す、URLに自分の取りたいWPのAPIパスを入力
import React, { useEffect, useState } from 'react'; import axios from 'axios'; export default function Posts() { const [posts, setPosts] = useState([]); const [isLoading, setIsLoading] = useState(true); useEffect(() => { const URL = 'wpのAPのIURL' axios.get(URL) .then(res => { setPosts(res.data) setIsLoading(false) }) }, []) }
手順3
returnの中で、出力する情報を指定して呼び出す。
JSONの情報を確認しながら呼びたい情報をmap関数を使って出力できる {posts.map((post, index) => ( {post.title.rendered} ))} post.情報.(rendered) → 情報の部分が変える場所。 https://ドメイン/wp-json/ で中身を見れる。