From 0ed25717338931f86e601dc4f23b58e3eb58ce93 Mon Sep 17 00:00:00 2001 From: "Begerad, Stefan" Date: Fri, 24 Jun 2022 14:40:15 +0200 Subject: [PATCH] feat(cards): initial commit --- cards/.babelrc | 6 ++ cards/.gitignore | 108 +++++++++++++++++++++++++++ cards/README.md | 14 ++++ cards/config/webpack.common.js | 36 +++++++++ cards/config/webpack.dev.js | 14 ++++ cards/config/webpack.prod.js | 8 ++ cards/package.json | 37 +++++++++ cards/public/index.html | 10 +++ cards/src/components/card-agency.jsx | 51 +++++++++++++ cards/src/components/cards.jsx | 13 ++++ cards/src/index.js | 13 ++++ cards/src/pages/home.jsx | 13 ++++ 12 files changed, 323 insertions(+) create mode 100644 cards/.babelrc create mode 100644 cards/.gitignore create mode 100644 cards/README.md create mode 100644 cards/config/webpack.common.js create mode 100644 cards/config/webpack.dev.js create mode 100644 cards/config/webpack.prod.js create mode 100644 cards/package.json create mode 100644 cards/public/index.html create mode 100644 cards/src/components/card-agency.jsx create mode 100644 cards/src/components/cards.jsx create mode 100644 cards/src/index.js create mode 100644 cards/src/pages/home.jsx diff --git a/cards/.babelrc b/cards/.babelrc new file mode 100644 index 0000000..4f06b0c --- /dev/null +++ b/cards/.babelrc @@ -0,0 +1,6 @@ +{ + "presets": [ + "@babel/preset-env", + "@babel/preset-react" + ] +} diff --git a/cards/.gitignore b/cards/.gitignore new file mode 100644 index 0000000..f992571 --- /dev/null +++ b/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 diff --git a/cards/README.md b/cards/README.md new file mode 100644 index 0000000..a259348 --- /dev/null +++ b/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/) diff --git a/cards/config/webpack.common.js b/cards/config/webpack.common.js new file mode 100644 index 0000000..c517769 --- /dev/null +++ b/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") + }), + ], +}; diff --git a/cards/config/webpack.dev.js b/cards/config/webpack.dev.js new file mode 100644 index 0000000..844d354 --- /dev/null +++ b/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'), + }, +}); diff --git a/cards/config/webpack.prod.js b/cards/config/webpack.prod.js new file mode 100644 index 0000000..e47c24a --- /dev/null +++ b/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', +}); diff --git a/cards/package.json b/cards/package.json new file mode 100644 index 0000000..69ce5d6 --- /dev/null +++ b/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 ", + "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.2", + "@babel/preset-env": "^7.18.2", + "@babel/preset-react": "^7.17.12", + "babel-loader": "^8.2.5", + "html-webpack-plugin": "^5.5.0", + "webpack": "^5.73.0", + "webpack-cli": "^4.9.2", + "webpack-dev-server": "^4.9.2", + "webpack-merge": "^5.8.0" + }, + "dependencies": { + "axios": "^0.27.2", + "prop-types": "^15.8.1", + "react": "^18.1.0", + "react-dom": "^18.1.0" + } +} diff --git a/cards/public/index.html b/cards/public/index.html new file mode 100644 index 0000000..965d3b5 --- /dev/null +++ b/cards/public/index.html @@ -0,0 +1,10 @@ + + + + + React Example + + +
+ + diff --git a/cards/src/components/card-agency.jsx b/cards/src/components/card-agency.jsx new file mode 100644 index 0000000..8698881 --- /dev/null +++ b/cards/src/components/card-agency.jsx @@ -0,0 +1,51 @@ +import React, { useEffect, useState } from 'react'; +import axios from 'axios'; + +const CardAgency = () => { + /*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 count = await axios.get( + 'https://www.v1gtfs.delfi.api.swingbe.de/table-agency-count' + ); + + /*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*/ + }, []); + if(count){ + return( + <> +

Card Agency

+

count: {count}

+ + ); + }else{ + return( + <> +

Card Agency

+

loading...

+ + ); + } +}; +export default CardAgency; diff --git a/cards/src/components/cards.jsx b/cards/src/components/cards.jsx new file mode 100644 index 0000000..39730d1 --- /dev/null +++ b/cards/src/components/cards.jsx @@ -0,0 +1,13 @@ +import React from 'react'; +import CardsAgency from './card-agency'; + +const Cards = () => { + return ( + <> +

Cards

+ + + ); +} + +export default Cards diff --git a/cards/src/index.js b/cards/src/index.js new file mode 100644 index 0000000..2c507a4 --- /dev/null +++ b/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(); diff --git a/cards/src/pages/home.jsx b/cards/src/pages/home.jsx new file mode 100644 index 0000000..59db687 --- /dev/null +++ b/cards/src/pages/home.jsx @@ -0,0 +1,13 @@ +import React from 'react'; +import Cards from '../components/cards'; + +const Home = () => { + return ( + <> +

Home

+ + + ); +} + +export default Home