feat(jszip-dev): add Export button

chore(deps): update dependency prettier to v2.7.1

README.md

@@ -1,4 +1,16 @@
-# Links
-[React.js login form example with basic auth](https://jasonwatmore.com/post/2018/09/11/react-basic-http-authentication-tutorial-example)
-[React.js axios REST tutorial](https://www.positronx.io/react-axios-tutorial-make-http-get-post-requests/)
-[React.js login and authentication](https://www.digitalocean.com/community/tutorials/how-to-add-login-authentication-to-react-applications)
+# sandbox-react
+
+## Table of Contents
+0. [General](#general)
+
+# General
+
+This is a sandbox for projects using react.js.
+
+* [axios](./axios)
+* [config-tutorial](./config-tutorial)
+* [fare-zones-table](./fare-zones-table)
+* [login-auth](./login-auth)
+* [pages](./pages)
+* [webpack for vanilla JavaScript](./webpack-js)
+* [webpack for react with vanilla JavaScript](./wp-react)

api-with-paging/.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

api-with-paging/.gitignore

@@ -0,0 +1,108 @@
+# Others
+package-lock.json
+build*
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

api-with-paging/README.md

@@ -0,0 +1,14 @@
+# React.js Example
+
+## Table of Contents
+0. [General](#general)
+1. [Links](#links)
+
+# General
+
+# Links
+
+* [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k)
+* [Production](https://webpack.js.org/guides/production/)
+* [Setup Development and Production Environment for React App](https://medium.com/freestoneinfotech/setup-development-and-production-environment-for-react-app-397c4cc9e382)
+* [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/)

api-with-paging/config/webpack.common.js

@@ -0,0 +1,36 @@
+//generate a HTML5 file including all webpack bundles in the body using script tags
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+//path is used to resolve properly across the OS
+const path = require('path');
+module.exports = {
+    //bundle *.js from this entry point
+    entry: path.resolve(__dirname, '../src/index.jsx'),
+    //create output file to be linked to index.html
+    output: {
+        filename: '[name].bundle.js',
+	path: path.resolve(__dirname, '../dist'),
+	clean: true,
+    },
+    module: {
+	rules: [
+	    {
+		//test all *.js using babel-loader
+		//test all *.jsx (e.g. React.js) using babel-loader
+		test: /\.(js|jsx)$/,
+		exclude: /node_modules/,
+		include: path.resolve(__dirname, '../src'),
+		use: ['babel-loader'],
+	    }
+	]
+    },
+    resolve: {
+	extensions: ['*', '.js', '.jsx'],
+    },
+    plugins: [
+	// create a plugin instance so that you can use it several times anywhere
+	new HtmlWebpackPlugin({
+	    title: 'Production',
+	    template: path.resolve(__dirname, "../public/index.html")
+	}),
+    ],
+};

api-with-paging/config/webpack.dev.js

@@ -0,0 +1,14 @@
+//path is used to resolve properly across the OS
+const path = require('path');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+//merge() calls in the environment-specific configuration to include commons
+module.exports = merge(common, {
+    //set development mode
+    mode: 'development',
+    //enable strong source mapping
+    devtool: 'inline-source-map',
+    devServer: {
+	static: path.resolve(__dirname, '../dist'),
+    },
+});

api-with-paging/config/webpack.prod.js

@@ -0,0 +1,8 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+module.exports = merge(common, {
+    mode: 'production',
+    //source maps encouraged in production
+    //choose mapping with fairly quick build speed like source-map
+    devtool: 'source-map',
+});

api-with-paging/package.json

@@ -0,0 +1,37 @@
+{
+    "private": true,
+    "name": "react-example",
+    "description": "React.js example",
+    "version": "0.0.1",
+    "main": "index.js",
+    "keywords": [
+        "react",
+        "webpack"
+    ],
+    "author": "Software Ingenieur Begerad <dialog@SwIngBe.de>",
+    "license": "GPL-3.0-or-later",
+    "engines": {
+        "node": ">=10"
+    },
+    "scripts": {
+        "start": "webpack serve --open --config config/webpack.dev.js",
+        "build": "webpack --config config/webpack.prod.js"
+    },
+    "devDependencies": {
+        "@babel/core": "7.18.13",
+        "@babel/preset-env": "7.18.10",
+        "@babel/preset-react": "7.18.6",
+        "babel-loader": "8.2.5",
+        "html-webpack-plugin": "5.5.0",
+        "webpack": "5.74.0",
+        "webpack-cli": "4.10.0",
+        "webpack-dev-server": "4.10.1",
+        "webpack-merge": "5.8.0"
+    },
+    "dependencies": {
+        "axios": "0.27.2",
+        "prop-types": "15.8.1",
+        "react": "18.2.0",
+        "react-dom": "18.2.0"
+    }
+}

api-with-paging/public/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>React Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

api-with-paging/src/components/api-paging.jsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import DropDownSelect from '../components/drop-down-select';
+const selectOptions=[10,25,50,100,250,500,1000,2500,5000,10000];
+import TableAry from '../components/table-ary';
+const ApiPaging = () => {
+    /*store and initialise data in function component state*/
+    const [oset, setOset] = useState(1);
+    const [limit, setLimit] = useState(selectOptions[2]);
+    const [ary, setAry] = useState([]);
+
+    /*fetch ary in a JavaScript function*/
+    const fetch = async () => {
+        try {
+            /*TODO make route available using config*/
+            /*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
+	    const address=`https://www.v1gtfs.delfi.api.swingbe.de/shapes-oset-limit?oset=${oset}&limit=${limit}`;
+            const res = await axios.get(address);
+
+            /*set state*/
+            setAry(res.data);
+        } catch (err) {
+            console.log('err.message: ' + err.message);
+        }
+    };
+
+    /*this hook is run after a DOM update. Changing state migh result in an infinite loop*/
+    useEffect(() => {
+    /*effect goes here*/
+
+        /*hook need to be placed in body of the function component in which it is used*/
+        fetch();
+
+    /*use an empty dependency array to ensure the hook is running only once*/
+    /*TODO study dependency array: https://reactjs.org/docs/hooks-effect.html*/
+    }, [oset,limit]);
+    const handleClickPrev=()=>{
+	setOset((oset)=>oset>1?--oset:oset);
+    };
+    const handleClickNext=()=>{
+	setOset((oset)=> ++oset);
+    };
+    const handleChangeLimit = (event) => {
+        //console.log('event.target.value: '+event.target.value);
+	setLimit((limit)=>event.target.value);
+    };
+    const select = (
+	<DropDownSelect
+	    name="Limit"
+	    onChange={handleChangeLimit}
+	    options={selectOptions}
+	    defaultValue={selectOptions[2]}
+	/>
+    );
+    /*element representing user-defined React component*/
+    const table = <TableAry aryData={ary} />;
+
+    return (
+	<>
+	    <p>ApiPaging</p>
+	    <button
+		onClick={handleClickPrev}
+		autoFocus		
+	    >prev</button>
+	    <button
+		onClick={handleClickNext}
+	    >next</button>
+	    {select}
+	    {table}
+	</>
+    );
+};
+export default ApiPaging;

api-with-paging/src/components/card.jsx

@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import PropTypes from 'prop-types';
+//destructure props
+const Card = ({name}) => {
+    /*store count as array in function component state*/
+    /*initialise as empty array*/
+    const [count, setCount] = useState(null);
+
+    /*fetch count in a JavaScript function*/
+    const getCount = async () => {
+        try {
+            /*TODO make route available using config*/
+            /*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
+	    const address=`https://www.v1gtfs.delfi.api.swingbe.de/table-${name}-count`;
+            const count = await axios.get(address);
+
+            /*set state*/
+            setCount(count.data[0]['count']);
+        } catch (err) {
+            console.log('err.message: ' + err.message);
+        }
+    };
+
+    /*this hook is run after a DOM update. Changing state migh result in an infinite loop*/
+    useEffect(() => {
+    /*effect goes here*/
+
+        /*hook need to be placed in body of the function component in which it is used*/
+        getCount();
+
+    /*use an empty dependency array to ensure the hook is running only once*/
+    /*TODO study dependency array: https://reactjs.org/docs/hooks-effect.html*/
+    }, []);
+    return <p>{name}: {count?count:'loading...'}</p>;
+};
+
+Card.propTypes = {
+    name: PropTypes.string
+};
+
+export default Card;

api-with-paging/src/components/cards.jsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import Card from './card';
+const Cards = () => {
+    /*store and initialise data in function component state*/
+    const [tables, setTables] = useState([]);
+    /*fetch data in a JavaScript function*/
+    const getTables = async () => {
+        try {
+            /*TODO make route available using config*/
+            /*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
+            const tables = await axios.get(
+                'https://www.v1gtfs.delfi.api.swingbe.de/table-names'
+            );
+
+            /*set state*/
+            setTables(tables.data);
+        } catch (err) {
+            console.log('err.message: ' + err.message);
+        }
+    };
+
+    /*this hook is run after a DOM update. Changing state migh result in an infinite loop*/
+    useEffect(() => {
+    /*effect goes here*/
+
+        /*hook need to be placed in body of the function component in which it is used*/
+        getTables();
+
+    /*use an empty dependency array to ensure the hook is running only once*/
+    /*TODO study dependency array: https://reactjs.org/docs/hooks-effect.html*/
+    }, []);
+    if(tables){
+	return(
+	    <>
+		<p>GTFS tables</p>
+		{tables.map((item,index)=>{
+		    return <Card key={index} name={item['table_name']}/>
+		})
+		}
+	    </>
+	);
+    }else{
+	return(
+	    <>
+		<p>GTFS tables loading...</p>
+	    </>
+	);
+    }
+}
+
+export default Cards
+
+
+
+
+
+
+
+
+
+
+
+
+

api-with-paging/src/components/drop-down-select.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+
+/*controlled component: input form value controlled by React*/
+const DropDownSelect = (props) => {
+    /*destructuring*/
+    const {options,name,onChange,defaultValue}=props;
+    if(options){
+	return(
+	<div>
+	    <strong>{name}</strong>:
+	    <select
+		name={name}
+		id={name}
+		className={name}
+		onChange={onChange}
+		defaultValue={defaultValue}
+	    >
+		{options.map((item, index) => (
+		    <option key={index} value={item}>
+			{item}
+		    </option>
+		))}
+	    </select>
+	</div>
+	);
+    }else{
+	return (
+	    <div>
+		<p>Select failed.</p>
+	    </div>
+	);
+    }
+};
+
+export default DropDownSelect
+
+DropDownSelect.propTypes = {
+    name: PropTypes.string,
+    defaultValue: PropTypes.number,
+    onChange: PropTypes.func,
+    options: PropTypes.array,
+};

api-with-paging/src/components/table-ary.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Entry from './table-entry';
+import Head from './table-head';
+
+/*the simplest way to define a component is to write a JavaScript function*/
+/*destructure props object*/
+function TableAry ({ aryData }) {
+    const handleAryData = () => {
+        if (aryData) {
+            //iterate over array
+            return aryData.map((item, index) => {
+                return (
+                    <Entry
+                        shape_id={item.shape_id}
+                        shape_pt_lat={item.shape_pt_lat}
+                        shape_pt_lon={item.shape_pt_lon}
+                        shape_pt_sequence={item.shape_pt_sequence}
+                        key={index}
+                    />
+                );
+            });
+        } else {
+            console.log('aryData NOT available');
+            return <p>loading...</p>;
+        }
+    };
+
+    /*return a React element*/
+    return (
+        <>
+            <table>
+                <thead>
+                    <Head />
+                </thead>
+                <tbody>{handleAryData()}</tbody>
+            </table>
+        </>
+    );
+}
+TableAry.propTypes = {
+    aryData: PropTypes.array
+};
+export default TableAry;

api-with-paging/src/components/table-entry.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/*destructure props object*/
+const TableEntry = ({ shape_id, shape_pt_lat, shape_pt_lon, shape_pt_sequence }) => {
+    return (
+        <tr>
+            <td>{shape_id}</td>
+            <td>{shape_pt_lat}</td>
+            <td>{shape_pt_lon}</td>
+            <td>{shape_pt_sequence}</td>
+        </tr>
+    );
+};
+
+TableEntry.propTypes = {
+    shape_id: PropTypes.string,
+    shape_pt_lat: PropTypes.number,
+    shape_pt_lon: PropTypes.number,
+    shape_pt_sequence: PropTypes.number
+};
+
+export default TableEntry;

api-with-paging/src/components/table-head.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const TableHead = () => {
+    return (
+        <tr>
+            <td>shape_id</td>
+            <td>shape_pt_lat</td>
+            <td>shape_pt_lon</td>
+            <td>shape_pt_sequence</td>
+        </tr>
+    );
+};
+
+export default TableHead;

api-with-paging/src/index.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Home from './pages/home';
+//TODO remove debugging
+if (process.env.NODE_ENV !== 'production') {
+    console.log('development mode');
+}
+//since react 18
+import { createRoot } from 'react-dom/client';
+//create root container
+const root = createRoot(document.getElementById("root"));
+//render root app
+root.render(<Home />);

api-with-paging/src/pages/home.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ApiPaging from '../components/api-paging';
+
+const Home = () => {
+    return (
+	<>
+	    <p>Home</p>
+	    <ApiPaging />
+	</>
+    );
+}
+
+export default Home

auth0-blog/.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

auth0-blog/.gitignore

@@ -0,0 +1,108 @@
+# Others
+package-lock.json
+build*
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

auth0-blog/README.md

@@ -0,0 +1,16 @@
+# Auth0 Example
+
+## Table of Contents
+0. [General](#general)
+1. [Links](#links)
+
+# General
+
+# Links
+
+* [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k)
+* [Production](https://webpack.js.org/guides/production/)
+* [Setup Development and Production Environment for React App](https://medium.com/freestoneinfotech/setup-development-and-production-environment-for-react-app-397c4cc9e382)
+* [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/)
+* [Auth0 with React}(https://auth0.com/blog/complete-guide-to-react-user-authentication/)
+* [React/JavaScript +React Router 6: Authentication Code Sample](https://auth0.com/developers/hub/code-samples/spa/react-javascript/basic-authentication-with-react-router-6)

auth0-blog/app/app.jsx

@@ -0,0 +1,29 @@
+import React, {Fragment} from 'react';
+import { Route, Routes} from 'react-router-dom';
+import { useAuth0 } from '@auth0/auth0-react';
+
+import NavBar from "./components/nav-bar";
+import Loading from "./components/loading";
+import Profile from "./pages/profile";
+import Home from './pages/home';
+import ProtectedRoute from './auth/protected-route';
+export default function App() {
+    const { isLoading } = useAuth0();
+    if (isLoading) {
+	return <Loading />;
+    }
+    return (
+	    <Fragment>
+		<NavBar/>
+		    <Routes>
+			<Route
+			    path="/"
+			    element={<Home/>} />
+			<Route
+			    path="/profile"
+			    element={<ProtectedRoute component={Profile} />}
+          />
+		    </Routes>
+	    </Fragment>
+    );
+}

auth0-blog/app/auth/auth0-provider-with-history.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Auth0Provider } from '@auth0/auth0-react';
+
+const Auth0ProviderWithNavigate = ({ children }) => {
+    const domain = 'swingbe.eu.auth0.com';
+    const clientId = 'OySbj7SzpZeKxKGm8lGDNZW0pcGQBiJr';
+    const navigate = useNavigate();
+    const onRedirectCallback = (appState) => {
+	navigate.push(appState?.returnTo || window.location.pathname);
+    };
+    return (
+    <Auth0Provider
+      domain={domain}
+      clientId={clientId}
+      redirectUri={window.location.origin}
+      onRedirectCallback={onRedirectCallback}
+    >
+      {children}
+    </Auth0Provider>
+  );
+};
+
+export default Auth0ProviderWithNavigate;

auth0-blog/app/auth/protected-route.jsx

@@ -0,0 +1,11 @@
+import { withAuthenticationRequired } from "@auth0/auth0-react";
+import React from "react";
+import Loading from "../components/loading";
+const ProtectedRoute = ({ component }) => {
+  const Component = withAuthenticationRequired(component, {
+      onRedirecting: () => <Loading />,
+  });
+
+  return <Component />;
+};
+export default ProtectedRoute;

auth0-blog/app/components/auth-nav.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import AuthenticationButton from './authentication-button';
+
+const AuthNav = () => (
+  <div className="navbar-nav ml-auto">
+    <AuthenticationButton />
+  </div>
+);
+
+export default AuthNav;

auth0-blog/app/components/authentication-button.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import LoginButton from './login-button';
+import LogoutButton from './logout-button';
+
+import { useAuth0 } from '@auth0/auth0-react';
+
+const AuthenticationButton = () => {
+  const { isAuthenticated } = useAuth0();
+
+  return isAuthenticated ? <LogoutButton /> : <LoginButton />;
+};
+
+export default AuthenticationButton;

auth0-blog/app/components/hello.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+//destructure props
+const Hello = ({msg}) => {
+    return (
+	<>
+	    <div>{msg}</div>
+	</>
+    );
+}
+
+export default Hello
+
+Hello.propTypes = {
+    msg: PropTypes.string,
+};

auth0-blog/app/components/loading.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+const loadingImg =
+  "https://cdn.auth0.com/blog/auth0-react-sample/assets/loading.svg";
+
+const Loading = () => (
+  <div className="spinner">
+    <img src={loadingImg} alt="Loading..." />
+  </div>
+);
+
+export default Loading;

auth0-blog/app/components/login-button.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
+
+const LoginButton = () => {
+  const { loginWithRedirect } = useAuth0();
+  return (
+    <button
+      onClick={() => loginWithRedirect()}
+    >
+      Log In
+    </button>
+  );
+};
+
+export default LoginButton;

auth0-blog/app/components/logout-button.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
+
+const LogoutButton = () => {
+  const { logout } = useAuth0();
+  return (
+    <button
+      onClick={() =>
+        logout({
+          returnTo: window.location.origin,
+        })
+      }
+    >
+      Log Out
+    </button>
+  );
+};
+
+export default LogoutButton;

auth0-blog/app/components/main-nav.jsx

@@ -0,0 +1,19 @@
+import {NavLink} from "react-router-dom";
+import React from "react";
+
+const MainNav = () => (
+    <div>
+	<NavLink
+	    to="/"
+	>
+	    Home
+	</NavLink>
+	<NavLink
+	    to="/profile"
+	>
+	    Profile
+	</NavLink>
+  </div>
+);
+
+export default MainNav;

auth0-blog/app/components/nav-bar.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import MainNav from './main-nav';
+import AuthNav from './auth-nav';
+
+const NavBar = () => {
+  return (
+    <div className="nav-container mb-3">
+      <nav className="navbar navbar-expand-md navbar-light bg-light">
+        <div className="container">
+          <div className="navbar-brand logo" />
+          <MainNav />
+          <AuthNav />
+        </div>
+      </nav>
+    </div>
+  );
+};
+
+export default NavBar;

auth0-blog/app/components/signup-button.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
+
+const SignupButton = () => {
+  const { loginWithRedirect } = useAuth0();
+  return (
+    <button
+      className="btn btn-primary btn-block"
+      onClick={() =>
+        loginWithRedirect({
+          screen_hint: 'signup',
+        })
+      }
+    >
+      Sign Up
+    </button>
+  );
+};
+
+export default SignupButton;

auth0-blog/app/index.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter } from "react-router-dom";
+
+import App from './app';
+import Auth0ProviderWithHistory from './auth/auth0-provider-with-history';
+//TODO remove debugging
+if (process.env.NODE_ENV !== 'production') {
+    console.log('development mode');
+}
+/*ReactDOM.render is no longer supported in React 18. Use createRoot instead.*/
+import { createRoot } from 'react-dom/client';
+//create root container
+const root = createRoot(document.getElementById("root"));
+//render root app
+root.render(
+    <React.StrictMode>
+	<BrowserRouter>
+	    <Auth0ProviderWithHistory>
+		<App />
+	    </Auth0ProviderWithHistory>
+	</BrowserRouter>
+    </React.StrictMode>
+);

auth0-blog/app/pages/home.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Hello from '../components/hello';
+
+const Home = () => {
+    return (
+	<>
+	    <h1>Home</h1>
+	    <h2>(React.js Lambda Function Component)</h2>
+	    <Hello msg="Hello World!" />
+	</>
+    );
+}
+
+export default Home

auth0-blog/app/pages/profile.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { useAuth0 } from '@auth0/auth0-react';
+import Loading from '../components/loading';
+
+const Profile = () => {
+  const { user } = useAuth0();
+  const { name, picture, email } = user;
+
+  return (
+    <div>
+      <div>
+        <div>
+          <img
+            src={picture}
+            alt="Profile"
+          />
+        </div>
+        <div>
+          <h2>{name}</h2>
+            <p>{email}</p>
+        </div>
+      </div>
+      <div>
+        <pre>
+          {JSON.stringify(user, null, 2)}
+        </pre>
+      </div>
+    </div>
+  );
+};
+export default Profile;

auth0-blog/config/webpack.common.js

@@ -0,0 +1,36 @@
+//generate a HTML5 file including all webpack bundles in the body using script tags
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+//path is used to resolve properly across the OS
+const path = require('path');
+module.exports = {
+    //bundle *.js from this entry point
+    entry: path.resolve(__dirname, '../app/index.jsx'),
+    //create output file to be linked to index.html
+    output: {
+        filename: '[name].bundle.js',
+	path: path.resolve(__dirname, '../dist'),
+	clean: true,
+    },
+    module: {
+	rules: [
+	    {
+		//test all *.js using babel-loader
+		//test all *.jsx (e.g. React.js) using babel-loader
+		test: /\.(js|jsx)$/,
+		exclude: /node_modules/,
+		include: path.resolve(__dirname, '../app'),
+		use: ['babel-loader'],
+	    }
+	]
+    },
+    resolve: {
+	extensions: ['*', '.js', '.jsx'],
+    },
+    plugins: [
+	// create a plugin instance so that you can use it several times anywhere
+	new HtmlWebpackPlugin({
+	    title: 'Production',
+	    template: path.resolve(__dirname, "../public/index.html")
+	}),
+    ],
+};

auth0-blog/config/webpack.dev.js

@@ -0,0 +1,15 @@
+//path is used to resolve properly across the OS
+const path = require('path');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+//merge() calls in the environment-specific configuration to include commons
+module.exports = merge(common, {
+    //set development mode
+    mode: 'development',
+    //enable strong source mapping
+    devtool: 'inline-source-map',
+    devServer: {
+	static: path.resolve(__dirname, '../dist'),
+	port: 4040,
+    },
+});

auth0-blog/config/webpack.prod.js

@@ -0,0 +1,8 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+module.exports = merge(common, {
+    mode: 'production',
+    //source maps encouraged in production
+    //choose mapping with fairly quick build speed like source-map
+    devtool: 'source-map',
+});

auth0-blog/package.json

@@ -0,0 +1,39 @@
+{
+    "private": true,
+    "name": "auth0-example",
+    "description": "Auth0 example",
+    "version": "0.0.1",
+    "main": "index.js",
+    "keywords": [
+        "react",
+        "webpack",
+        "auth0"
+    ],
+    "author": "Software Ingenieur Begerad <dialog@SwIngBe.de>",
+    "license": "GPL-3.0-or-later",
+    "engines": {
+        "node": ">=10"
+    },
+    "scripts": {
+        "start": "webpack serve --open --config config/webpack.dev.js",
+        "build": "webpack --config config/webpack.prod.js"
+    },
+    "devDependencies": {
+        "@babel/core": "7.18.13",
+        "@babel/preset-env": "7.18.10",
+        "@babel/preset-react": "7.18.6",
+        "babel-loader": "8.2.5",
+        "html-webpack-plugin": "5.5.0",
+        "webpack": "5.74.0",
+        "webpack-cli": "4.10.0",
+        "webpack-dev-server": "4.10.1",
+        "webpack-merge": "5.8.0"
+    },
+    "dependencies": {
+        "@auth0/auth0-react": "1.10.2",
+        "prop-types": "15.8.1",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "react-router-dom": "6.3.0"
+    }
+}

auth0-blog/public/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>React Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

auth0/.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

auth0/.gitignore

@@ -0,0 +1,108 @@
+# Others
+package-lock.json
+build*
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

auth0/README.md

@@ -0,0 +1,15 @@
+# Auth0 Example
+
+## Table of Contents
+0. [General](#general)
+1. [Links](#links)
+
+# General
+
+# Links
+
+* [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k)
+* [Production](https://webpack.js.org/guides/production/)
+* [Setup Development and Production Environment for React App](https://medium.com/freestoneinfotech/setup-development-and-production-environment-for-react-app-397c4cc9e382)
+* [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/)
+* [Auth0 with React}(https://blog.suhailkakar.com/integrate-auth0-with-react-js-a-step-by-step-tutorial)

auth0/app/app.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Home from './pages/home';
+import LoginButton from './components/login-button';
+import LogoutButton from './components/logout-button';
+export default function App() {
+    return (
+	<>
+	    <div>
+		<h1>Auth0 with React.js</h1>
+		<Home />
+	    </div>
+	    <div>
+		<LoginButton />
+	    </div>
+	    <div>
+		<LogoutButton />
+	    </div>
+	</>
+    );
+}

auth0/app/components/hello.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+//destructure props
+const Hello = ({msg}) => {
+    return (
+	<>
+	    <div>{msg}</div>
+	</>
+    );
+}
+
+export default Hello
+
+Hello.propTypes = {
+    msg: PropTypes.string,
+};

auth0/app/components/login-button.jsx

@@ -0,0 +1,18 @@
+import { useAuth0 } from '@auth0/auth0-react';
+import React from 'react';
+
+function LoginButton(props) {
+    const { loginWithRedirect } = useAuth0()
+    return (
+        <div>
+            <button 
+                onClick={()=>loginWithRedirect()} 
+                className="loginButton"
+                >
+                Login
+                </button>
+        </div>
+    )
+}
+
+export default LoginButton;

auth0/app/components/logout-button.jsx

@@ -0,0 +1,18 @@
+import { useAuth0 } from '@auth0/auth0-react';
+import React from 'react';
+
+function LogoutButton(props) {
+    const { loginWithRedirect } = useAuth0()
+    return (
+        <div>
+            <button 
+                onClick={()=>loginWithRedirect()} 
+                className="loginButton"
+                >
+                Logout
+                </button>
+        </div>
+    )
+}
+
+export default LogoutButton;

auth0/app/index.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './app';
+import { Auth0Provider } from "@auth0/auth0-react";
+//TODO remove debugging
+if (process.env.NODE_ENV !== 'production') {
+    console.log('development mode');
+}
+//since react 18
+import { createRoot } from 'react-dom/client';
+//create root container
+const root = createRoot(document.getElementById("root"));
+//render root app
+root.render(
+    <Auth0Provider
+	domain="swingbe.eu.auth0.com"
+	clientId="0DZCL8TWnttm6zYbxmU675EmATaIEDfn"
+	redirectUri={window.location.origin}
+    >
+	<React.StrictMode>
+	    <App />
+	</React.StrictMode>
+    </Auth0Provider>
+);

auth0/app/pages/home.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Hello from '../components/hello';
+
+const Home = () => {
+    return (
+	<>
+	    <h1>Home</h1>
+	    <h2>(React.js Lambda Function Component)</h2>
+	    <Hello msg="Hello World!" />
+	</>
+    );
+}
+
+export default Home

auth0/config/webpack.common.js

@@ -0,0 +1,36 @@
+//generate a HTML5 file including all webpack bundles in the body using script tags
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+//path is used to resolve properly across the OS
+const path = require('path');
+module.exports = {
+    //bundle *.js from this entry point
+    entry: path.resolve(__dirname, '../app/index.jsx'),
+    //create output file to be linked to index.html
+    output: {
+        filename: '[name].bundle.js',
+	path: path.resolve(__dirname, '../dist'),
+	clean: true,
+    },
+    module: {
+	rules: [
+	    {
+		//test all *.js using babel-loader
+		//test all *.jsx (e.g. React.js) using babel-loader
+		test: /\.(js|jsx)$/,
+		exclude: /node_modules/,
+		include: path.resolve(__dirname, '../app'),
+		use: ['babel-loader'],
+	    }
+	]
+    },
+    resolve: {
+	extensions: ['*', '.js', '.jsx'],
+    },
+    plugins: [
+	// create a plugin instance so that you can use it several times anywhere
+	new HtmlWebpackPlugin({
+	    title: 'Production',
+	    template: path.resolve(__dirname, "../public/index.html")
+	}),
+    ],
+};

auth0/config/webpack.dev.js

@@ -0,0 +1,14 @@
+//path is used to resolve properly across the OS
+const path = require('path');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+//merge() calls in the environment-specific configuration to include commons
+module.exports = merge(common, {
+    //set development mode
+    mode: 'development',
+    //enable strong source mapping
+    devtool: 'inline-source-map',
+    devServer: {
+	static: path.resolve(__dirname, '../dist'),
+    },
+});

auth0/config/webpack.prod.js

@@ -0,0 +1,8 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+module.exports = merge(common, {
+    mode: 'production',
+    //source maps encouraged in production
+    //choose mapping with fairly quick build speed like source-map
+    devtool: 'source-map',
+});

auth0/package.json

@@ -0,0 +1,38 @@
+{
+    "private": true,
+    "name": "auth0-example",
+    "description": "Auth0 example",
+    "version": "0.0.1",
+    "main": "index.js",
+    "keywords": [
+        "react",
+        "webpack",
+        "auth0"
+    ],
+    "author": "Software Ingenieur Begerad <dialog@SwIngBe.de>",
+    "license": "GPL-3.0-or-later",
+    "engines": {
+        "node": ">=10"
+    },
+    "scripts": {
+        "start": "webpack serve --open --config config/webpack.dev.js",
+        "build": "webpack --config config/webpack.prod.js"
+    },
+    "devDependencies": {
+        "@babel/core": "7.18.13",
+        "@babel/preset-env": "7.18.10",
+        "@babel/preset-react": "7.18.6",
+        "babel-loader": "8.2.5",
+        "html-webpack-plugin": "5.5.0",
+        "webpack": "5.74.0",
+        "webpack-cli": "4.10.0",
+        "webpack-dev-server": "4.10.1",
+        "webpack-merge": "5.8.0"
+    },
+    "dependencies": {
+        "@auth0/auth0-react": "1.10.2",
+        "prop-types": "15.8.1",
+        "react": "18.2.0",
+        "react-dom": "18.2.0"
+    }
+}

auth0/public/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>React Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

axios-overpass-api/.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

axios-overpass-api/.gitignore

@@ -0,0 +1,107 @@
+# Others
+build*
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

axios-overpass-api/README.md

@@ -0,0 +1,17 @@
+# React.js Example
+
+## Table of Contents
+0. [General](#general)
+1. [Links](#links)
+
+# General
+
+# Links
+
+* [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k)
+* [Production](https://webpack.js.org/guides/production/)
+* [Setup Development and Production Environment for React App](https://medium.com/freestoneinfotech/setup-development-and-production-environment-for-react-app-397c4cc9e382)
+* [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/)
+* [load CSS](https://masteringjs.io/tutorials/webpack/css-loader)
+* [load CSS](https://webpack.js.org/loaders/css-loader/)
+* [load CSS](https://blog.jakoblind.no/css-modules-webpack/)

axios-overpass-api/app/app.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import Home from './pages/home';
+export default function App() {
+  return (
+    <div>
+	<h1>App</h1>
+	<Home />
+    </div>
+  )
+}

axios-overpass-api/app/components/hello.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+//destructure props
+const Hello = ({msg}) => {
+    return (
+	<>
+	    <div>{msg}</div>
+	</>
+    );
+}
+
+export default Hello
+
+Hello.propTypes = {
+    msg: PropTypes.string,
+};

axios-overpass-api/app/components/map.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import axios from 'axios';
+import qs from 'qs';
+
+var data = qs.stringify({
+	'data': '[bbox:51.990800124058914,10.045623779296875,52.552976197007524,11.01104736328125][out:json];(node["shop"="second_hand"];way["shop"="second_hand"];relation["shop"="second_hand"];);out center;'
+});
+
+var config = {
+    method: 'post',
+    maxBodyLength: Infinity,
+    url: 'https://overpass-api.de/api/interpreter',
+    headers: {
+	'Content-Type': 'application/x-www-form-urlencoded'
+    },
+    data : data
+};
+
+function myFunction(value,key) {
+    //console.log("key: "+key+",type: "+value.type);
+    if(value.tags.name===undefined){
+	console.log('ERROR: OSM element does NOT include name tag');
+    }else if(value.type==='node'){
+	console.log('node');
+	console.log('name: '+value.tags.name);
+	console.log('lat: '+value.lat);
+	console.log('lon: '+value.lon);
+    }else if(value.type==='way'){
+	console.log('way');
+	console.log('name: '+value.tags.name);
+	console.log('lat: '+value.center.lat);
+	console.log('lon: '+value.center.lon);
+    }else{
+	console.log('ERROR: OSM element NOT supported');
+    }
+} 
+
+function post () {
+    console.log('post() started...');
+    console.log('data: '+data);
+
+    axios(config)
+	.then(function (response) {
+	    //log JSON
+	    const dataObj=response.data;
+	    //console.log("dataObj: "+dataObj);
+	    const elemAry=dataObj.elements;
+	    const elemAryLength=elemAry.length;
+	    console.log("no: "+elemAryLength)
+	    elemAry.forEach(myFunction);
+	})
+	.catch(function (error) {
+	    console.log(error);
+	});
+    console.log('post() done.');
+}
+
+export default function Map() {
+    return (
+	<>
+	    <p>Map</ p>
+            <button onClick={post}>post</button>
+	</>
+    );
+}

axios-overpass-api/app/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './app';
+//TODO remove debugging
+if (process.env.NODE_ENV !== 'production') {
+    console.log('development mode');
+}
+//since react 18
+import { createRoot } from 'react-dom/client';
+//create root container
+const root = createRoot(document.getElementById("root"));
+//render root app
+root.render(
+    <React.StrictMode>
+	<App />
+    </React.StrictMode>
+);

axios-overpass-api/app/pages/home.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Hello from '../components/hello';
+import Map from '../components/map';
+import '../style.css';
+const Home = () => {
+    return (
+	<>
+	    <h2>Home</h2>
+	    <h3>(React.js Lambda Function Component)</h3>
+	    <Hello msg="Hello World!" />
+	    <Map />
+	</>
+    );
+}
+
+export default Home

axios-overpass-api/app/style.css

@@ -0,0 +1,3 @@
+h1 { color: red; }
+h2 { color: green; }
+h3 { color: blue; }

axios-overpass-api/config/webpack.common.js

@@ -0,0 +1,41 @@
+//generate a HTML5 file including all webpack bundles in the body using script tags
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+//path is used to resolve properly across the OS
+const path = require('path');
+module.exports = {
+    //bundle *.js from this entry point
+    entry: path.resolve(__dirname, '../app/index.jsx'),
+    //create output file to be linked to index.html
+    output: {
+        filename: '[name].bundle.js',
+	path: path.resolve(__dirname, '../dist'),
+	clean: true,
+    },
+    module: {
+	rules: [
+	    {
+		//test all *.js using babel-loader
+		//test all *.jsx (e.g. React.js) using babel-loader
+		test: /\.(js|jsx)$/,
+		exclude: /node_modules/,
+		include: path.resolve(__dirname, '../app'),
+		use: ['babel-loader'],
+	    },
+	    {
+		//test all *.css using style-loader and css-loader
+		test: /\.css$/i,
+		use: ["style-loader", "css-loader"],
+	    },
+	]
+    },
+    resolve: {
+	extensions: ['*', '.js', '.jsx'],
+    },
+    plugins: [
+	// create a plugin instance so that you can use it several times anywhere
+	new HtmlWebpackPlugin({
+	    title: 'Production',
+	    template: path.resolve(__dirname, "../public/index.html")
+	}),
+    ],
+};

axios-overpass-api/config/webpack.dev.js

@@ -0,0 +1,14 @@
+//path is used to resolve properly across the OS
+const path = require('path');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+//merge() calls in the environment-specific configuration to include commons
+module.exports = merge(common, {
+    //set development mode
+    mode: 'development',
+    //enable strong source mapping
+    devtool: 'inline-source-map',
+    devServer: {
+	static: path.resolve(__dirname, '../dist'),
+    },
+});

axios-overpass-api/config/webpack.prod.js

@@ -0,0 +1,8 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+module.exports = merge(common, {
+    mode: 'production',
+    //source maps encouraged in production
+    //choose mapping with fairly quick build speed like source-map
+    devtool: 'source-map',
+});

axios-overpass-api/package.json

@@ -0,0 +1,40 @@
+{
+    "private": true,
+    "name": "react-example",
+    "description": "React.js example",
+    "version": "0.1.0",
+    "main": "index.js",
+    "keywords": [
+        "react",
+        "webpack"
+    ],
+    "author": "Software Ingenieur Begerad <dialog@SwIngBe.de>",
+    "license": "GPL-3.0-or-later",
+    "engines": {
+        "node": ">=10"
+    },
+    "scripts": {
+        "start": "webpack serve --config config/webpack.dev.js",
+        "build": "webpack --config config/webpack.prod.js"
+    },
+    "devDependencies": {
+        "@babel/core": "7.18.13",
+        "@babel/preset-env": "7.18.10",
+        "@babel/preset-react": "7.18.6",
+        "babel-loader": "8.2.5",
+        "css-loader": "6.7.1",
+        "html-webpack-plugin": "5.5.0",
+        "style-loader": "3.3.1",
+        "webpack": "5.74.0",
+        "webpack-cli": "4.10.0",
+        "webpack-dev-server": "4.10.1",
+        "webpack-merge": "5.8.0"
+    },
+    "dependencies": {
+        "axios": "1.3.2",
+        "prop-types": "15.8.1",
+        "qs": "6.11.0",
+        "react": "18.2.0",
+        "react-dom": "18.2.0"
+    }
+}

axios-overpass-api/public/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>React Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

axios/.gitignore

@@ -0,0 +1,107 @@
+# Others
+build*
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

axios/package.json

@@ -1,6 +1,6 @@
 {
   "name": "axios-ex",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "axios example",
   "main": "index.js",
   "scripts": {
@@ -13,28 +13,28 @@
   "author": "Stefan Begerad",
   "license": "GPL-3.0-or-later",
   "dependencies": {
-    "axios": "^0.21.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "axios": "^0.27.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@babel/preset-env": "^7.15.4",
-    "@babel/preset-react": "^7.14.5",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.2.2",
-    "css-loader": "^6.2.0",
-    "eslint": "^7.32.0",
-    "eslint-config-react": "^1.1.7",
-    "eslint-loader": "^4.0.2",
-    "eslint-plugin-react": "^7.25.1",
-    "html-webpack-plugin": "^5.3.2",
-    "less": "^4.1.1",
-    "less-loader": "^10.0.1",
-    "prettier": "2.4.0",
-    "style-loader": "^3.2.1",
-    "webpack": "^5.52.0",
-    "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.1.1"
+    "@babel/core": "7.18.13",
+    "@babel/preset-env": "7.18.10",
+    "@babel/preset-react": "7.18.6",
+    "babel-eslint": "10.1.0",
+    "babel-loader": "8.2.5",
+    "css-loader": "6.7.1",
+    "eslint": "7.32.0",
+    "eslint-config-react": "1.1.7",
+    "eslint-loader": "4.0.2",
+    "eslint-plugin-react": "7.30.1",
+    "html-webpack-plugin": "5.5.0",
+    "less": "4.1.3",
+    "less-loader": "10.2.0",
+    "prettier": "2.7.1",
+    "style-loader": "3.3.1",
+    "webpack": "5.74.0",
+    "webpack-cli": "4.10.0",
+    "webpack-dev-server": "4.10.1"
   }
 }

axios/src/index.js

@@ -1,5 +1,13 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import Main from './main';
 
-ReactDOM.render(<Main />, document.getElementById('root'));
+/*ReactDOM.render is no longer supported in React 18. Use createRoot instead.*/
+import { createRoot } from 'react-dom/client';
+//create root container
+const root = createRoot(document.getElementById('root'));
+//render root app
+root.render(
+    <React.StrictMode>
+        <Main />
+    </React.StrictMode>
+);

axios/src/main.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import './style/main.less';
 import axios from 'axios';
-
+/*
 function axiosGet () {
     console.log('axiosGet() started...');
 
@@ -36,6 +36,31 @@ function axiosGet () {
         });
     console.log('axiosGet() done.');
 }
+*/
+function axiosGetVehiclePosition () {
+    console.log('axiosGetVehiclePosition() started...');
+
+
+    //axios.defaults.baseURL = 'https://test-tarifmatrix.vbn.de:4245';
+    //axios.defaults.baseURL = 'https://tarifmatrix.vbn.de:4445';
+    axios.defaults.baseURL = 'https://soll.vbn.de';
+    //axios.defaults.headers.get['Access-Control-Allow-Origin'] = '*';
+
+    axios
+        .get('vehicle-positions')
+    //handle rsp in async manner
+        .then((response) => {
+            if (response.data) {
+                console.log('axiosGetVehiclePosition() response.data: ', response.data);
+            } else {
+                console.log('axiosGetVehiclePosition() response.data unavailable ');
+            }
+        })
+        .catch(function (error) {
+            console.log(error);
+        });
+    console.log('axiosGetVehiclePosition() done.');
+}
 
 /*
  *component Main
@@ -47,7 +72,7 @@ class Main extends React.Component {
         return (
             <div>
                 <p>main</p>
-                <button onClick={axiosGet}>axios</button>
+                <button onClick={axiosGetVehiclePosition}>axios</button>
             </div>
         );
     }

cards/.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

cards/.gitignore

@@ -0,0 +1,108 @@
+# Others
+package-lock.json
+build*
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

cards/README.md

@@ -0,0 +1,14 @@
+# React.js Example
+
+## Table of Contents
+0. [General](#general)
+1. [Links](#links)
+
+# General
+
+# Links
+
+* [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k)
+* [Production](https://webpack.js.org/guides/production/)
+* [Setup Development and Production Environment for React App](https://medium.com/freestoneinfotech/setup-development-and-production-environment-for-react-app-397c4cc9e382)
+* [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/)

cards/config/webpack.common.js

@@ -0,0 +1,36 @@
+//generate a HTML5 file including all webpack bundles in the body using script tags
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+//path is used to resolve properly across the OS
+const path = require('path');
+module.exports = {
+    //bundle *.js from this entry point
+    entry: path.resolve(__dirname, '../src/index.js'),
+    //create output file to be linked to index.html
+    output: {
+        filename: '[name].bundle.js',
+	path: path.resolve(__dirname, '../dist'),
+	clean: true,
+    },
+    module: {
+	rules: [
+	    {
+		//test all *.js using babel-loader
+		//test all *.jsx (e.g. React.js) using babel-loader
+		test: /\.(js|jsx)$/,
+		exclude: /node_modules/,
+		include: path.resolve(__dirname, '../src'),
+		use: ['babel-loader'],
+	    }
+	]
+    },
+    resolve: {
+	extensions: ['*', '.js', '.jsx'],
+    },
+    plugins: [
+	// create a plugin instance so that you can use it several times anywhere
+	new HtmlWebpackPlugin({
+	    title: 'Production',
+	    template: path.resolve(__dirname, "../public/index.html")
+	}),
+    ],
+};

cards/config/webpack.dev.js

@@ -0,0 +1,14 @@
+//path is used to resolve properly across the OS
+const path = require('path');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+//merge() calls in the environment-specific configuration to include commons
+module.exports = merge(common, {
+    //set development mode
+    mode: 'development',
+    //enable strong source mapping
+    devtool: 'inline-source-map',
+    devServer: {
+	static: path.resolve(__dirname, '../dist'),
+    },
+});

cards/config/webpack.prod.js

@@ -0,0 +1,8 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+module.exports = merge(common, {
+    mode: 'production',
+    //source maps encouraged in production
+    //choose mapping with fairly quick build speed like source-map
+    devtool: 'source-map',
+});

cards/package.json

@@ -0,0 +1,37 @@
+{
+    "private": true,
+    "name": "react-example",
+    "description": "React.js example",
+    "version": "0.0.1",
+    "main": "index.js",
+    "keywords": [
+        "react",
+        "webpack"
+    ],
+    "author": "Software Ingenieur Begerad <dialog@SwIngBe.de>",
+    "license": "GPL-3.0-or-later",
+    "engines": {
+        "node": ">=10"
+    },
+    "scripts": {
+        "start": "webpack serve --open --config config/webpack.dev.js",
+        "build": "webpack --config config/webpack.prod.js"
+    },
+    "devDependencies": {
+        "@babel/core": "7.18.13",
+        "@babel/preset-env": "7.18.10",
+        "@babel/preset-react": "7.18.6",
+        "babel-loader": "8.2.5",
+        "html-webpack-plugin": "5.5.0",
+        "webpack": "5.74.0",
+        "webpack-cli": "4.10.0",
+        "webpack-dev-server": "4.10.1",
+        "webpack-merge": "5.8.0"
+    },
+    "dependencies": {
+        "axios": "0.27.2",
+        "prop-types": "15.8.1",
+        "react": "18.2.0",
+        "react-dom": "18.2.0"
+    }
+}

cards/public/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>React Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

cards/src/components/card.jsx

@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import PropTypes from 'prop-types';
+//destructure props
+const Card = ({name}) => {
+    /*store count as array in function component state*/
+    /*initialise as empty array*/
+    const [count, setCount] = useState(null);
+
+    /*fetch count in a JavaScript function*/
+    const getCount = async () => {
+        try {
+            /*TODO make route available using config*/
+            /*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
+	    const address=`https://www.v1gtfs.delfi.api.swingbe.de/table-${name}-count`;
+            const count = await axios.get(address);
+
+            /*set state*/
+            setCount(count.data[0]['count']);
+        } catch (err) {
+            console.log('err.message: ' + err.message);
+        }
+    };
+
+    /*this hook is run after a DOM update. Changing state migh result in an infinite loop*/
+    useEffect(() => {
+    /*effect goes here*/
+
+        /*hook need to be placed in body of the function component in which it is used*/
+        getCount();
+
+    /*use an empty dependency array to ensure the hook is running only once*/
+    /*TODO study dependency array: https://reactjs.org/docs/hooks-effect.html*/
+    }, []);
+    return <p>{name}: {count?count:'loading...'}</p>;
+};
+
+Card.propTypes = {
+    name: PropTypes.string
+};
+
+export default Card;

cards/src/components/cards.jsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import Card from './card';
+const Cards = () => {
+    /*store and initialise data in function component state*/
+    const [tables, setTables] = useState([]);
+    /*fetch data in a JavaScript function*/
+    const getTables = async () => {
+        try {
+            /*TODO make route available using config*/
+            /*TODO handle errors: https://www.valentinog.com/blog/await-react/*/
+            const tables = await axios.get(
+                'https://www.v1gtfs.delfi.api.swingbe.de/table-names'
+            );
+
+            /*set state*/
+            setTables(tables.data);
+        } catch (err) {
+            console.log('err.message: ' + err.message);
+        }
+    };
+
+    /*this hook is run after a DOM update. Changing state migh result in an infinite loop*/
+    useEffect(() => {
+    /*effect goes here*/
+
+        /*hook need to be placed in body of the function component in which it is used*/
+        getTables();
+
+    /*use an empty dependency array to ensure the hook is running only once*/
+    /*TODO study dependency array: https://reactjs.org/docs/hooks-effect.html*/
+    }, []);
+    if(tables){
+	return(
+	    <>
+		<p>GTFS tables</p>
+		{tables.map((item,index)=>{
+		    return <Card key={index} name={item['table_name']}/>
+		})
+		}
+	    </>
+	);
+    }else{
+	return(
+	    <>
+		<p>GTFS tables loading...</p>
+	    </>
+	);
+    }
+}
+
+export default Cards
+
+
+
+
+
+
+
+
+
+
+
+
+

cards/src/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Home from './pages/home';
+//TODO remove debugging
+if (process.env.NODE_ENV !== 'production') {
+    console.log('development mode');
+}
+//since react 18
+import { createRoot } from 'react-dom/client';
+//create root container
+const root = createRoot(document.getElementById("root"));
+//render root app
+root.render(<Home />);

cards/src/pages/home.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Cards from '../components/cards';
+
+const Home = () => {
+    return (
+	<>
+	    <p>Home</p>
+	    <Cards />
+	</>
+    );
+}
+
+export default Home

cnt-cmpnnt/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "regenerator": true
+      }
+    ]
+  ]
+}

cnt-cmpnnt/.eslintrc

@@ -0,0 +1,19 @@
+{
+  "parser": "@babel/eslint-parser",
+  "extends": "eslint:recommended",
+  "env": {
+  "es6": 1,
+  "node": 1
+  },
+  "parserOptions": {
+  "ecmaVersion": 2020
+  },
+  "ignorePatterns": [
+  "node_modules",
+  "dist"
+  ],
+  "rules": {
+  "no-console": "error",
+  "no-mixed-spaces-and-tabs": 0
+  }
+}

cnt-cmpnnt/.gitignore

@@ -0,0 +1,107 @@
+# Others
+build*
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

cnt-cmpnnt/.npmrc

@@ -0,0 +1,2 @@
+# .npmrc
+engine-strict=true

cnt-cmpnnt/config/webpack.common.js

@@ -0,0 +1,50 @@
+// generate a HTML5 file including all webpack bundles in the body using script tags
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+// path is used to resolve properly across the OS
+const path = require('path');
+
+module.exports = {
+  // bundle *.js from this entry point
+  entry: path.resolve(__dirname, '../src/index.jsx'),
+  // create output file to be linked to index.html
+  output: {
+    filename: '[name].bundle.js',
+    path: path.resolve(__dirname, '../dist'),
+    clean: true,
+  },
+  module: {
+    rules: [
+	  {
+        // test all *.js using babel-loader
+        // test all *.jsx (e.g. React.js) using babel-loader
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+              include: path.resolve(__dirname, '../src'),
+              use: {
+		  loader: 'babel-loader',
+		  options: {
+		      presets: [
+			  '@babel/preset-env',
+			  '@babel/preset-react',
+		      ],
+		  },
+              },
+	  },
+	{
+            // test all *.css using style-loader and css-loader
+            test: /\.css$/i,
+            use: ['style-loader', 'css-loader'],
+	},
+    ],
+  },
+  resolve: {
+    extensions: ['*', '.js', '.jsx'],
+  },
+  plugins: [
+    // create a plugin instance so that you can use it several times anywhere
+    new HtmlWebpackPlugin({
+	    title: 'Production',
+	    template: path.resolve(__dirname, '../public/index.html'),
+    }),
+  ],
+};

cnt-cmpnnt/config/webpack.dev.js

@@ -0,0 +1,20 @@
+// path is used to resolve properly across the OS
+const path = require('path');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common');
+// merge() calls in the environment-specific configuration to include commons
+module.exports = merge(common, {
+  // set development mode
+  mode: 'development',
+  // enable strong source mapping
+  devtool: 'inline-source-map',
+  devServer: {
+    static: path.resolve(__dirname, '../dist'),
+    /*
+	When using the HTML5 History API,
+	the index.html page will likely have to be served in place of any 404 responses.
+	Enable devServer.historyApiFallback by setting it to true.
+	*/
+    historyApiFallback: true,
+  },
+});

cnt-cmpnnt/config/webpack.prod.js

@@ -0,0 +1,9 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common');
+
+module.exports = merge(common, {
+  mode: 'production',
+  // source maps encouraged in production
+  // choose mapping with fairly quick build speed like source-map
+  devtool: 'source-map',
+});

cnt-cmpnnt/package.json

@@ -0,0 +1,47 @@
+{
+    "private": true,
+    "name": "react-example",
+    "description": "React.js example",
+    "version": "0.1.0",
+    "main": "index.js",
+    "keywords": [
+        "react",
+        "webpack"
+    ],
+    "author": "Software Ingenieur Begerad <dialog@SwIngBe.de>",
+    "license": "GPL-3.0-or-later",
+    "engines": {
+        "node": ">=18.17.0"
+    },
+    "scripts": {
+        "start": "webpack serve --config config/webpack.dev.js",
+        "build": "webpack --config config/webpack.prod.js",
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "lint": "eslint .",
+        "lint:fix": "eslint --fix ."
+    },
+    "devDependencies": {
+        "@babel/core": "7.23.9",
+        "@babel/eslint-parser": "7.23.10",
+        "@babel/plugin-transform-runtime": "7.23.9",
+        "@babel/preset-env": "7.23.9",
+        "@babel/preset-react": "7.23.3",
+        "@babel/runtime": "7.23.9",
+        "babel-loader": "9.1.3",
+        "css-loader": "6.10.0",
+        "eslint": "8.56.0",
+        "eslint-webpack-plugin": "4.0.1",
+        "style-loader": "3.3.4",
+        "webpack": "5.90.2",
+        "webpack-cli": "5.1.4",
+        "webpack-dev-server": "5.0.1"
+    },
+    "dependencies": {
+        "axios": "1.6.8",
+        "html-webpack-plugin": "5.6.0",
+        "prop-types": "15.8.1",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "webpack-merge": "5.10.0"
+    }
+}

cnt-cmpnnt/public/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>React Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

cnt-cmpnnt/readme.md

@@ -0,0 +1,17 @@
+# React.js Example
+
+## Table of Contents
+0. [General](#general)
+1. [Links](#links)
+
+# General
+
+# Links
+
+* [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k)
+* [Production](https://webpack.js.org/guides/production/)
+* [Setup Development and Production Environment for React App](https://medium.com/freestoneinfotech/setup-development-and-production-environment-for-react-app-397c4cc9e382)
+* [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/)
+* [load CSS](https://masteringjs.io/tutorials/webpack/css-loader)
+* [load CSS](https://webpack.js.org/loaders/css-loader/)
+* [load CSS](https://blog.jakoblind.no/css-modules-webpack/)

cnt-cmpnnt/src/components/abs-entity-count.jsx

@@ -0,0 +1,32 @@
+import axios from 'axios';
+import React, { useEffect, useState } from 'react';
+
+import config from '../config';
+import {getAbsEntityCount} from '../utils/axios-utils';
+
+export default function AbsEntityCount() {
+
+    const [absEntityCount, setAbsCount] = useState(null);
+
+    const handleAbsEntityCount = async () => {
+	let absEntityCount = null;
+        try {
+	    absEntityCount = await getAbsEntityCount(`${config.API}stops-count`);
+        } catch (err) {
+	    console.error('handleAbsEntityCount(): err.message: ' + err.message);
+        }
+	setAbsCount(absEntityCount);
+    };
+
+    useEffect(() => {
+	handleAbsEntityCount();
+    }, []);
+
+    return (
+	<>
+	    <p>
+		Abs Count: {absEntityCount ? absEntityCount : 'loading...'}&nbsp;
+	    </p>
+	</>
+    );
+};

cnt-cmpnnt/src/components/hello.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+//destructure props
+const Hello = ({msg}) => {
+    return (
+	<>
+	    <div>{msg}</div>
+	</>
+    );
+}
+
+export default Hello
+
+Hello.propTypes = {
+    msg: PropTypes.string,
+};