feat(webpack-react): read *.json file

webpack-react/app/osm-query.json

@@ -0,0 +1,20 @@
+{
+    "queries": [
+	{
+	    "title": "Second hand shops",
+	    "query": "https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];relation(62531);map_to_area;nwr[shop=second_hand](area)->.shops;nwr[second_hand=yes](area)->.secondHands;(.shops;.secondHands;);out body center qt;"
+	},
+	{
+	    "title": "Organic bakeries",
+	    "query": "https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];relation(62531);map_to_area;nwr[shop=bakery][organic=yes](area);out body center qt;"
+	},
+	{
+	    "title": "Organic only shops",
+	    "query": "https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];relation(62531);map_to_area;nwr[shop][organic=only](area);out body center qt;"
+	},
+	{
+	    "title": "Public bookcases",
+	    "query": "https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];relation(62531);map_to_area;nwr[amenity=public_bookcase](area);out body center qt;"
+	}
+    ]
+}

webpack-react/app/pages/home.jsx

@@ -1,12 +1,30 @@
 import React from 'react';
 import Hello from '../components/hello';
 import '../style.css';
+
+// import JSON osmQueryJson
+import jsonOsmQuery from '../osm-query.json';
+
 const Home = () => {
+
+    const rryOsmQuery = jsonOsmQuery.queries;
+
     return (
 	<>
 	    <h2>Home</h2>
 	    <h3>(React.js Lambda Function Component)</h3>
 	    <Hello msg="Hello World!" />
+      <div className='container'>
+        <p>Blog RryOsmQuery</p>
+        <div className='rryOsmQuery'>
+          {rryOsmQuery.map((post) => (
+            <div className='post' key={post.id}>
+              <p className='title'>{post.title}</p>
+              <p className='content'>{post.query}</p>
+            </div>
+          ))}
+        </div>
+      </div>
 	</>
     );
 }