diff options
| -rw-r--r-- | App.test.js (renamed from src/App.test.js) | 0 | ||||
| -rw-r--r-- | README.md | 10 | ||||
| -rw-r--r-- | package-lock.json | 58 | ||||
| -rw-r--r-- | package.json | 3 | ||||
| -rw-r--r-- | reportWebVitals.js (renamed from src/reportWebVitals.js) | 0 | ||||
| -rw-r--r-- | setupTests.js (renamed from src/setupTests.js) | 0 | ||||
| -rw-r--r-- | src/App.js | 35 | ||||
| -rw-r--r-- | src/index.js | 32 | ||||
| -rw-r--r-- | src/services/main.js | 8 | ||||
| -rw-r--r-- | src/setupProxy.js | 10 |
10 files changed, 125 insertions, 31 deletions
diff --git a/src/App.test.js b/App.test.js index 1f03afe..1f03afe 100644 --- a/src/App.test.js +++ b/App.test.js @@ -68,3 +68,13 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/d ### `npm run build` fails to minify This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) + +--- + +Refer to: https://opensource.com/article/22/7/code-first-react-app + +React is a JavaScript library for building a user interface (UI). However, you need more than just the UI library for a functional UI. Here are the important components of the JavaScript web app you're about to create: + +npx: This package is for executing npm packages. +axios: A promise-based HTTP client for the browser and node.js. A promise is a value that an API endpoint will provide. +http-proxy-middleware: Configures proxy middleware with ease. A proxy is middleware that helps deal with messaging back and forth from the application endpoint to the requester. diff --git a/package-lock.json b/package-lock.json index a6e6f99..eba2449 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,9 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "axios": "^1.4.0", + "express": "^4.18.2", + "http-proxy-middleware": "^2.0.6", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", @@ -5084,6 +5087,29 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz", + "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==", + "dependencies": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/axobject-query": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz", @@ -14068,6 +14094,11 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", @@ -20862,6 +20893,28 @@ "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.1.tgz", "integrity": "sha512-sCXXUhA+cljomZ3ZAwb8i1p3oOlkABzPy08ZDAoGcYuvtBPlQ1Ytde129ArXyHWDhfeewq7rlx9F+cUx2SSlkg==" }, + "axios": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz", + "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==", + "requires": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + }, + "dependencies": { + "form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "requires": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + } + } + } + }, "axobject-query": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz", @@ -27188,6 +27241,11 @@ } } }, + "proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", diff --git a/package.json b/package.json index c046cf9..bcd9890 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,9 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "axios": "^1.4.0", + "express": "^4.18.2", + "http-proxy-middleware": "^2.0.6", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", diff --git a/src/reportWebVitals.js b/reportWebVitals.js index 5253d3a..5253d3a 100644 --- a/src/reportWebVitals.js +++ b/reportWebVitals.js diff --git a/src/setupTests.js b/setupTests.js index 8f2609b..8f2609b 100644 --- a/src/setupTests.js +++ b/setupTests.js @@ -1,25 +1,28 @@ -import logo from './logo.svg'; -import './App.css'; +import React from 'react'; +import main from './services/main'; function App() { + const [count, setCount] = React.useState(0); + React.useEffect(() => { + async function fetchCount() { + const newCount = (await main.get()).data.count; + setCount(newCount); + } + fetchCount(); + }, [setCount]); return ( - <div className="App"> - <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> - Edit <code>src/App.js</code> and save to reload. - </p> - <a - className="App-link" - href="https://reactjs.org" - target="_blank" - rel="noopener noreferrer" + <div className='App'> + <header className='App-header'> + <h4>{count}</h4> + <button + onClick={async () => { + setCount((await main.increment()).data.count); + }} > - Learn React - </a> + Increment + </button> </header> </div> ); } - export default App; diff --git a/src/index.js b/src/index.js index d563c0f..7887dee 100644 --- a/src/index.js +++ b/src/index.js @@ -1,17 +1,19 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +const express = require('express'); +const app = express(); +const port = 5001; -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render( - <React.StrictMode> - <App /> - </React.StrictMode> -); +let count = 0; -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); +app.get('/api', (req, res) => { + // res.send('Hello World!'); + res.json({ count }); +}); + +app.post('/api', (req, res) => { + ++count; + res.json({ count }); +}); + +app.listen(port, () => { + console.log(`listen server on http://localhost:${port}`); +}); diff --git a/src/services/main.js b/src/services/main.js new file mode 100644 index 0000000..198a3d4 --- /dev/null +++ b/src/services/main.js @@ -0,0 +1,8 @@ +import axios from 'axios'; +const baseURL = 'http://localhost:5001/api'; +export const get = async () => await axios.get(`${baseURL}/`); +export const increment = async () => await axios.post(`${baseURL}/`); +export default { + get, + increment, +}; diff --git a/src/setupProxy.js b/src/setupProxy.js new file mode 100644 index 0000000..240bdd2 --- /dev/null +++ b/src/setupProxy.js @@ -0,0 +1,10 @@ +const { createProxyMiddleware } = require('http-proxy-middleware'); +module.exports = function (app) { + app.use( + '/api', + createProxyMiddleware({ + target: 'http://localhost:5001', + changeOrigin: true, + }) + ); +}; |