From 3d5ef952d99ded3bd76f83fd8aab61a89d335ae3 Mon Sep 17 00:00:00 2001 From: Dejavu Moe Date: Sun, 21 May 2023 07:47:18 +0800 Subject: init commit --- App.test.js | 8 +++++++ README.md | 10 +++++++++ package-lock.json | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 3 +++ reportWebVitals.js | 13 +++++++++++ setupTests.js | 5 +++++ src/App.js | 35 ++++++++++++++++-------------- src/App.test.js | 8 ------- src/index.js | 32 +++++++++++++++------------- src/reportWebVitals.js | 13 ----------- src/services/main.js | 8 +++++++ src/setupProxy.js | 10 +++++++++ src/setupTests.js | 5 ----- 13 files changed, 151 insertions(+), 57 deletions(-) create mode 100644 App.test.js create mode 100644 reportWebVitals.js create mode 100644 setupTests.js delete mode 100644 src/App.test.js delete mode 100644 src/reportWebVitals.js create mode 100644 src/services/main.js create mode 100644 src/setupProxy.js delete mode 100644 src/setupTests.js diff --git a/App.test.js b/App.test.js new file mode 100644 index 0000000..1f03afe --- /dev/null +++ b/App.test.js @@ -0,0 +1,8 @@ +import { render, screen } from '@testing-library/react'; +import App from './App'; + +test('renders learn react link', () => { + render(); + const linkElement = screen.getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/README.md b/README.md index 58beeac..f7d41ac 100644 --- a/README.md +++ b/README.md @@ -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/reportWebVitals.js b/reportWebVitals.js new file mode 100644 index 0000000..5253d3a --- /dev/null +++ b/reportWebVitals.js @@ -0,0 +1,13 @@ +const reportWebVitals = onPerfEntry => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; diff --git a/setupTests.js b/setupTests.js new file mode 100644 index 0000000..8f2609b --- /dev/null +++ b/setupTests.js @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom'; diff --git a/src/App.js b/src/App.js index 3784575..a650d85 100644 --- a/src/App.js +++ b/src/App.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 ( -
-
- logo -

- Edit src/App.js and save to reload. -

- +
+

{count}

+
); } - export default App; diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); 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( - - - -); +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/reportWebVitals.js b/src/reportWebVitals.js deleted file mode 100644 index 5253d3a..0000000 --- a/src/reportWebVitals.js +++ /dev/null @@ -1,13 +0,0 @@ -const reportWebVitals = onPerfEntry => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; 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, + }) + ); +}; diff --git a/src/setupTests.js b/src/setupTests.js deleted file mode 100644 index 8f2609b..0000000 --- a/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; -- cgit v1.2.3-54-g00ecf