...und wie funktioniert diese App?

STEP1:

STEP2:

Videos schauen und ChatGPT vergleichen und nach und nach ausprobieren ==> Das ist Tabelle mit fest verdrahteten Werten, welche aber als Test-Daten zufällig erstellt / produziert werden!

STEP3:

Wenn alles so funktioniert, wie gewünscht, dann lassen Sie ein "build" laufen! ==> es ensteht dann eine HTML-Datei, eine JS-Date und eine CSS-Datei mit quasi kryptischen Codierungen.

Nicht entmutigen lassen, nämlich einmal die HTML-Datei in eine PHP-Datei umsetzen, dann die CSS-Datei in eine lesbare Form bringen; das "schwerste" ist aber die JS-Datei (Diese hat über 190000 Zeichen!!!; die Hauptsache ist: !es funktioniert!). ...Müssen Sie nicht machen, aber umbezeichnen in style.css und script.js sollte der Lesbarkeit im Einfachen genügen.

Hier ist der Quellcode für meine react.js-App:

App.js

1. import PaginatedTable from './PaginatedTable';
2. import "./App.css";
3. function App() {
4. return (
5. <div>
6. <PaginatedTable/>
7. </div>
8. )
9. }
10. export default App;

PaginatedTable.js

1. import React, { useState, useEffect } from "react";
2. const generateRandomName = () => {
3. const vorname = ['Anna', 'Ben', 'Clara', 'David', 'Dirk', 'Eva', 'Felix', 'Gina', 'Hannes', 'Ina', 'Jörg', 'Kurt', 'Ludwig', 'Lutz', 'Manfred'];
4. const nachname = ['Müller', 'Schmidt', 'Schneider', 'Fischer', 'Weber', 'Maier', 'Mayer', 'Meier', 'Meyer', 'Wagner', 'Becker'];
5. const vor = vorname[Math.floor(Math.random() * vorname.length)];
6. const nach = nachname[Math.floor(Math.random() * nachname.length)];
7. return `${vor} ${nach}`;
8. };
9. const generateRandomEmail = (name) => {
10. const domains = ['t-online.de', 'gmail.com', 'yahoo.com', 'outlook.com', 'web.de', 'gmx.de'];
11. const domain = domains[Math.floor(Math.random() * domains.length)];
12. const emailName = name.toLowerCase().replace(' ', '.');
13. return `${emailName}@${domain}`;
14. };
15. const generateRandomBirthday = () => {
16. const start = new Date(1939, 0, 1).getTime();
17. const end = new Date(2000, 0, 1).getTime();
18. const randomTime = start + Math.random() * (end - start);
19. const date = new Date(randomTime);
20. return date.toISOString().split('T')[0]; // Format: YYYY-MM-DD
21. };
22. const generatePeople = (count) => {
23. return Array.from({ length: count }, (_, index) => {
24. const name = generateRandomName();
25. return {
26. id: index + 1,
27. name,
28. email: generateRandomEmail(name),
29. birthday: generateRandomBirthday(),
30. };
31. });
32. };
33. const PaginatedTable = () => {
34. const [people, setPeople] = useState([]);
35. const [currentPage, setCurrentPage] = useState(1);
36. const itemsPerPage = 10;
37. useEffect(() => {
38. setPeople(generatePeople(150)); // z.B. 150 zufällige Personen
39. }, []);
40. // Pagination Logik
41. const totalPages = Math.ceil(people.length / itemsPerPage);
42. const currentData = people.slice(
43. (currentPage - 1) * itemsPerPage,
44. currentPage * itemsPerPage
45. );
46. // Funktionen zur Navigation
47. const goToPage = (page) => {
48. const p = Math.max(1, Math.min(page, totalPages));
49. setCurrentPage(p);
50. };
51. return (
52. <div className="p-4 max-w-4xl mx-auto">
53. <center>
54. <h2 className="text-xl font-bold mb-4">Personenliste</h2>
55. <table className="w-full border border-gray-300">
56. <thead className="bg-gray-100">
57. <tr className="bg-gray-200">
58. <th className="border p-2">Nr</th>
59. <th className="border p-2">Name</th>
60. <th className="border p-2">E-Mail</th>
61. <th className="border p-2">Geburtstag</th>
62. </tr>
63. </thead>
64. <tbody>
65. {currentData.map((person) => (
66. <tr key={person.id}>
67. <td className="border p-2 text-center">{person.id}</td>
68. <td className="border p-2">{person.name}</td>
69. <td className="border p-2">{person.email}</td>
70. <td className="border p-2">{person.birthday}</td>
71. </tr>
72. ))}>/li>
73. </tbody>
74. </table>
75. {/* Pagination-Steuerung */}
76. <div className="mt-4 flex flex-wrap justify-center gap-2">
77. <button
78. onClick={() => goToPage(1)}
79. disabled={currentPage === 1}
80. className="px-3 py-1 border rounded disabled:opacity-50"
81. >
82. Erster Satz
83. </button>
84. <button
85. onClick={() => goToPage(currentPage - 1)}
86. disabled={currentPage === 1}
87. className="px-3 py-1 border rounded disabled:opacity-50"
88. >
89. Zurück
90. </button>
91. <button onClick={() => goToPage(currentPage - 5)} disabled={currentPage <= 5}>
92. « -5
93. </button>
95. Seite {currentPage} von {totalPages}
97. <button onClick={() => goToPage(currentPage + 5)} disabled={currentPage + 5 > totalPages}>
98. +5 »
99. </button>
100. <button
101. onClick={() => goToPage(currentPage + 1)}
102. disabled={currentPage === totalPages}
103. className="px-3 py-1 border rounded disabled:opacity-50"
104. >
105. Weiter
106. </button>
107. <button
108. onClick={() => goToPage(totalPages)}
109. disabled={currentPage === totalPages}
110. className="px-3 py-1 border rounded disabled:opacity-50"
111. >
112. Letzter Satz
113. </button>
114. </div>
116. </div>
117. );
118. };
119. export default PaginatedTable;

index.js

Version 1

1. import React from 'react';
2. import ReactDOM from "react-dom/client";
F
3. import './index.css';
4. import App from './App';
5. import reportWebVitals from './reportWebVitals';
7. const root = ReactDOM.createRoot(document.getElementById("root"));
8. root.render(
9. <React.StrictMode>
10. <App />
11. </React.StrictMode>
12. );
14. // If you want to start measuring performance in your App, pass a function
15. // to log results (for example: reportWebVitals(console.log))
16. // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17. reportWebVitals();

Version 2 ==> Diese benutze ich meistens...und ist ein wenig kürzer!

1. import React, { StrictMode } from "react";
2. import { createRoot } from "react-dom/client";
3. import './index.css';
5. import App from "./App";
7. const root = createRoot(document.getElementById("root"));
8. root.render(
9. <StrictMode>
10. <App />
11. </StrictMode>
12. );

index.js

1. .App {
2. text-align: center;
3. }
4. .App-logo {
5. height: 40vmin;
6. pointer-events: none;
7. }
8. th {
9. background-color: rgb(83, 83, 219);
10. }
11. tr {
12. background-color: cyan;
13. }
14. tr:nth-child(2n) {
15. background-color: yellow;
16. }
17. tr:hover {
18. background-color: #ddd;
19. }

package.json

1. {
2. "name": "test_6",
3. "version": "0.1.0",
4. "private": true,
5. "dependencies": {
6. "@testing-library/dom": "^10.4.1",
7. "@testing-library/jest-dom": "^6.9.1",
8. "@testing-library/react": "^16.3.0",
9. "@testing-library/user-event": "^13.5.0",
10. "react": "^19.2.0",
11. "react-dom": "^19.2.0",
12. "react-scripts": "5.0.1",
13. "web-vitals": "^2.1.4"
14. },
15. "scripts": {
16. "start": "react-scripts start",
17. "test": "react-scripts test",
18. "eject": "react-scripts eject"
19. },
20. "eslintConfig": {
21. "extends": [
22. "react-app",
23. "react-app/jest"
24. ]
25. },
26. "browserslist": {
27. "production": [
28. ">0.2%",
29. "not dead",
30. "not op_mini all"
31. ],
32. "development": [
33. "last 1 chrome version",
34. "last 1 firefox version",
35. "last 1 safari version"
36. ]
37. }
38. }

...dann geht es mit der Erklärung und dem Prinzip los!!! HINWEIS: Die meisten Befehle und Anweisungen werden im WINDOWS-Bereich getätigt...!

...wie lade ich im Grund erst die node.js/npm/react.js in mein System...!!!

==> Als erstes den Download von node.js auf = https://nodejs.org/en/download/

==> dann die Kontrolle, ob node.js mit welcher aktuellen VersionsNr auf dem System ist = Das wird durch die Eingabe von "node -v npm -v" und "ENTER" im Befehlsterminal! durchgeführt.

==> Das wird durch die Eingabe von "npm install -g create-react-app" wird dir [CRA] "create-react-app" installiert. Hier ist "npm" anstatt "yarn" im Gebrauch..

==> Im Befehls-Terminal geben Sie dann "create-react-app my-app" ein und bestätigen Sie diese Eingabe mit "ENTER", und es passiert was...! Entweder wird ein Fehler ausgeworfen, dass die Eingabe-Formalität [Sonderzeichen und weitere nicht akzeptiert werden] oder ein "Slash -/-" "dreht" sich. Das iste ein Erfolg. ABER IN DIESEM FALL "PROBIEREN GEHT ÜBER STUDIEREN!"!

==> Daraufhin geben Sie ein weiteres Kommando ein: "cd my-app" und bestätigen Dieses ebenfalls mit "ENTER"! udn Sie erhalten in diesem von Ihnen ausgewähltem Verzeichnis den Inhalt als Liste aus...

==> und von hier aus können Sie projektbezogen dann weitere Module mittels "npm install..." laden.

==> und "npm start" startet dann Ihr derzeit aktuelles Projekt in Ihrem aktuellen Browser!

Also, in Kürze...! Die "package.json" ist sehr wichtig, weil

==> entweder benötigen Sie Informationen über bestimmte Module von react.js, welche gerade im Projekt genutzt werden und ob diese obsolet oder gerade aktuell sind! oder

==> im Programmierteam soll nach Möglichkeit jede Person wissen, welche Module gerade gefragt sind oder nicht und wie der definierte Prozess nach Kundenwüschen entsprechend umgesetzt wird!

==> und für mich gilt Dieses zu merken: npm install oder für Andere yarn zum Laden bestimmter Module wie im Voraus beim Installieren von react.js und npm geschrieben...