From ca1bd36a0f3ae86151be3cb9a599b9962a760d58 Mon Sep 17 00:00:00 2001 From: "Begerad, Stefan" Date: Fri, 10 Jun 2022 10:06:59 +0200 Subject: [PATCH] feat(string2fileDload): initial commit --- string2fileDload/.babelrc | 6 ++ string2fileDload/.gitignore | 108 ++++++++++++++++++++++ string2fileDload/README.md | 12 +++ string2fileDload/package.json | 33 +++++++ string2fileDload/public/index.html | 10 ++ string2fileDload/src/components/dload.jsx | 34 +++++++ string2fileDload/src/index.js | 10 ++ string2fileDload/src/pages/home.jsx | 12 +++ string2fileDload/webpack.config.js | 26 ++++++ 9 files changed, 251 insertions(+) create mode 100644 string2fileDload/.babelrc create mode 100644 string2fileDload/.gitignore create mode 100644 string2fileDload/README.md create mode 100644 string2fileDload/package.json create mode 100644 string2fileDload/public/index.html create mode 100644 string2fileDload/src/components/dload.jsx create mode 100644 string2fileDload/src/index.js create mode 100644 string2fileDload/src/pages/home.jsx create mode 100644 string2fileDload/webpack.config.js diff --git a/string2fileDload/.babelrc b/string2fileDload/.babelrc new file mode 100644 index 0000000..4f06b0c --- /dev/null +++ b/string2fileDload/.babelrc @@ -0,0 +1,6 @@ +{ + "presets": [ + "@babel/preset-env", + "@babel/preset-react" + ] +} diff --git a/string2fileDload/.gitignore b/string2fileDload/.gitignore new file mode 100644 index 0000000..f992571 --- /dev/null +++ b/string2fileDload/.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/string2fileDload/README.md b/string2fileDload/README.md new file mode 100644 index 0000000..418561b --- /dev/null +++ b/string2fileDload/README.md @@ -0,0 +1,12 @@ +# 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) +* [Download a string as .txt file in React](https://stackoverflow.com/questions/44656610/download-a-string-as-txt-file-in-react) \ No newline at end of file diff --git a/string2fileDload/package.json b/string2fileDload/package.json new file mode 100644 index 0000000..cff7d85 --- /dev/null +++ b/string2fileDload/package.json @@ -0,0 +1,33 @@ +{ + "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 --config ./webpack.config.js --mode development" + }, + "devDependencies": { + "@babel/core": "^7.18.2", + "@babel/preset-env": "^7.18.2", + "@babel/preset-react": "^7.17.12", + "babel-loader": "^8.2.5", + "webpack": "^5.73.0", + "webpack-cli": "^4.9.2", + "webpack-dev-server": "^4.9.2" + }, + "dependencies": { + "prop-types": "^15.8.1", + "react": "^18.1.0", + "react-dom": "^18.1.0" + } +} diff --git a/string2fileDload/public/index.html b/string2fileDload/public/index.html new file mode 100644 index 0000000..0411cd4 --- /dev/null +++ b/string2fileDload/public/index.html @@ -0,0 +1,10 @@ + + + + React Example + + +
+ + + diff --git a/string2fileDload/src/components/dload.jsx b/string2fileDload/src/components/dload.jsx new file mode 100644 index 0000000..d830ce3 --- /dev/null +++ b/string2fileDload/src/components/dload.jsx @@ -0,0 +1,34 @@ +import React from 'react'; +function Download(){ + + const dloadFile = () => { + const element = document.createElement("a"); + const inputElem=document.getElementById('dloadInput'); + let inputValue=null; + if(typeof inputElem !== 'undefined' && inputElem !== null) { + inputValue=inputElem.value; + const file = new Blob([inputValue], {type: 'text/plain'}); + element.href = URL.createObjectURL(file); + element.download = "dloadFile.csv"; + document.body.appendChild(element); + //TODO Verify:Required for this to work in FireFox? + element.click(); + } + } + return( +
+ + +
+ ); +} + +export default Download; diff --git a/string2fileDload/src/index.js b/string2fileDload/src/index.js new file mode 100644 index 0000000..9565356 --- /dev/null +++ b/string2fileDload/src/index.js @@ -0,0 +1,10 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import Home from './pages/home'; + +//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/string2fileDload/src/pages/home.jsx b/string2fileDload/src/pages/home.jsx new file mode 100644 index 0000000..dd4c1ef --- /dev/null +++ b/string2fileDload/src/pages/home.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import Dload from '../components/dload'; + +const Home = () => { + return ( + <> + + + ); +} + +export default Home diff --git a/string2fileDload/webpack.config.js b/string2fileDload/webpack.config.js new file mode 100644 index 0000000..eda630f --- /dev/null +++ b/string2fileDload/webpack.config.js @@ -0,0 +1,26 @@ +//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'), + module: { + rules: [ + { + //test all *.js using babel-loader + //test all *.jsx (e.g. React.js) using babel-loader + test: /\.(js|jsx)$/, + exclude: /node_modules/, + use: ['babel-loader'], + } + ] + }, + resolve: { + extensions: ['*', '.js', '.jsx'], + }, + //create output file to be linked to index.html + output: { + path: path.resolve(__dirname, './public'), + filename: 'bundle.js', + }, +};