diff --git a/form/.babelrc b/form/.babelrc new file mode 100644 index 0000000..4f06b0c --- /dev/null +++ b/form/.babelrc @@ -0,0 +1,6 @@ +{ + "presets": [ + "@babel/preset-env", + "@babel/preset-react" + ] +} diff --git a/form/.gitignore b/form/.gitignore new file mode 100644 index 0000000..f992571 --- /dev/null +++ b/form/.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/form/README.md b/form/README.md new file mode 100644 index 0000000..e8d6ac1 --- /dev/null +++ b/form/README.md @@ -0,0 +1,14 @@ +# form + +## Table of Contents +0. [General](#general) +1. [Links](#links) + +# General + +present form examples based on grassroot project +[webpack-react](../webpack-react) + +# Links + +* [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k) diff --git a/form/package.json b/form/package.json new file mode 100644 index 0000000..2ccd56c --- /dev/null +++ b/form/package.json @@ -0,0 +1,33 @@ +{ + "private": true, + "name": "webpack-react", + "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/form/public/index.html b/form/public/index.html new file mode 100644 index 0000000..fe28c43 --- /dev/null +++ b/form/public/index.html @@ -0,0 +1,10 @@ + + + + Hello React + + +
+ + + diff --git a/form/src/components/form-value.jsx b/form/src/components/form-value.jsx new file mode 100644 index 0000000..a030e83 --- /dev/null +++ b/form/src/components/form-value.jsx @@ -0,0 +1,30 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +/*controlled component: input form value controlled by React*/ +const FormValue = (props) => { + /*destructuring*/ + const { value, valueName, onChange, onSubmit } = props; + + return ( + /*one onChange handler for each value*/ + /*input names should match state names*/ + <> +
+ + +
+ + ); +}; +export default FormValue; + +FormValue.propTypes = { + value: PropTypes.string, + valueName: PropTypes.string, + onChange: PropTypes.func, + onSubmit: PropTypes.func +}; diff --git a/form/src/components/hello.jsx b/form/src/components/hello.jsx new file mode 100644 index 0000000..2904898 --- /dev/null +++ b/form/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/form/src/index.js b/form/src/index.js new file mode 100644 index 0000000..9565356 --- /dev/null +++ b/form/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/form/src/pages/home.jsx b/form/src/pages/home.jsx new file mode 100644 index 0000000..a275dd1 --- /dev/null +++ b/form/src/pages/home.jsx @@ -0,0 +1,38 @@ +import React, { useState } from 'react'; +import Hello from '../components/hello'; +import Form from '../components/form-value'; + +const Home = () => { + //handle state + const [value, setValue] = useState(''); + + const handleSubmit = () => { + event.preventDefault(); + console.log('handleSubmit() todo'); + }; + + const handleChange = (e) => { + console.log('e.target.value: '+e.target.value); + setValue(e.target.value); + }; + + const form = ( +
+ ); + + return ( + <> +

Home

+

(React.js Lambda Function Component)

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