{"id":17135,"date":"2021-06-16T19:17:01","date_gmt":"2021-06-16T17:17:01","guid":{"rendered":"http:\/\/blog.wenzlaff.de\/?p=17135"},"modified":"2021-06-18T14:47:01","modified_gmt":"2021-06-18T12:47:01","slug":"mal-was-anderes-als-fussball-spa-mit-react-und-babel-oder-top-10-gruende-fuer-anti-pattern-big-ball-of-mud","status":"publish","type":"post","link":"http:\/\/blog.wenzlaff.de\/?p=17135","title":{"rendered":"Mal was anderes als Fussball: SPA mit React und Babel oder TOP 10 Gr\u00fcnde f\u00fcr Anti- Pattern \u201eBig Ball of Mud\u201c"},"content":{"rendered":"

\"ball\"
\n

Dank an Dr.Kleinhirn.eu<\/a> f\u00fcr die Mindmap<\/center> <\/p>\n

Eine minimale Single Page App (495 Byte) mit React und Babel. Das ganze Projekt ist hier<\/a> zu finden. Einfach das git Repo in einem leeren Verzeichnis clonen
\n <\/p>\n

\r\ngit clone git@gitlab.com:IT-Berater\/twstandalonereactspatemplate.git<\/pre>\n
Es gibt dann eine index.html Seite mit diesem Inhalt:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset=\"UTF-8\" \/>\r\n    <title>Standing Alone React Template<\/title>\r\n  <\/head>\r\n  <body>\r\n    Template SPA:\r\n    <div class=\"tw-timer\"><\/div>\r\n\r\n    <script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"><\/script>\r\n    <script src=\"https:\/\/unpkg.com\/react@16\/umd\/react.production.min.js\" crossorigin><\/script>\r\n    <script src=\"https:\/\/unpkg.com\/react-dom@16\/umd\/react-dom.production.min.js\" crossorigin><\/script>\r\n    <script src=\".\/app.min.js\" type='text\/babel'><\/script>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
Der Beispiel Tag   <\/p>\n
<div class=\"tw-timer\"><\/div><\/pre>\n
 kann mehrfach eingef\u00fcgt werden, und ruft die React Klasse Timer aus der app.js auf.<\/p>\n
Dann in das Verzeichnis wechseln und bauen (es muss npm und nodejs installiert sein)<\/p>\n
\r\n\r\nnpm install --save-dev babel-cli\r\nnpm run build\r\n\r\n\/\/Result:\r\n\r\nstandalone-react-template@0.0.1 build\r\nnpx babel app.js --out-file app.min.js --presets minify --watch<\/pre>\n
Und in einen 2. Terminal den Server starten mit<\/p>\n
npm run start<\/pre>\n
Result:<\/p>\n
standalone-react-template@0.0.1 start\r\nopen http:\/\/localhost:8888\/ && python3 -m http.server 8888\r\n\r\nServing HTTP on 0.0.0.0 port 8888 (http:\/\/0.0.0.0:8888\/) ...\r\n127.0.0.1 - - [16\/Jun\/2021 12:58:42] \"GET \/ HTTP\/1.1\" 304 -\r\n127.0.0.1 - - [16\/Jun\/2021 12:58:42] \"GET \/app.min.js HTTP\/1.1\" 200 -\r\n127.0.0.1 - - [16\/Jun\/2021 12:58:42] code 404, message File not found\r\n127.0.0.1 - - [16\/Jun\/2021 12:58:42] \"GET \/favicon.ico HTTP\/1.1\" 404 -<\/pre>\n
Die Seite \u00f6ffnent sich nun mit dem Timer in:
\nhttp:\/\/localhost:8888\/<\/a><\/p>\n
Result:
\nTemplate SPA:
\nSeconds: 1….
\nMinimal Size:<\/p>\n
-rw-r--r--    1   staff     168 16 Jun 12:55 .babelrc\r\n-rw-r--r--    1   staff     764 16 Jun 13:01 README.md\r\n-rw-r--r--    1   staff     649 16 Jun 12:52 app.js\r\n-rw-r--r--    1   staff     495 16 Jun 12:58 app.min.js\r\n-rw-r--r--    1   staff     534 16 Jun 12:44 index.html\r\n-rw-r--r--@   1   staff     717 16 Jun 12:57 package.json<\/pre>\n","protected":false},"excerpt":{"rendered":"
Dank an Dr.Kleinhirn.eu f\u00fcr 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<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[220,3137,808,79],"tags":[4949,4948,4642,4462,4947],"class_list":["post-17135","post","type-post","status-publish","format-standard","hentry","category-anleitung","category-javascript","category-linux-2","category-programmierung","tag-babel","tag-bable","tag-javascript","tag-react","tag-spa"],"_links":{"self":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts\/17135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17135"}],"version-history":[{"count":0,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts\/17135\/revisions"}],"wp:attachment":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=17135"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=17135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}