Mal was anderes als Fussball: SPA mit React und Babel oder TOP 10 Gründe für Anti- Pattern „Big Ball of Mud“ – Wenzlaff.de

ball

Dank an Dr.Kleinhirn.eu für die Mindmap

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

git clone git@gitlab.com:IT-Berater/twstandalonereactspatemplate.git

1	git clone git@gitlab.com:IT-Berater/twstandalonereactspatemplate.git

Es gibt dann eine index.html Seite mit diesem Inhalt:

<!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>

<!DOCTYPE html>

<html>

<head>

<title>Standing Alone React Template</title>

</head>

<body>

Template SPA:

</body>

</html>

Der Beispiel Tag

<div class="tw-timer"></div>

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)

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

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

npm run start

1	npm run start

Result:

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 -

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:

-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