From d5df390bc6e4d2860cf0bb36ffe8e0584ed96f5d Mon Sep 17 00:00:00 2001 From: physcik Date: Fri, 10 Apr 2026 19:24:08 +0500 Subject: react app init --- my-app/src/App.css | 38 ++++++++++++++++++++++++++++++++++++++ my-app/src/App.tsx | 26 ++++++++++++++++++++++++++ my-app/src/index.css | 13 +++++++++++++ my-app/src/index.tsx | 20 ++++++++++++++++++++ my-app/src/logo.svg | 1 + my-app/src/react-app-env.d.ts | 1 + my-app/src/reportWebVitals.ts | 15 +++++++++++++++ 7 files changed, 114 insertions(+) create mode 100644 my-app/src/App.css create mode 100644 my-app/src/App.tsx create mode 100644 my-app/src/index.css create mode 100644 my-app/src/index.tsx create mode 100644 my-app/src/logo.svg create mode 100644 my-app/src/react-app-env.d.ts create mode 100644 my-app/src/reportWebVitals.ts (limited to 'my-app/src') diff --git a/my-app/src/App.css b/my-app/src/App.css new file mode 100644 index 0000000..74b5e05 --- /dev/null +++ b/my-app/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/my-app/src/App.tsx b/my-app/src/App.tsx new file mode 100644 index 0000000..a53698a --- /dev/null +++ b/my-app/src/App.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import logo from './logo.svg'; +import './App.css'; + +function App() { + return ( +
+
+ logo +

+ Edit src/App.tsx and save to reload. +

+ + Learn React + +
+
+ ); +} + +export default App; diff --git a/my-app/src/index.css b/my-app/src/index.css new file mode 100644 index 0000000..ec2585e --- /dev/null +++ b/my-app/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/my-app/src/index.tsx b/my-app/src/index.tsx new file mode 100644 index 0000000..2959569 --- /dev/null +++ b/my-app/src/index.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import App from './App'; +import reportWebVitals from './reportWebVitals'; + +const root = ReactDOM.createRoot( + document.getElementById('root') as HTMLElement +); + +root.render( + + + +); + +// 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/my-app/src/logo.svg b/my-app/src/logo.svg new file mode 100644 index 0000000..9dfc1c0 --- /dev/null +++ b/my-app/src/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/my-app/src/react-app-env.d.ts b/my-app/src/react-app-env.d.ts new file mode 100644 index 0000000..6431bc5 --- /dev/null +++ b/my-app/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/my-app/src/reportWebVitals.ts b/my-app/src/reportWebVitals.ts new file mode 100644 index 0000000..49a2a16 --- /dev/null +++ b/my-app/src/reportWebVitals.ts @@ -0,0 +1,15 @@ +import { ReportHandler } from 'web-vitals'; + +const reportWebVitals = (onPerfEntry?: ReportHandler) => { + 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; -- cgit v1.3