ReactでJSONをインポートする方法

1. JSONファイルの作成: まず、JSONデータを含むファイルを作成します。例えば、data.jsonという名前のファイルを作成しましょう。

{
  "name": "John",
  "age": 30,
  "city": "Tokyo"
}

2. JSONのインポート: Reactコンポーネント内で、作成したJSONファイルをインポートします。

import data from './data.json';
// dataオブジェクトのプロパティにアクセスする例
console.log(data.name); // 結果: John
console.log(data.age); // 結果: 30
console.log(data.city); // 結果: Tokyo

3. データの使用: インポートしたJSONデータをReactコンポーネント内で使用することができます。

import React from 'react';
import data from './data.json';
const MyComponent = () => {
  return (
    <div>
      <h1>{data.name}</h1>
      <p>Age: {data.age}</p>
      <p>City: {data.city}</p>
    </div>
  );
};
export default MyComponent;

このように、Reactでは簡単にJSONデータをインポートして使用することができます。上記の手順に従って、JSONデータをReactプロジェクトに統合してみてください。