![見出し画像](https://assets.st-note.com/production/uploads/images/105079154/rectangle_large_type_2_942eb1c4ff14378452fdf62f076c4264.png?width=1200)
Photo by
akarisakasu
【IT】ReactでのJSONデータの表示(JSONPlaceholder)
皆さま
こんにちは
今日は、ReactでJSONデータを表示します。
データは、「JSONPlaceholder」を使用します。
今回の内容
1.プロジェクト準備(下準備含む)
2.プログラム実装
3.動作確認
1.プロジェクト準備(下準備含む)
前回の下準備を参考に
「npx create-react-app my-test-json001」で
プロジェクトを作成し、不要ファイル削除しクリーンアップします。
2.プログラムを実装します。
今回は、useEffect、useState、fetchを用いて実装します。
「App.js」
import './App.css';
import { useEffect, useState } from "react";
function App() {
const initialURL = "https://jsonplaceholder.typicode.com/users";
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchUserData = async () => {
let res = await getUser(initialURL);
// ユーザをロード
loadUser(res);
// 3秒経ったら表示
setTimeout(() => {
console.log('sleep終了')
setLoading(false);
},3000)
};
fetchUserData();
}, []);
// jsonplaceholderからユーザを取得
const getUser = (url) => {
return new Promise((resolve, reject) =>{
fetch(url)
.then((res) => res.json())
.then((data) => {
resolve(data)
console.log('getUser=',data)
});
})
}
// users配列にユーザデータをロード
const loadUser = async (data) => {
fetch(initialURL)
.then((res) => {
return res.json();
})
.then((data) => setUsers(data));
}
console.log('コンソールログ=',users)
return (
<div className="App">
{loading? (
<h1>ロード中ーーーー</h1>
) : (
<>
<h1>JSON-APIテスト</h1>
<hr/>
{users.map((userdata) => (
<div key={userdata.id}>
<h2>user-id:{userdata.id}</h2>
<h3>name:{userdata.name}</h3>
<h4>mail:{userdata.email}</h4>
<hr/>
</div>
))}
</>
)}
</div>
);
}
export default App;
3.動作確認
ファイルの編集が終わったら「npm start」にて起動するか確認します。
3秒待ってから
![](https://assets.st-note.com/img/1683552075452-9H9GJI7yBP.jpg?width=1200)
テストユーザが表示されます。
![](https://assets.st-note.com/img/1683552131295-vumpJB8r6q.jpg?width=1200)
では
この記事が気に入ったらサポートをしてみませんか?