Add Drupal JSON API connection with BasicPage and ScrollSpy components

package.json

@@ -21,6 +21,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
+  "proxy": "http://localhost:8080",
   "eslintConfig": {
     "extends": [
       "react-app",

src/App.js

@@ -1,3 +1,5 @@
+import React, {useEffect, useState} from 'react';
+
 import './overrides.scss';
 import "bootstrap/dist/js/bootstrap.bundle.min";
 
@@ -31,6 +33,7 @@ import Balkon from './Pages/Radio/Balkon';
 import Linux from './Pages/Linux/Linux';
 import Footer from './UI/Footer';
 
+import BasicPage from './Pages/BasicPage';
 
 
 function App() {
@@ -60,6 +63,8 @@ function App() {
             <Route exact path='/pages/radio/components' element={<Components />}></Route>
             <Route exact path='/pages/radio/balcony' element={<Balkon />}></Route>
             <Route exact path='/pages/linux' element={<Linux />}></Route>
+
+            <Route exact path='/pages/basic' element={<BasicPage id="505e15ab-668e-4574-ab42-3f58030c9dea"/>}></Route>
         </Routes>
 
         <Footer />

src/Pages/BasicPage.js

@@ -0,0 +1,45 @@
+import React, {useState, useEffect} from 'react';
+
+import ScrollSpy from '../UI/ScrollSpy';
+
+const BasicPage = (props) => {
+    const [error, setError] = useState(null);
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [items, setItems] = useState([]);
+
+    useEffect(() => {
+        fetch("http://localhost:8080/jsonapi/node/page/" + props.id)
+          .then(res => res.json())
+          .then(
+            (result) => {
+              setIsLoaded(true);
+              setItems(result);
+            },
+            (error) => {
+              setIsLoaded(true);
+              setError(error);
+            }
+          )
+      }, [])
+    
+      if (error) {
+        return <div>Error: {error.message}</div>;
+      } else if (!isLoaded) {
+        return <div>Loading...</div>;
+      } else {
+        console.log(items);
+        return (        
+            <div className='row'>            
+                <ScrollSpy/>
+                <div className="scrollspy-example col-6 offset-3" data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" tabIndex="0">
+                    <section id="list-skills" className="content-section">
+                        <h2 className="text-primary">{items['data']['attributes']['title']}</h2>
+                        <hr/>
+                    </section>
+                </div>
+            </div>
+            )
+        }
+}
+
+export default BasicPage;

src/UI/ScrollSpy.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const ScrollSpy = () => {
+    return (        
+        <div className="sidebar col-3 position-fixed">
+            <div id="list-example" className="list-group">
+                <a className="list-group-item list-group-item-action list-group-item-primary" href="#list-skills">Skills</a>
+            </div>
+        </div>
+    )
+}
+
+export default ScrollSpy;
+
+
+