From a3d072c5056e8485672bb7cf4222247d6abb5885 Mon Sep 17 00:00:00 2001 From: "Begerad, Stefan" Date: Tue, 7 Jun 2022 20:34:27 +0200 Subject: [PATCH] feat(toggle-btn): initial commit --- toggle-btn/.babelrc | 6 ++ toggle-btn/.gitignore | 108 ++++++++++++++++++++ toggle-btn/README.md | 12 +++ toggle-btn/package.json | 33 ++++++ toggle-btn/public/index.html | 10 ++ toggle-btn/src/components/hello.jsx | 17 +++ toggle-btn/src/components/toggle-button.jsx | 22 ++++ toggle-btn/src/index.js | 10 ++ toggle-btn/src/pages/home.jsx | 33 ++++++ toggle-btn/webpack.config.js | 26 +++++ 10 files changed, 277 insertions(+) create mode 100644 toggle-btn/.babelrc create mode 100644 toggle-btn/.gitignore create mode 100644 toggle-btn/README.md create mode 100644 toggle-btn/package.json create mode 100644 toggle-btn/public/index.html create mode 100644 toggle-btn/src/components/hello.jsx create mode 100644 toggle-btn/src/components/toggle-button.jsx create mode 100644 toggle-btn/src/index.js create mode 100644 toggle-btn/src/pages/home.jsx create mode 100644 toggle-btn/webpack.config.js diff --git a/toggle-btn/.babelrc b/toggle-btn/.babelrc new file mode 100644 index 0000000..4f06b0c --- /dev/null +++ b/toggle-btn/.babelrc @@ -0,0 +1,6 @@ +{ + "presets": [ + "@babel/preset-env", + "@babel/preset-react" + ] +} diff --git a/toggle-btn/.gitignore b/toggle-btn/.gitignore new file mode 100644 index 0000000..f992571 --- /dev/null +++ b/toggle-btn/.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/toggle-btn/README.md b/toggle-btn/README.md new file mode 100644 index 0000000..fafad45 --- /dev/null +++ b/toggle-btn/README.md @@ -0,0 +1,12 @@ +# toggle-button + +## 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) +* [How to implement toggle using ReactJS ?](https://www.geeksforgeeks.org/how-to-implement-toggle-using-reactjs/) diff --git a/toggle-btn/package.json b/toggle-btn/package.json new file mode 100644 index 0000000..2265bfa --- /dev/null +++ b/toggle-btn/package.json @@ -0,0 +1,33 @@ +{ + "private": true, + "name": "toggle-button", + "description": "example using webpack for react", + "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/toggle-btn/public/index.html b/toggle-btn/public/index.html new file mode 100644 index 0000000..fe28c43 --- /dev/null +++ b/toggle-btn/public/index.html @@ -0,0 +1,10 @@ + + + + Hello React + + +
+ + + diff --git a/toggle-btn/src/components/hello.jsx b/toggle-btn/src/components/hello.jsx new file mode 100644 index 0000000..2904898 --- /dev/null +++ b/toggle-btn/src/components/hello.jsx @@ -0,0 +1,17 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +//destructure props +const Hello = ({msg}) => { + return ( + <> +
{msg}
+ + ); +} + +export default Hello + +Hello.propTypes = { + msg: PropTypes.string, +}; diff --git a/toggle-btn/src/components/toggle-button.jsx b/toggle-btn/src/components/toggle-button.jsx new file mode 100644 index 0000000..3b54275 --- /dev/null +++ b/toggle-btn/src/components/toggle-button.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +const ToggleBtn = (props) => { + //destructuring + const {btnState,btnTrue,btnFalse,descTrue,descFalse,btnOnClick} = props; + //render + return ( + <> + + {btnState===false?descFalse:descTrue} + + ); +}; +export default ToggleBtn; +ToggleBtn.propTypes = { + btnTrue: PropTypes.string, + btnFalse: PropTypes.string, + descTrue: PropTypes.string, + descFalse: PropTypes.string, +}; diff --git a/toggle-btn/src/index.js b/toggle-btn/src/index.js new file mode 100644 index 0000000..9565356 --- /dev/null +++ b/toggle-btn/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/toggle-btn/src/pages/home.jsx b/toggle-btn/src/pages/home.jsx new file mode 100644 index 0000000..bb53fdb --- /dev/null +++ b/toggle-btn/src/pages/home.jsx @@ -0,0 +1,33 @@ +import React, {useState} from 'react'; +import Hello from '../components/hello'; +import ToggleButton from '../components/toggle-button'; + +const Home = () => { + //handle state + const [btnState,setBtnState]=useState(false); + //toggle + const toggle=()=>{ + setBtnState((btnState)=>!btnState); + }; + const toggleBtn=; + + //render + return ( + <> +

Home

+

(React.js Lambda Function Component)

+ + {toggleBtn} + {btnState?
all
:
paging
} + + ); +} + +export default Home diff --git a/toggle-btn/webpack.config.js b/toggle-btn/webpack.config.js new file mode 100644 index 0000000..eda630f --- /dev/null +++ b/toggle-btn/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', + }, +};