Skip to content

Commit 5dca00c

Browse files
MarkEWaiteMarkEWaite
authored
Update with latest versions (#161)
I recreated the sample application based on instructions from https://create-react-app.dev/docs/getting-started/ as had been done previously in this tutorial repository. That updates the application and should replace the pull requests: * #100 * #138 * #140 * #141 * #142 * #143 * #144 * #146 * #147 * #150 https://react.dev/blog/2025/02/14/sunsetting-create-react-app announces that as of Feb 2025, Create React App is deprecated for new apps. Existing apps are recommended to migrate to a framework or to a build tool like Vite. https://react.dev/learn/creating-a-react-app#react-router-v7 notes that React Router is the most popular routing library for React and can be paired with Vite to create a full-stack React framework. Since we're using Vite for the new documentation site, it is probably best to use React Router and Vite when we replace the sample application in this repository. Testing done: * Ran the application with `npm start` and confirmed that it rendered as expected on port 3000 * Ran the `jenkins/scripts/test.sh` script and confirmed that tests pass * Ran the `jenkins/scripts/deliver.sh` script and confirm that the site built and rendered as expected on port 3000
1 parent 5579f39 commit 5dca00c

File tree

16 files changed

+6515
-5136
lines changed

16 files changed

+6515
-5136
lines changed

‎package-lock.json‎

Lines changed: 6382 additions & 4961 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,27 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"react": "^18.2.0",
7-
"react-dom": "^18.2.0",
8-
"react-scripts": "^5.0.1"
6+
"@testing-library/dom": "^10.4.0",
7+
"@testing-library/jest-dom": "^6.6.3",
8+
"@testing-library/react": "^16.3.0",
9+
"@testing-library/user-event": "^13.5.0",
10+
"react": "^19.1.0",
11+
"react-dom": "^19.1.0",
12+
"react-scripts": "5.0.1",
13+
"web-vitals": "^2.1.4"
914
},
1015
"scripts": {
1116
"start": "react-scripts start",
1217
"build": "react-scripts build",
13-
"test": "react-scripts test --env=jsdom",
18+
"test": "react-scripts test",
1419
"eject": "react-scripts eject"
1520
},
21+
"eslintConfig": {
22+
"extends": [
23+
"react-app",
24+
"react-app/jest"
25+
]
26+
},
1627
"browserslist": {
1728
"production": [
1829
">0.2%",

‎public/index.html‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6-
<meta name="theme-color" content="#000000">
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="Web site created using create-react-app"
11+
/>
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
713
<!--
8-
manifest.json provides metadata used when your web app is added to the
9-
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
14+
manifest.json provides metadata used when your web app is installed on a
15+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1016
-->
11-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12-
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
17+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
1318
<!--
1419
Notice the use of %PUBLIC_URL% in the tags above.
1520
It will be replaced with the URL of the `public` folder during the build.
@@ -22,9 +27,7 @@
2227
<title>React App</title>
2328
</head>
2429
<body>
25-
<noscript>
26-
You need to enable JavaScript to run this app.
27-
</noscript>
30+
<noscript>You need to enable JavaScript to run this app.</noscript>
2831
<div id="root"></div>
2932
<!--
3033
This HTML file is a template.

‎public/logo192.png‎

5.22 KB
Loading

‎public/logo512.png‎

9.44 KB
Loading

‎public/manifest.json‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,21 @@
44
"icons": [
55
{
66
"src": "favicon.ico",
7-
"sizes": "192x192",
8-
"type": "image/png"
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
},
10+
{
11+
"src": "logo192.png",
12+
"type": "image/png",
13+
"sizes": "192x192"
14+
},
15+
{
16+
"src": "logo512.png",
17+
"type": "image/png",
18+
"sizes": "512x512"
919
}
1020
],
11-
"start_url": "./index.html",
21+
"start_url": ".",
1222
"display": "standalone",
1323
"theme_color": "#000000",
1424
"background_color": "#ffffff"

‎public/robots.txt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *
3+
Disallow:

‎src/App.css‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,36 @@
33
}
44

55
.App-logo {
6-
animation: App-logo-spin infinite 20s linear;
7-
height: 80px;
6+
height: 40vmin;
7+
pointer-events: none;
88
}
99

10-
.App-header {
11-
background-color: #222;
12-
height: 150px;
13-
padding: 20px;
14-
color: white;
10+
@media (prefers-reduced-motion: no-preference) {
11+
.App-logo {
12+
animation: App-logo-spin infinite 20s linear;
13+
}
1514
}
1615

17-
.App-title {
18-
font-size: 1.5em;
16+
.App-header {
17+
background-color: #282c34;
18+
min-height: 100vh;
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
justify-content: center;
23+
font-size: calc(10px + 2vmin);
24+
color: white;
1925
}
2026

21-
.App-intro {
22-
font-size: large;
27+
.App-link {
28+
color: #61dafb;
2329
}
2430

2531
@keyframes App-logo-spin {
26-
from { transform: rotate(0deg); }
27-
to { transform: rotate(360deg); }
32+
from {
33+
transform: rotate(0deg);
34+
}
35+
to {
36+
transform: rotate(360deg);
37+
}
2838
}

‎src/App.js‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
1-
import React, { Component } from 'react';
21
import logo from './logo.svg';
32
import './App.css';
43

5-
class App extends Component {
6-
render() {
7-
return (
8-
<div className="App">
9-
<header className="App-header">
10-
<img src={logo} className="App-logo" alt="logo" />
11-
<h1 className="App-title">Welcome to React</h1>
12-
</header>
13-
<p className="App-intro">
14-
To get started, edit <code>src/App.js</code> and save to reload.
4+
function App() {
5+
return (
6+
<div className="App">
7+
<header className="App-header">
8+
<img src={logo} className="App-logo" alt="logo" />
9+
<p>
10+
Edit <code>src/App.js</code> and save to reload.
1511
</p>
16-
</div>
17-
);
18-
}
12+
<a
13+
className="App-link"
14+
href="https://reactjs.org"
15+
target="_blank"
16+
rel="noopener noreferrer"
17+
>
18+
Learn React
19+
</a>
20+
</header>
21+
</div>
22+
);
1923
}
2024

2125
export default App;

‎src/App.test.js‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
import React, {StrictMode} from 'react';
2-
import ReactDOM from 'react-dom';
1+
import { render, screen } from '@testing-library/react';
32
import App from './App';
43

5-
it('renders without crashing', () => {
6-
const div = document.createElement('div');
7-
ReactDOM.createRoot(div).render(
8-
<StrictMode>
9-
<App />
10-
</StrictMode>
11-
);
4+
test('renders learn react link', () => {
5+
render(<App />);
6+
const linkElement = screen.getByText(/learn react/i);
7+
expect(linkElement).toBeInTheDocument();
128
});

0 commit comments

Comments
 (0)