Eine minimale Single Page App (495 Byte) mit React und Babel. Das ganze Projekt ist hier zu finden. Einfach das git Repo in einem leeren Verzeichnis clonen
|
1 |
git clone git@gitlab.com:IT-Berater/twstandalonereactspatemplate.git |
Es gibt dann eine index.html Seite mit diesem Inhalt:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Standing Alone React Template</title> </head> <body> Template SPA: <div class="tw-timer"></div> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> <script src="./app.min.js" type='text/babel'></script> </body> </html> |
Der Beispiel Tag
|
1 |
<div class="tw-timer"></div> |
kann mehrfach eingefügt werden, und ruft die React Klasse Timer aus der app.js auf.
Dann in das Verzeichnis wechseln und bauen (es muss npm und nodejs installiert sein)
|
1 2 3 4 5 6 7 |
npm install --save-dev babel-cli npm run build //Result: standalone-react-template@0.0.1 build npx babel app.js --out-file app.min.js --presets minify --watch |
Und in einen 2. Terminal den Server starten mit
|
1 |
npm run start |
Result:
|
1 2 3 4 5 6 7 8 |
standalone-react-template@0.0.1 start open http://localhost:8888/ && python3 -m http.server 8888 Serving HTTP on 0.0.0.0 port 8888 (http://0.0.0.0:8888/) ... 127.0.0.1 - - [16/Jun/2021 12:58:42] "GET / HTTP/1.1" 304 - 127.0.0.1 - - [16/Jun/2021 12:58:42] "GET /app.min.js HTTP/1.1" 200 - 127.0.0.1 - - [16/Jun/2021 12:58:42] code 404, message File not found 127.0.0.1 - - [16/Jun/2021 12:58:42] "GET /favicon.ico HTTP/1.1" 404 - |
Die Seite öffnent sich nun mit dem Timer in:
http://localhost:8888/
Result:
Template SPA:
Seconds: 1….
Minimal Size:
|
1 2 3 4 5 6 |
-rw-r--r-- 1 staff 168 16 Jun 12:55 .babelrc -rw-r--r-- 1 staff 764 16 Jun 13:01 README.md -rw-r--r-- 1 staff 649 16 Jun 12:52 app.js -rw-r--r-- 1 staff 495 16 Jun 12:58 app.min.js -rw-r--r-- 1 staff 534 16 Jun 12:44 index.html -rw-r--r--@ 1 staff 717 16 Jun 12:57 package.json |