From 9e3e9a2d6da9f33f2cfcdb10254f5ef37955019c Mon Sep 17 00:00:00 2001 From: Jarred Sumner Date: Wed, 13 Oct 2021 00:28:20 -0700 Subject: Clean up examples a little --- examples/react/src/App.css | 38 +++++++++++++++++++++++++++++++++++ examples/react/src/App.jsx | 25 +++++++++++++++++++++++ examples/react/src/App.test.js | 8 ++++++++ examples/react/src/index.css | 13 ++++++++++++ examples/react/src/index.jsx | 17 ++++++++++++++++ examples/react/src/logo.svg | 1 + examples/react/src/reportWebVitals.js | 13 ++++++++++++ examples/react/src/setupTests.js | 5 +++++ 8 files changed, 120 insertions(+) create mode 100644 examples/react/src/App.css create mode 100644 examples/react/src/App.jsx create mode 100644 examples/react/src/App.test.js create mode 100644 examples/react/src/index.css create mode 100644 examples/react/src/index.jsx create mode 100644 examples/react/src/logo.svg create mode 100644 examples/react/src/reportWebVitals.js create mode 100644 examples/react/src/setupTests.js (limited to 'examples/react/src') diff --git a/examples/react/src/App.css b/examples/react/src/App.css new file mode 100644 index 000000000..74b5e0534 --- /dev/null +++ b/examples/react/src/App.css @@ -0,0 +1,38 @@ +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/examples/react/src/App.jsx b/examples/react/src/App.jsx new file mode 100644 index 000000000..a675d389d --- /dev/null +++ b/examples/react/src/App.jsx @@ -0,0 +1,25 @@ +import logo from "./logo.svg"; +import * as React from "react"; +import "./App.css"; + +function App() { + const ms = Date.now() - parseInt(window.location.search.substring(1), 10); + return ( +
+
+ logo +

Loaded in {ms}ms.

+ + Learn React + +
+
+ ); +} + +export default App; diff --git a/examples/react/src/App.test.js b/examples/react/src/App.test.js new file mode 100644 index 000000000..1f03afeec --- /dev/null +++ b/examples/react/src/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/examples/react/src/index.css b/examples/react/src/index.css new file mode 100644 index 000000000..ec2585e8c --- /dev/null +++ b/examples/react/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/examples/react/src/index.jsx b/examples/react/src/index.jsx new file mode 100644 index 000000000..26419cdcb --- /dev/null +++ b/examples/react/src/index.jsx @@ -0,0 +1,17 @@ +import * as React from "react"; +import ReactDOM from "react-dom"; +import "./index.css"; +import App from "./App"; +import reportWebVitals from "./reportWebVitals"; + +ReactDOM.render( + + + , + document.getElementById("root") +); + +// 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(); diff --git a/examples/react/src/logo.svg b/examples/react/src/logo.svg new file mode 100644 index 000000000..9dfc1c058 --- /dev/null +++ b/examples/react/src/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/react/src/reportWebVitals.js b/examples/react/src/reportWebVitals.js new file mode 100644 index 000000000..5253d3ad9 --- /dev/null +++ b/examples/react/src/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/examples/react/src/setupTests.js b/examples/react/src/setupTests.js new file mode 100644 index 000000000..8f2609b7b --- /dev/null +++ b/examples/react/src/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'; -- cgit v1.2.3