From 497db065d32371cef28d0cd41c86f5ba0e4cb794 Mon Sep 17 00:00:00 2001 From: "Begerad, Stefan" Date: Thu, 9 Jun 2022 14:29:12 +0200 Subject: [PATCH] feat(crud): initial commit --- crud/.babelrc | 6 ++ crud/.gitignore | 108 ++++++++++++++++++++++++++++++++ crud/README.md | 11 ++++ crud/package.json | 35 +++++++++++ crud/public/index.html | 10 +++ crud/src/app.js | 22 +++++++ crud/src/components/array.js | 20 ++++++ crud/src/components/create.js | 77 +++++++++++++++++++++++ crud/src/components/edit.js | 81 ++++++++++++++++++++++++ crud/src/components/home.js | 76 ++++++++++++++++++++++ crud/src/index.js | 10 +++ crud/webpack.config.js | 26 ++++++++ webpack-react/README.md | 2 +- webpack-react/package.json | 4 +- webpack-react/public/index.html | 2 +- 15 files changed, 486 insertions(+), 4 deletions(-) create mode 100644 crud/.babelrc create mode 100644 crud/.gitignore create mode 100644 crud/README.md create mode 100644 crud/package.json create mode 100644 crud/public/index.html create mode 100644 crud/src/app.js create mode 100644 crud/src/components/array.js create mode 100644 crud/src/components/create.js create mode 100644 crud/src/components/edit.js create mode 100644 crud/src/components/home.js create mode 100644 crud/src/index.js create mode 100644 crud/webpack.config.js diff --git a/crud/.babelrc b/crud/.babelrc new file mode 100644 index 0000000..4f06b0c --- /dev/null +++ b/crud/.babelrc @@ -0,0 +1,6 @@ +{ + "presets": [ + "@babel/preset-env", + "@babel/preset-react" + ] +} diff --git a/crud/.gitignore b/crud/.gitignore new file mode 100644 index 0000000..f992571 --- /dev/null +++ b/crud/.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/crud/README.md b/crud/README.md new file mode 100644 index 0000000..993bbf6 --- /dev/null +++ b/crud/README.md @@ -0,0 +1,11 @@ +# 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) diff --git a/crud/package.json b/crud/package.json new file mode 100644 index 0000000..bc73d84 --- /dev/null +++ b/crud/package.json @@ -0,0 +1,35 @@ +{ + "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-bootstrap": "^2.4.0", + "react-dom": "^18.1.0", + "react-router-dom": "^6.3.0" + } +} diff --git a/crud/public/index.html b/crud/public/index.html new file mode 100644 index 0000000..0411cd4 --- /dev/null +++ b/crud/public/index.html @@ -0,0 +1,10 @@ + + + + React Example + + +
+ + + diff --git a/crud/src/app.js b/crud/src/app.js new file mode 100644 index 0000000..b8572d4 --- /dev/null +++ b/crud/src/app.js @@ -0,0 +1,22 @@ +import React from 'react' +import { BrowserRouter as Router,Route, Routes } + from 'react-router-dom'; +import Create from './components/create'; +import Edit from './components/edit'; +import Home from './components/home'; + +function App() { + return ( +
+ + + }/> + }/> + }/> + + +
+ ); +} + +export default App; diff --git a/crud/src/components/array.js b/crud/src/components/array.js new file mode 100644 index 0000000..7317a66 --- /dev/null +++ b/crud/src/components/array.js @@ -0,0 +1,20 @@ +// Javascript object named array with 3 key-values +const array = [ + { + id:'1', + Name:'Shivansh', + Age:'23' + }, + { + id:'2', + Name:'Simran', + Age:'22' + }, + { + id:'3', + Name:'Aakash', + Age:'23' + } +] + +export default array diff --git a/crud/src/components/create.js b/crud/src/components/create.js new file mode 100644 index 0000000..66f19c9 --- /dev/null +++ b/crud/src/components/create.js @@ -0,0 +1,77 @@ +import React, { useState } from 'react' +import { Button, Form } from 'react-bootstrap' +//TODO import 'bootstrap/dist/css/bootstrap.min.css'; +import array from './array'; +import { v4 as uuid } from 'uuid'; +import { Link, useNavigate } from 'react-router-dom'; + +function Create() { + + // Making usestate for setting and + // fetching a value in jsx + const [name, setname] = useState(''); + const [age, setage] = useState(''); + + // Using useNavigation for redirecting to pages + let history = useNavigate(); + + // Function for creating a post/entry + const handelSubmit = (e) =>{ + e.preventDefault(); // Prevent reload + + const ids = uuid() // Creating unique id + let uni = ids.slice(0,8) // Slicing unique id + + // Fetching a value from usestate and + // pushing to javascript object + let a = name, b=age + array.push({id:uni,Name:a,Age:b}) + + + // Redirecting to home page after creation done + history('/') + + } + + return ( +
+
+ + {/* Fetching a value from input textfirld + in a setname using usestate*/} + + setname(e.target.value)} + type="text" + placeholder="Enter Name" required/> + + + + {/* Fetching a value from input textfirld in + a setage using usestate*/} + + setage(e.target.value)} + type="text" + placeholder="Age" required/> + + + {/* handing a onclick event in button for + firing a function */} + + + {/* Redirecting back to home page */} + + + + +
+
+ ) +} + +export default Create diff --git a/crud/src/components/edit.js b/crud/src/components/edit.js new file mode 100644 index 0000000..7d0e41b --- /dev/null +++ b/crud/src/components/edit.js @@ -0,0 +1,81 @@ +import React, { useEffect, useState } from 'react' +import { Button, Form } from 'react-bootstrap'; +//TODO import 'bootstrap/dist/css/bootstrap.min.css'; +import array from './array'; +import { Link} from 'react-router-dom'; +import {useNavigate} from 'react-router-dom'; + + +function Edit() { + + // Here usestate has been used in order + // to set and get values from the jsx + const [name, setname] = useState(''); + const [age, setage] = useState(''); + const[id,setid] = useState(''); + + // used for navigation with logic in javascript + let history = useNavigate() + + // getting an index of an entry with an id + var index = array.map(function(e) { return e.id; }).indexOf(id); + + // function for handling the edit and + // pushing changes of editing/updating + const handelSubmit = (e) =>{ + e.preventDefault(); // preventing from reload + + let a = array[index] // getting an index of an array + + // putting the value from the input textfield and + // replacing it from existing for updation + a.Name = name + a.Age = age + + // redirecting to main page + history('/') + } + + + // Useeffect take care that page will be rendered only once + useEffect(() => { + setname(localStorage.getItem('Name')) + setage(localStorage.getItem('Age')) + setid(localStorage.getItem('id')) + }, []) + + return ( +
+
+ + {/* setting a name from the input textfiled */} + + setname(e.target.value)} + type="text" placeholder="Enter Name" /> + + + {/* setting a age from the input textfiled */} + + setage(e.target.value)} + type="text" placeholder="Age" /> + + + {/* Hadinling an onclick event running an edit logic */} + + + {/* Redirecting to main page after editing */} + + + +
+
+ ) +} + +export default Edit diff --git a/crud/src/components/home.js b/crud/src/components/home.js new file mode 100644 index 0000000..b13d747 --- /dev/null +++ b/crud/src/components/home.js @@ -0,0 +1,76 @@ +import React from 'react' +import { Button,Table } from 'react-bootstrap' +//TODO import 'bootstrap/dist/css/bootstrap.min.css'; +import array from './array'; +import { Link, useNavigate } from 'react-router-dom'; + +function Home() { + + let history = useNavigate() + + // You may skip this part if you're + // using react-context api or redux + function setID(id,name,age){ + localStorage.setItem('id', id); + localStorage.setItem('Name', name); + localStorage.setItem('Age', age); + } + + // Deleted function - functionality + // for deleting the entry + function deleted(id){ + + var index = array.map(function(e) { return e.id; }).indexOf(id); + + // deleting the entry with index + array.splice(index,1) + + // We need to re-render the page for getting + // the results so redirect to same page. + history('/') + } + + return ( +
+ + + + + + + + + + {/* Mapping though every element in the array + and showing the data in the form of table */} + {array.map((item) => { +return( + + + + + {/* getting theid,name, and age for storing these + value in the jsx with onclick event */} + + + {/* Using thr deleted function passing + the id of an entry */} + + +)})} + +
NameAge
{item.Name}{item.Age}
+ +{/* Button for redirecting to create page for + insertion of values */} + + + +
+ ) +} + +export default Home diff --git a/crud/src/index.js b/crud/src/index.js new file mode 100644 index 0000000..1fdbf2f --- /dev/null +++ b/crud/src/index.js @@ -0,0 +1,10 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './app'; + +//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/crud/webpack.config.js b/crud/webpack.config.js new file mode 100644 index 0000000..eda630f --- /dev/null +++ b/crud/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', + }, +}; diff --git a/webpack-react/README.md b/webpack-react/README.md index 09334ca..993bbf6 100644 --- a/webpack-react/README.md +++ b/webpack-react/README.md @@ -1,4 +1,4 @@ -# webpack-react +# React.js Example ## Table of Contents 0. [General](#general) diff --git a/webpack-react/package.json b/webpack-react/package.json index 2ccd56c..cff7d85 100644 --- a/webpack-react/package.json +++ b/webpack-react/package.json @@ -1,7 +1,7 @@ { "private": true, - "name": "webpack-react", - "description": "example using webpack for react", + "name": "react-example", + "description": "React.js example", "version": "0.0.1", "main": "index.js", "keywords": [ diff --git a/webpack-react/public/index.html b/webpack-react/public/index.html index fe28c43..0411cd4 100644 --- a/webpack-react/public/index.html +++ b/webpack-react/public/index.html @@ -1,7 +1,7 @@ - Hello React + React Example