From 90f9e7616ff134b14f9c438f31b67e0b7445d7a8 Mon Sep 17 00:00:00 2001 From: KrothuTheCoder Date: Tue, 27 Feb 2024 11:26:10 +0000 Subject: [PATCH] update the code to use components for loading the image --- package.json | 3 +-- public/index.html | 9 ++++--- src/donkey.js | 17 +++++++++++++ src/go.js | 30 ++++++++++++++++++++++ src/images/donkey.jpg | Bin 0 -> 12285 bytes src/index.js | 57 +++++++++++++----------------------------- 6 files changed, 72 insertions(+), 44 deletions(-) create mode 100644 src/donkey.js create mode 100644 src/go.js create mode 100644 src/images/donkey.jpg diff --git a/package.json b/package.json index 7c34a32..ade191a 100644 --- a/package.json +++ b/package.json @@ -2,8 +2,7 @@ "name": "react-api-demo", "version": "1.0.0", "description": "A React application that calls a C# API backend", - "main": "src/index.js", - "script": "./src/index.js", + "scripts": { "start": "node app.js", "build": "react-scripts build", diff --git a/public/index.html b/public/index.html index 3b116c7..d291cf3 100644 --- a/public/index.html +++ b/public/index.html @@ -3,12 +3,15 @@ + Simple React Page -Daddy's Donkey + + +
-Inky Pinky Ponky
+ diff --git a/src/donkey.js b/src/donkey.js new file mode 100644 index 0000000..0d0cfa8 --- /dev/null +++ b/src/donkey.js @@ -0,0 +1,17 @@ +import React, { useState } from 'react'; + +const ImageComponent = () => { + + return ( +
+ Inky Pinky Ponky
+ Daddy bought a donkey
+ Donkey died
+ Daddy cried
+ Inky Pinky Ponky
+ +
+ ); +}; + +export default ImageComponent; \ No newline at end of file diff --git a/src/go.js b/src/go.js new file mode 100644 index 0000000..4750b25 --- /dev/null +++ b/src/go.js @@ -0,0 +1,30 @@ +import React, { useState } from 'react'; + +const DataFetchComponent = () => { + const [apiData, setApiData] = useState(''); + + const fetchData = async () => { + + fetch('https://fd-sandbox.hakabo.com/api/data', { + method: 'GET', + headers: { + 'Ocp-Apim-Subscription-Key': '1193b86901a44fa181cb016bfd85089f' + }, + }) + .then(response => response.json()) + .then(data => { + setApiData(data); + }) + .catch(error => console.error('Error fetching data:', error)); + + }; + + return ( +
+ + {apiData &&

{apiData}

} +
+ ); +}; + +export default DataFetchComponent; \ No newline at end of file diff --git a/src/images/donkey.jpg b/src/images/donkey.jpg new file mode 100644 index 0000000000000000000000000000000000000000..f17abdb83fd6f9addda88a00e073f3dd4e4385eb GIT binary patch literal 12285 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 response.json()) - .then(data => this.setState({ data })) - .catch(error => console.error('Error fetching data:', error)); - } - - render() { - return ( -
-

Hello, React!

- {this.state.data ? ( -
-

Data from API:

-
{JSON.stringify(this.state.data, null, 2)}
-
- ) : ( -

Loading data...

- )} -
- ); - } -} - -ReactDOM.render(, document.getElementById('root')); +const container = document.getElementById('root'); +const root = createRoot(container); +root.render( + + + + +);