├── react-allow-only-numerics-digits-textbox-field ├── package-lock.json ├── package.json ├── public │ └── index.html ├── readme.rst └── src │ ├── App.js │ ├── index.js │ ├── serviceWorker.js │ └── setupTests.js ├── react-autocomplete-input ├── package-lock.json ├── package.json ├── public │ └── index.html ├── readme.rst └── src │ ├── App.js │ ├── data │ └── results.json │ ├── index.js │ └── serviceWorker.js ├── react-codeigniter-4-mysql-crud ├── package-lock.json ├── package.json ├── readme.rst └── src │ ├── components │ ├── create.js │ ├── products.js │ └── update.js │ ├── index.js │ ├── logo.svg │ └── product.css ├── react-delete-multiple-table-rows-from-server ├── package-lock.json ├── package.json ├── readme.rst └── src │ ├── App.css │ └── App.js ├── react-dependent-dropdown ├── package-lock_16.json ├── package-lock_17.json ├── package_16.json ├── package_17.json ├── readme.rst ├── src_16 │ ├── Dropdown.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── serviceWorker.js │ └── setupTests.js └── src_17 │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── Dropdown.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── reportWebVitals.js │ └── setupTests.js ├── react-file-download ├── package-lock.json ├── package-lock_17.json ├── package.json ├── package_17.json ├── public │ └── index.html ├── readme.rst └── src │ ├── DownloadFile.js │ ├── download.css │ ├── index.js │ ├── index_17.js │ └── serviceWorker.js ├── react-file-upload ├── package-17.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── readme.rst └── src │ ├── UploadFile.js │ ├── index-17.js │ ├── index.js │ ├── serviceWorker.js │ └── upload.css ├── react-rest-delete-api ├── package-lock.json ├── package.json ├── public │ └── index.html ├── readme.rst └── src │ ├── RestController.js │ └── index.js ├── react-rest-get-api ├── package-lock.json ├── package.json ├── public │ └── index.html ├── readme.rst └── src │ ├── RestController.js │ └── index.js ├── react-rest-post-api ├── package-lock.json ├── package.json ├── public │ └── index.html ├── readme.rst └── src │ ├── RestController.js │ └── index.js ├── react-rest-put-api ├── package-lock.json ├── package.json ├── public │ └── index.html ├── readme.rst └── src │ ├── RestController.js │ └── index.js ├── react-springboot-security ├── package.json ├── readme.rst └── src │ ├── components │ ├── Home.js │ └── Login.js │ ├── index.js │ ├── reportWebVitals.js │ └── service │ └── AuthenticationService.js ├── react-table-cell-conditional-color ├── package-lock.json ├── package.json ├── readme.rst └── src │ ├── Table.js │ ├── index.js │ └── reportWebVitals.js ├── react-table-search ├── package-lock.json ├── package.json ├── readme.rst └── src │ ├── App.css │ ├── Todo.js │ ├── index.js │ └── reportWebVitals.js ├── reactjs-ajax-without-third-party-library ├── package-lock.json ├── package.json ├── readme.rst └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── reportWebVitals.js │ └── setupTests.js └── tic-tac-toe-game ├── package-lock.json ├── package.json ├── public └── index.html ├── readme.rst └── src ├── Board.js ├── Game.js ├── functions.js ├── index.css └── index.js /react-allow-only-numerics-digits-textbox-field/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-allow-only-numerics-digits-textbox-field", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /react-allow-only-numerics-digits-textbox-field/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App - Allow only numeric values or digits in input field 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /react-allow-only-numerics-digits-textbox-field/readme.rst: -------------------------------------------------------------------------------- 1 | Please follow the tutorial https://roytuts.com/allow-only-numeric-values-or-digits-in-input-field-using-react/ 2 | -------------------------------------------------------------------------------- /react-allow-only-numerics-digits-textbox-field/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class NumericInputApp extends React.Component { 4 | constructor(props) { 5 | super(props); 6 | //this.state = { error: '' }; 7 | //this.allowOnlyNumericsOrDigits = this.allowOnlyNumericsOrDigits.bind(this); 8 | } 9 | 10 | allowOnlyNumericsOrDigits(e) { 11 | /*if(/\D/g.test(e.target.value)) { 12 | e.target.value = e.target.value.replace(/\D/g,''); 13 | }*/ 14 | 15 | /*const charCode = e.which ? e.which : e.keyCode; 16 | 17 | if (charCode > 31 && (charCode < 48 || charCode > 57)) { 18 | this.setState({ error: 'OOPs! Only numeric values or digits allowed' }); 19 | }*/ 20 | } 21 | 22 | render() { 23 | return ( 24 |
25 | {/*{this.state.error}
*/} 26 | {/*  */} 27 |    28 |
29 | ); 30 | } 31 | } 32 | 33 | export default NumericInputApp; 34 | -------------------------------------------------------------------------------- /react-allow-only-numerics-digits-textbox-field/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import * as serviceWorker from './serviceWorker'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | 13 | // If you want your app to work offline and load faster, you can change 14 | // unregister() to register() below. Note this comes with some pitfalls. 15 | // Learn more about service workers: https://bit.ly/CRA-PWA 16 | serviceWorker.unregister(); 17 | -------------------------------------------------------------------------------- /react-allow-only-numerics-digits-textbox-field/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl, { 104 | headers: { 'Service-Worker': 'script' }, 105 | }) 106 | .then(response => { 107 | // Ensure service worker exists, and that we really are getting a JS file. 108 | const contentType = response.headers.get('content-type'); 109 | if ( 110 | response.status === 404 || 111 | (contentType != null && contentType.indexOf('javascript') === -1) 112 | ) { 113 | // No service worker found. Probably a different app. Reload the page. 114 | navigator.serviceWorker.ready.then(registration => { 115 | registration.unregister().then(() => { 116 | window.location.reload(); 117 | }); 118 | }); 119 | } else { 120 | // Service worker found. Proceed as normal. 121 | registerValidSW(swUrl, config); 122 | } 123 | }) 124 | .catch(() => { 125 | console.log( 126 | 'No internet connection found. App is running in offline mode.' 127 | ); 128 | }); 129 | } 130 | 131 | export function unregister() { 132 | if ('serviceWorker' in navigator) { 133 | navigator.serviceWorker.ready 134 | .then(registration => { 135 | registration.unregister(); 136 | }) 137 | .catch(error => { 138 | console.error(error.message); 139 | }); 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /react-allow-only-numerics-digits-textbox-field/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /react-autocomplete-input/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-autocomplete-input", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /react-autocomplete-input/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Auto complete input using React 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /react-autocomplete-input/readme.rst: -------------------------------------------------------------------------------- 1 | Please follow the tutorial https://roytuts.com/autocomplete-input-using-react/ 2 | -------------------------------------------------------------------------------- /react-autocomplete-input/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import json from './data/results.json'; 3 | 4 | class AutoCompleteApp extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = { suggestions:[] }; 8 | this.search = this.search.bind(this); 9 | } 10 | 11 | search(event) { 12 | let input = event.target.value; 13 | //console.log('event.target.value: ' + input); 14 | //console.log('this.searchResults: ' + json); 15 | let matches = [], i; 16 | 17 | if (input.length > 1) { 18 | for (i = 0; i < json.length; i++) { 19 | if (json[i].match(input)) { 20 | matches.push(json[i]); 21 | } 22 | } 23 | } 24 | 25 | this.setState({ suggestions: matches }); 26 | } 27 | 28 | render() { 29 | return ( 30 |
31 |    32 | 33 | 40 | 41 |
42 | ); 43 | } 44 | } 45 | 46 | export default AutoCompleteApp; -------------------------------------------------------------------------------- /react-autocomplete-input/src/data/results.json: -------------------------------------------------------------------------------- 1 | [ 2 | "Lorem Ipsum is simply dummy text of the printing and typesetting", 3 | "Lorem Ipsum has been the industry's standard dummy", 4 | "nd scrambled it to make a type specimen book. It", 5 | "typesetting, remaining essentially unchanged. It ", 6 | "sum passages, and more recently with desktop publi", 7 | "Contrary to popular belief, Lorem Ipsum is not sim", 8 | "professor at Hampden-Sydney College in Virginia, looked up one", 9 | "passage, and going through the cites of the word in", 10 | "comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum", 11 | "BC. This book is a treatise on the theory of ethics, very popu", 12 | "here are many variations of passages of Lorem Ipsum availa", 13 | "believable. If you are going to use a passage of Lorem Ips", 14 | "middle of text. All the Lorem Ipsum generators on the Intern", 15 | "tend to repeat predefined chunks as necessary, making this the", 16 | "first true generator on the Internet. It uses a dictionary of over 20", 17 | "he standard chunk of Lorem Ipsum used since the 1500s i", 18 | "1.10.33 from \"de Finibus Bonorum et Malorum\" by Cicero are als", 19 | "reproduced in their exact original form, accompanied by English", 20 | "eadable content of a page when looking at its layout. The point" 21 | ] -------------------------------------------------------------------------------- /react-autocomplete-input/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import AutoCompleteApp from './App'; 4 | import * as serviceWorker from './serviceWorker'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | // If you want your app to work offline and load faster, you can change 9 | // unregister() to register() below. Note this comes with some pitfalls. 10 | // Learn more about service workers: https://bit.ly/CRA-PWA 11 | //serviceWorker.unregister(); 12 | serviceWorker.register(); -------------------------------------------------------------------------------- /react-autocomplete-input/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl, { 104 | headers: { 'Service-Worker': 'script' } 105 | }) 106 | .then(response => { 107 | // Ensure service worker exists, and that we really are getting a JS file. 108 | const contentType = response.headers.get('content-type'); 109 | if ( 110 | response.status === 404 || 111 | (contentType != null && contentType.indexOf('javascript') === -1) 112 | ) { 113 | // No service worker found. Probably a different app. Reload the page. 114 | navigator.serviceWorker.ready.then(registration => { 115 | registration.unregister().then(() => { 116 | window.location.reload(); 117 | }); 118 | }); 119 | } else { 120 | // Service worker found. Proceed as normal. 121 | registerValidSW(swUrl, config); 122 | } 123 | }) 124 | .catch(() => { 125 | console.log( 126 | 'No internet connection found. App is running in offline mode.' 127 | ); 128 | }); 129 | } 130 | 131 | export function unregister() { 132 | if ('serviceWorker' in navigator) { 133 | navigator.serviceWorker.ready 134 | .then(registration => { 135 | registration.unregister(); 136 | }) 137 | .catch(error => { 138 | console.error(error.message); 139 | }); 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /react-codeigniter-4-mysql-crud/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-codeigniter-4-mysql-crud", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.9", 7 | "@testing-library/react": "^11.2.5", 8 | "@testing-library/user-event": "^12.7.1", 9 | "react": "^17.0.1", 10 | "react-dom": "^17.0.1", 11 | "react-router-dom": "^5.2.0", 12 | "react-scripts": "4.0.2", 13 | "web-vitals": "^1.1.0" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /react-codeigniter-4-mysql-crud/readme.rst: -------------------------------------------------------------------------------- 1 | You can read tutorial https://roytuts.com/react-crud-example-with-codeigniter-4-and-mysql/ -------------------------------------------------------------------------------- /react-codeigniter-4-mysql-crud/src/components/create.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | class Create extends React.Component { 5 | 6 | constructor(props) { 7 | super(props); 8 | this.state = {name: '', price:'', sale_price:'', sales_count:'', sale_date:''}; 9 | this.handleChange = this.handleChange.bind(this); 10 | this.handleSubmit = this.handleSubmit.bind(this); 11 | } 12 | 13 | handleChange(event) { 14 | const state = this.state 15 | state[event.target.name] = event.target.value 16 | this.setState(state); 17 | } 18 | 19 | handleSubmit(event) { 20 | event.preventDefault(); 21 | fetch('http://localhost:8080/product', { 22 | method: 'POST', 23 | body: JSON.stringify({ 24 | name: this.state.name, 25 | price: this.state.price, 26 | sale_price: this.state.sale_price, 27 | sales_count: this.state.sales_count, 28 | sale_date: this.state.sale_date 29 | }), 30 | headers: { 31 | "Content-type": "application/json; charset=UTF-8" 32 | } 33 | }).then(response => { 34 | if(response.status === 201) { 35 | alert("New product saved successfully"); 36 | } 37 | }); 38 | } 39 | 40 | render() { 41 | return ( 42 |
43 | Products 44 |

45 |

46 |

47 | 48 | 49 |

50 |

51 | 52 | 53 |

54 |

55 | 56 | 57 |

58 |

59 | 60 | 61 |

62 |

63 | 64 | 65 |

66 |

67 | 68 |

69 |
70 |
71 | ); 72 | } 73 | } 74 | 75 | export default Create; -------------------------------------------------------------------------------- /react-codeigniter-4-mysql-crud/src/components/products.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | class Products extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = {products: []}; 8 | this.headers = [ 9 | { key: 'id', label: 'Id'}, 10 | { key: 'name', label: 'Name' }, 11 | { key: 'price', label: 'Price' }, 12 | { key: 'sale_price', label: 'Selling Price' }, 13 | { key: 'sales_count', label: 'Sales Count' }, 14 | { key: 'sale_date', label: 'Sale Date' } 15 | ]; 16 | this.deleteProduct = this.deleteProduct.bind(this); 17 | } 18 | 19 | componentDidMount() { 20 | fetch('http://localhost:8080/product') 21 | .then(response => { 22 | return response.json(); 23 | }).then(result => { 24 | console.log(result); 25 | this.setState({ 26 | products:result 27 | }); 28 | }); 29 | } 30 | 31 | deleteProduct(id) { 32 | if(window.confirm("Are you sure want to delete?")) { 33 | fetch('http://localhost:8080/product/' + id, { 34 | method : 'DELETE' 35 | }).then(response => { 36 | if(response.status === 200) { 37 | alert("Product deleted successfully"); 38 | fetch('http://localhost:8080/product') 39 | .then(response => { 40 | return response.json(); 41 | }).then(result => { 42 | console.log(result); 43 | this.setState({ 44 | products:result 45 | }); 46 | }); 47 | } 48 | }); 49 | } 50 | } 51 | 52 | render() { 53 | return ( 54 |
55 | Add Product 56 |

57 | 58 | 59 | 60 | { 61 | this.headers.map(function(h) { 62 | return ( 63 | 64 | ) 65 | }) 66 | } 67 | 68 | 69 | 70 | 71 | { 72 | this.state.products.map(function(item, key) { 73 | return ( 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 86 | 87 | ) 88 | }.bind(this)) 89 | } 90 | 91 |
{h.label}Actions
{item.id}{item.name}{item.price}{item.sale_price}{item.sales_count}{item.sale_date} 82 | Edit 83 |    84 | Delete 85 |
92 |

93 | ) 94 | } 95 | } 96 | 97 | export default Products; -------------------------------------------------------------------------------- /react-codeigniter-4-mysql-crud/src/components/update.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link, withRouter } from 'react-router-dom'; 3 | 4 | class Update extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = {id: '', name: '', price:'', sale_price:'', sales_count:'', sale_date:''}; 8 | this.handleChange = this.handleChange.bind(this); 9 | this.handleSubmit = this.handleSubmit.bind(this); 10 | } 11 | 12 | componentDidMount() { 13 | fetch('http://localhost:8080/product/' + this.props.match.params.id) 14 | .then(response => { 15 | return response.json(); 16 | }).then(result => { 17 | console.log(result); 18 | this.setState({ 19 | id:result.id, 20 | name:result.name, 21 | price:result.price, 22 | sale_price: result.sale_price, 23 | sales_count: result.sales_count, 24 | sale_date: result.sale_date 25 | }); 26 | }); 27 | } 28 | 29 | handleChange(event) { 30 | const state = this.state 31 | state[event.target.name] = event.target.value 32 | this.setState(state); 33 | } 34 | 35 | handleSubmit(event) { 36 | event.preventDefault(); 37 | //alert(this.props.match.params.id); 38 | fetch('http://localhost:8080/product/' + this.props.match.params.id, { 39 | method: 'PUT', 40 | body: JSON.stringify({ 41 | name: this.state.name, 42 | price: this.state.price, 43 | sale_price: this.state.sale_price, 44 | sales_count: this.state.sales_count, 45 | sale_date: this.state.sale_date 46 | }), 47 | headers: { 48 | "Content-type": "application/json; charset=UTF-8" 49 | } 50 | }).then(response => { 51 | if(response.status === 200) { 52 | alert("Product update successfully."); 53 | } 54 | }); 55 | } 56 | 57 | render() { 58 | return ( 59 |
60 | Products 61 |

62 |

63 | 64 |

65 | 66 | 67 |

68 |

69 | 70 | 71 |

72 |

73 | 74 | 75 |

76 |

77 | 78 | 79 |

80 |

81 | 82 | 83 |

84 |

85 | 86 |

87 |
88 |
89 | ); 90 | } 91 | } 92 | 93 | export default Update; -------------------------------------------------------------------------------- /react-codeigniter-4-mysql-crud/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { BrowserRouter as Router, Route } from 'react-router-dom'; 4 | import './product.css'; 5 | import Products from './components/products'; 6 | import Create from './components/create'; 7 | import Update from './components/update'; 8 | import './index.css'; 9 | import reportWebVitals from './reportWebVitals'; 10 | 11 | ReactDOM.render( 12 | 13 | 14 |
15 | 16 | 17 | 18 |
19 | 20 | , 21 | document.getElementById('root') 22 | ); 23 | 24 | // If you want to start measuring performance in your app, pass a function 25 | // to log results (for example: reportWebVitals(console.log)) 26 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 27 | reportWebVitals(); 28 | -------------------------------------------------------------------------------- /react-codeigniter-4-mysql-crud/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react-codeigniter-4-mysql-crud/src/product.css: -------------------------------------------------------------------------------- 1 | #container { 2 | width: 800px; 3 | margin: auto; 4 | } 5 | table { 6 | border-collapse: collapse; 7 | width: 800px; 8 | margin: 10px auto; 9 | } 10 | th, td { 11 | border: 1px solid #ddd; 12 | text-align: left; 13 | padding: 8px; 14 | } 15 | tr:nth-child(even) { 16 | background-color: #f2f2f2 17 | } 18 | tr:hover { 19 | background-color: #ddd; 20 | } 21 | th { 22 | padding-top: 12px; 23 | padding-bottom: 12px; 24 | text-align: left; 25 | background-color: #4CAF50; 26 | color: white; 27 | } -------------------------------------------------------------------------------- /react-delete-multiple-table-rows-from-server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-delete-multiple-table-rows-from-server", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /react-delete-multiple-table-rows-from-server/readme.rst: -------------------------------------------------------------------------------- 1 | Please follow the tutorial https://roytuts.com/delete-multiple-table-rows-from-server-using-react/ 2 | -------------------------------------------------------------------------------- /react-delete-multiple-table-rows-from-server/src/App.css: -------------------------------------------------------------------------------- 1 | table.datatable { 2 | width:100%; 3 | border: none; 4 | background:#fff; 5 | } 6 | table.datatable td.table_foot { 7 | border: none; 8 | background: #fff; 9 | text-align: center; 10 | } 11 | table.datatable tr.odd_col { 12 | background: none; 13 | } 14 | table.datatable tr.even_col { 15 | background: #ddd; 16 | } 17 | table.datatable td { 18 | font-size:10pt; 19 | padding:5px 10px; 20 | text-align: left; 21 | } 22 | table.datatable th { 23 | text-align: left; 24 | font-size: 8pt; 25 | padding: 10px 10px 7px; 26 | text-transform: uppercase; 27 | color: #fff; 28 | background-color: black; 29 | font-family: sans-serif; 30 | } -------------------------------------------------------------------------------- /react-delete-multiple-table-rows-from-server/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | 4 | class App extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = {products: []}; 8 | this.headers = [ 9 | { key: 'id', label: 'Id'}, 10 | { key: 'name', label: 'Name' }, 11 | { key: 'code', label: 'Code' }, 12 | { key: 'price', label: 'Price' } 13 | ]; 14 | this.state = { checkedBoxes: [] }; 15 | this.deleteProducts = this.deleteProducts.bind(this); 16 | this.toggleCheckbox = this.toggleCheckbox.bind(this); 17 | } 18 | 19 | deleteProducts = () => { 20 | if(window.confirm('Are you sure, want to delete the selected product?')) { 21 | fetch('http://localhost:8080/delete/products', { 22 | method: 'POST', 23 | body: JSON.stringify({'ids' : this.state.checkedBoxes}), 24 | headers: {'Content-Type' : 'application/json; charset=UTF-8'} 25 | }).then(response => { 26 | if(response.status === 200) { 27 | document.getElementById('msg').innerHTML = 'Products deleted successfully'; 28 | } 29 | }) 30 | } 31 | } 32 | 33 | toggleCheckbox = (e, item) => { 34 | if(e.target.checked) { 35 | let arr = this.state.checkedBoxes; 36 | arr.push(item.id); 37 | 38 | this.setState = { checkedBoxes: arr}; 39 | } else { 40 | let items = this.state.checkedBoxes.splice(this.state.checkedBoxes.indexOf(item.id), 1); 41 | 42 | this.setState = { 43 | checkedBoxes: items 44 | } 45 | } 46 | //console.log(this.state.checkedBoxes); 47 | } 48 | 49 | componentDidMount() { 50 | fetch('http://localhost:8080/products') 51 | .then(response => { 52 | return response.json(); 53 | }).then(result => { 54 | //console.log(result); 55 | this.setState({ 56 | products:result 57 | }); 58 | }); 59 | } 60 | 61 | render() { 62 | const productFound = this.state.products && this.state.products.length; 63 | if(productFound) { 64 | return ( 65 |
66 |
67 | 68 | 69 | 70 | 71 | { 72 | this.headers.map(function(h) { 73 | return ( 74 | 75 | ) 76 | }) 77 | } 78 | 79 | 80 | 81 | { 82 | this.state.products.map(function(item, index) { 83 | return ( 84 | 85 | 88 | 89 | 90 | 91 | 92 | )}.bind(this)) 93 | } 94 | 95 |
{h.label}
p.id === item.id)} onChange={(e) => this.toggleCheckbox(e, item)}/> 86 |   {item.id} 87 | {item.name}{item.code}{item.price}
96 |
97 | ) 98 | } else { 99 | return ( 100 |
101 | No product found 102 |
103 | ) 104 | } 105 | } 106 | } 107 | 108 | export default App; 109 | -------------------------------------------------------------------------------- /react-dependent-dropdown/package_16.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-dependent-dropdown", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.4.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.12.0", 10 | "react-dom": "^16.12.0", 11 | "react-scripts": "3.3.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /react-dependent-dropdown/package_17.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-dependent-dropdown", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.9", 7 | "@testing-library/react": "^11.2.5", 8 | "@testing-library/user-event": "^12.7.2", 9 | "react": "^17.0.1", 10 | "react-dom": "^17.0.1", 11 | "react-scripts": "4.0.3", 12 | "web-vitals": "^1.1.0" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react-dependent-dropdown/readme.rst: -------------------------------------------------------------------------------- 1 | Please follow the tutorial https://roytuts.com/cascading-or-dependent-dropdown-using-react-js/ 2 | -------------------------------------------------------------------------------- /react-dependent-dropdown/src_16/Dropdown.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Dropdown extends React.Component { 4 | constructor(props) { 5 | super(props); 6 | this.state = { 7 | countries : [], 8 | states : [], 9 | cities : [], 10 | selectedCountry : '--Choose Country--', 11 | selectedState : '--Choose State--' 12 | }; 13 | this.changeCountry = this.changeCountry.bind(this); 14 | this.changeState = this.changeState.bind(this); 15 | } 16 | 17 | componentDidMount() { 18 | this.setState({ 19 | countries : [ 20 | { name: 'Germany', states: [ {name: 'A', cities: ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn']} ] }, 21 | { name: 'Spain', states: [ {name: 'B', cities: ['Barcelona']} ] }, 22 | { name: 'USA', states: [ {name: 'C', cities: ['Downers Grove']} ] }, 23 | { name: 'Mexico', states: [ {name: 'D', cities: ['Puebla']} ] }, 24 | { name: 'India', states: [ {name: 'E', cities: ['Delhi', 'Kolkata', 'Mumbai', 'Bangalore']} ] }, 25 | ] 26 | }); 27 | } 28 | 29 | changeCountry(event) { 30 | this.setState({selectedCountry: event.target.value}); 31 | this.setState({states : this.state.countries.find(cntry => cntry.name === event.target.value).states}); 32 | } 33 | 34 | changeState(event) { 35 | this.setState({selectedState: event.target.value}); 36 | const stats = this.state.countries.find(cntry => cntry.name === this.state.selectedCountry).states; 37 | this.setState({cities : stats.find(stat => stat.name === event.target.value).cities}); 38 | } 39 | 40 | render() { 41 | return ( 42 |
43 |

Cascading or Dependent Dropdown using React

44 | 45 |
46 | 47 | 53 |
54 | 55 |
56 | 57 | 63 |
64 | 65 |
66 | 67 | 73 |
74 |
75 | ) 76 | } 77 | } 78 | 79 | export default Dropdown; -------------------------------------------------------------------------------- /react-dependent-dropdown/src_16/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | 15 | #container { 16 | width: 800px; 17 | margin: auto; 18 | } -------------------------------------------------------------------------------- /react-dependent-dropdown/src_16/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import Dropdown from './Dropdown'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: https://bit.ly/CRA-PWA 12 | //serviceWorker.unregister(); 13 | serviceWorker.register(); -------------------------------------------------------------------------------- /react-dependent-dropdown/src_16/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /react-dependent-dropdown/src_16/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl, { 104 | headers: { 'Service-Worker': 'script' } 105 | }) 106 | .then(response => { 107 | // Ensure service worker exists, and that we really are getting a JS file. 108 | const contentType = response.headers.get('content-type'); 109 | if ( 110 | response.status === 404 || 111 | (contentType != null && contentType.indexOf('javascript') === -1) 112 | ) { 113 | // No service worker found. Probably a different app. Reload the page. 114 | navigator.serviceWorker.ready.then(registration => { 115 | registration.unregister().then(() => { 116 | window.location.reload(); 117 | }); 118 | }); 119 | } else { 120 | // Service worker found. Proceed as normal. 121 | registerValidSW(swUrl, config); 122 | } 123 | }) 124 | .catch(() => { 125 | console.log( 126 | 'No internet connection found. App is running in offline mode.' 127 | ); 128 | }); 129 | } 130 | 131 | export function unregister() { 132 | if ('serviceWorker' in navigator) { 133 | navigator.serviceWorker.ready.then(registration => { 134 | registration.unregister(); 135 | }); 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /react-dependent-dropdown/src_16/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /react-dependent-dropdown/src_17/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react-dependent-dropdown/src_17/App.js: -------------------------------------------------------------------------------- 1 | import logo from './logo.svg'; 2 | import './App.css'; 3 | 4 | function App() { 5 | return ( 6 |
7 |
8 | logo 9 |

10 | Edit src/App.js and save to reload. 11 |

12 | 18 | Learn React 19 | 20 |
21 |
22 | ); 23 | } 24 | 25 | export default App; 26 | -------------------------------------------------------------------------------- /react-dependent-dropdown/src_17/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /react-dependent-dropdown/src_17/Dropdown.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Dropdown extends React.Component { 4 | constructor(props) { 5 | super(props); 6 | this.state = { 7 | countries : [], 8 | states : [], 9 | cities : [], 10 | selectedCountry : '--Choose Country--', 11 | selectedState : '--Choose State--' 12 | }; 13 | this.changeCountry = this.changeCountry.bind(this); 14 | this.changeState = this.changeState.bind(this); 15 | } 16 | 17 | componentDidMount() { 18 | this.setState({ 19 | countries : [ 20 | { name: 'Germany', states: [ {name: 'A', cities: ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn']} ] }, 21 | { name: 'Spain', states: [ {name: 'B', cities: ['Barcelona']} ] }, 22 | { name: 'USA', states: [ {name: 'C', cities: ['Downers Grove']} ] }, 23 | { name: 'Mexico', states: [ {name: 'D', cities: ['Puebla']} ] }, 24 | { name: 'India', states: [ {name: 'E', cities: ['Delhi', 'Kolkata', 'Mumbai', 'Bangalore']} ] }, 25 | ] 26 | }); 27 | } 28 | 29 | changeCountry(event) { 30 | this.setState({selectedCountry: event.target.value}); 31 | this.setState({states : this.state.countries.find(cntry => cntry.name === event.target.value).states}); 32 | } 33 | 34 | changeState(event) { 35 | this.setState({selectedState: event.target.value}); 36 | const stats = this.state.countries.find(cntry => cntry.name === this.state.selectedCountry).states; 37 | this.setState({cities : stats.find(stat => stat.name === event.target.value).cities}); 38 | } 39 | 40 | render() { 41 | return ( 42 |
43 |

Cascading or Dependent Dropdown using React

44 | 45 |
46 | 47 | 53 |
54 | 55 |
56 | 57 | 63 |
64 | 65 |
66 | 67 | 73 |
74 |
75 | ) 76 | } 77 | } 78 | 79 | export default Dropdown; -------------------------------------------------------------------------------- /react-dependent-dropdown/src_17/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react-dependent-dropdown/src_17/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import Dropdown from './Dropdown'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /react-dependent-dropdown/src_17/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react-dependent-dropdown/src_17/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /react-dependent-dropdown/src_17/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /react-file-download/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-file-download", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.4.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.12.0", 10 | "react-dom": "^16.12.0", 11 | "react-scripts": "3.4.0" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /react-file-download/package_17.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-file-download", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.9", 7 | "@testing-library/react": "^11.2.5", 8 | "@testing-library/user-event": "^12.7.1", 9 | "react": "^17.0.1", 10 | "react-dom": "^17.0.1", 11 | "react-scripts": "4.0.2", 12 | "web-vitals": "^1.1.0" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react-file-download/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | File Download - React App 23 | 24 | 25 | 26 |
27 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /react-file-download/readme.rst: -------------------------------------------------------------------------------- 1 | Please follow the tutorial at https://roytuts.com/download-file-from-server-using-react/ 2 | -------------------------------------------------------------------------------- /react-file-download/src/DownloadFile.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './download.css'; 3 | 4 | class DownloadFile extends React.Component { 5 | 6 | constructor(props) { 7 | super(props); 8 | } 9 | 10 | downloadEmployeeData = () => { 11 | fetch('http://localhost:8080/employees/download') 12 | .then(response => { 13 | response.blob().then(blob => { 14 | let url = window.URL.createObjectURL(blob); 15 | let a = document.createElement('a'); 16 | a.href = url; 17 | a.download = 'employees.json'; 18 | a.click(); 19 | }); 20 | //window.location.href = response.url; 21 | }); 22 | } 23 | 24 | render() { 25 | return ( 26 |
27 |

Download File using React App

28 |

Download Employee Data using Button

29 | 30 |

31 |

Download Employee Data using Link

32 | Download 33 |
34 | ) 35 | } 36 | 37 | } 38 | 39 | export default DownloadFile; 40 | -------------------------------------------------------------------------------- /react-file-download/src/download.css: -------------------------------------------------------------------------------- 1 | #container { 2 | width: 800px; 3 | margin: auto; 4 | } -------------------------------------------------------------------------------- /react-file-download/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import DownloadFile from './DownloadFile'; 4 | import * as serviceWorker from './serviceWorker'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | // If you want your app to work offline and load faster, you can change 9 | // unregister() to register() below. Note this comes with some pitfalls. 10 | // Learn more about service workers: https://bit.ly/CRA-PWA 11 | //serviceWorker.unregister(); 12 | serviceWorker.register(); 13 | -------------------------------------------------------------------------------- /react-file-download/src/index_17.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import reportWebVitals from './reportWebVitals'; 5 | 6 | import DownloadFile from './DownloadFile'; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | , 12 | document.getElementById('root') 13 | ); 14 | 15 | // If you want to start measuring performance in your app, pass a function 16 | // to log results (for example: reportWebVitals(console.log)) 17 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 18 | reportWebVitals(); 19 | -------------------------------------------------------------------------------- /react-file-download/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl) 104 | .then(response => { 105 | // Ensure service worker exists, and that we really are getting a JS file. 106 | const contentType = response.headers.get('content-type'); 107 | if ( 108 | response.status === 404 || 109 | (contentType != null && contentType.indexOf('javascript') === -1) 110 | ) { 111 | // No service worker found. Probably a different app. Reload the page. 112 | navigator.serviceWorker.ready.then(registration => { 113 | registration.unregister().then(() => { 114 | window.location.reload(); 115 | }); 116 | }); 117 | } else { 118 | // Service worker found. Proceed as normal. 119 | registerValidSW(swUrl, config); 120 | } 121 | }) 122 | .catch(() => { 123 | console.log( 124 | 'No internet connection found. App is running in offline mode.' 125 | ); 126 | }); 127 | } 128 | 129 | export function unregister() { 130 | if ('serviceWorker' in navigator) { 131 | navigator.serviceWorker.ready.then(registration => { 132 | registration.unregister(); 133 | }); 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /react-file-upload/package-17.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-file-upload", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.13.0", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-scripts": "4.0.3", 12 | "web-vitals": "^1.1.2" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react-file-upload/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-file-upload", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.8.6", 7 | "react-dom": "^16.8.6", 8 | "react-scripts": "3.0.1" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test", 14 | "eject": "react-scripts eject" 15 | }, 16 | "eslintConfig": { 17 | "extends": "react-app" 18 | }, 19 | "browserslist": { 20 | "production": [ 21 | ">0.2%", 22 | "not dead", 23 | "not op_mini all" 24 | ], 25 | "development": [ 26 | "last 1 chrome version", 27 | "last 1 firefox version", 28 | "last 1 safari version" 29 | ] 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /react-file-upload/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/roytuts/react/1ce2399154d50b6153f2c2f0a531736f1ea7da37/react-file-upload/public/favicon.ico -------------------------------------------------------------------------------- /react-file-upload/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | File Upload Example - React App 23 | 24 | 25 | 26 |
27 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /react-file-upload/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /react-file-upload/readme.rst: -------------------------------------------------------------------------------- 1 | You can read tutorial https://roytuts.com/upload-file-to-server-using-react/ -------------------------------------------------------------------------------- /react-file-upload/src/UploadFile.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './upload.css'; 3 | 4 | class UploadFile extends React.Component { 5 | 6 | constructor(props) { 7 | super(props); 8 | this.state = {file: '', msg: ''}; 9 | } 10 | 11 | onFileChange = (event) => { 12 | this.setState({ 13 | file: event.target.files[0] 14 | }); 15 | } 16 | 17 | uploadFileData = (event) => { 18 | event.preventDefault(); 19 | this.setState({msg: ''}); 20 | 21 | let data = new FormData(); 22 | data.append('file', this.state.file); 23 | 24 | fetch('http://localhost:8080/upload', { 25 | method: 'POST', 26 | body: data 27 | }).then(response => { 28 | this.setState({msg: "File successfully uploaded"}); 29 | }).catch(err => { 30 | this.setState({error: err}); 31 | }); 32 | 33 | } 34 | 35 | render() { 36 | return ( 37 |
38 |

File Upload Example using React

39 |

Upload a File

40 |

{this.state.msg}

41 | 42 | 43 |
44 | ) 45 | } 46 | 47 | } 48 | 49 | export default UploadFile; 50 | -------------------------------------------------------------------------------- /react-file-upload/src/index-17.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | //import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | import UploadFile from './UploadFile'; 8 | 9 | ReactDOM.render( 10 | 11 | 12 | , 13 | document.getElementById('root') 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /react-file-upload/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import UploadFile from './UploadFile'; 4 | import * as serviceWorker from './serviceWorker'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | // If you want your app to work offline and load faster, you can change 9 | // unregister() to register() below. Note this comes with some pitfalls. 10 | // Learn more about service workers: https://bit.ly/CRA-PWA 11 | serviceWorker.unregister(); 12 | -------------------------------------------------------------------------------- /react-file-upload/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl) 104 | .then(response => { 105 | // Ensure service worker exists, and that we really are getting a JS file. 106 | const contentType = response.headers.get('content-type'); 107 | if ( 108 | response.status === 404 || 109 | (contentType != null && contentType.indexOf('javascript') === -1) 110 | ) { 111 | // No service worker found. Probably a different app. Reload the page. 112 | navigator.serviceWorker.ready.then(registration => { 113 | registration.unregister().then(() => { 114 | window.location.reload(); 115 | }); 116 | }); 117 | } else { 118 | // Service worker found. Proceed as normal. 119 | registerValidSW(swUrl, config); 120 | } 121 | }) 122 | .catch(() => { 123 | console.log( 124 | 'No internet connection found. App is running in offline mode.' 125 | ); 126 | }); 127 | } 128 | 129 | export function unregister() { 130 | if ('serviceWorker' in navigator) { 131 | navigator.serviceWorker.ready.then(registration => { 132 | registration.unregister(); 133 | }); 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /react-file-upload/src/upload.css: -------------------------------------------------------------------------------- 1 | #container { 2 | width: 800px; 3 | margin: auto; 4 | } -------------------------------------------------------------------------------- /react-rest-delete-api/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-rest-delete-api", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /react-rest-delete-api/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React – REST API DELETE Example 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /react-rest-delete-api/readme.rst: -------------------------------------------------------------------------------- 1 | Please follow the tutorial https://roytuts.com/react-rest-delete-example/ 2 | -------------------------------------------------------------------------------- /react-rest-delete-api/src/RestController.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class RestController extends React.Component { 4 | constructor(props) { 5 | super(props); 6 | } 7 | 8 | componentDidMount() { 9 | fetch('https://jsonplaceholder.typicode.com/posts/1', { 10 | method: 'DELETE' 11 | }); 12 | } 13 | render() { 14 | return ( 15 |
16 |

Resource deleted in the server

17 |
18 | ) 19 | } 20 | } 21 | 22 | export default RestController; -------------------------------------------------------------------------------- /react-rest-delete-api/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import RestController from './RestController' 4 | 5 | ReactDOM.render( 6 | , 7 | document.getElementById('root') 8 | ); -------------------------------------------------------------------------------- /react-rest-get-api/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-rest-get-api", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /react-rest-get-api/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React – REST API GET Example 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /react-rest-get-api/readme.rst: -------------------------------------------------------------------------------- 1 | Please follow the tutorial https://roytuts.com/react-rest-api-get-example/ 2 | -------------------------------------------------------------------------------- /react-rest-get-api/src/RestController.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class RestController extends React.Component { 4 | 5 | constructor(props) { 6 | super(props); 7 | this.state = {users: []}; 8 | this.headers = [ 9 | { key: 'userId', label: 'User ID' }, 10 | { key: 'id', label: 'ID' }, 11 | { key: 'title', label: 'Title' }, 12 | { key: 'body', label: 'Body' } 13 | ]; 14 | } 15 | 16 | componentDidMount() { 17 | fetch('https://jsonplaceholder.typicode.com/posts') 18 | .then(response => { 19 | return response.json(); 20 | }).then(result => { 21 | this.setState({ 22 | users:result 23 | }); 24 | }); 25 | } 26 | render() { 27 | return ( 28 | 29 | 30 | 31 | { 32 | this.headers.map(function(h) { 33 | return ( 34 | 35 | ) 36 | }) 37 | } 38 | 39 | 40 | 41 | { 42 | this.state.users.map(function(item, key) { 43 | return ( 44 | 45 | 46 | 47 | 48 | 49 | 50 | ) 51 | }) 52 | } 53 | 54 |
{h.label}
{item.userId}{item.id}{item.title}{item.body}
55 | ) 56 | } 57 | } 58 | 59 | export default RestController; -------------------------------------------------------------------------------- /react-rest-get-api/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import RestController from './RestController' 4 | 5 | ReactDOM.render( 6 | , 7 | document.getElementById('root') 8 | ); -------------------------------------------------------------------------------- /react-rest-post-api/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-rest-post-api", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /react-rest-post-api/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React - REST API POST Example 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /react-rest-post-api/readme.rst: -------------------------------------------------------------------------------- 1 | Please follow the tutorial https://roytuts.com/react-rest-api-post-example/ 2 | -------------------------------------------------------------------------------- /react-rest-post-api/src/RestController.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class RestController extends React.Component { 4 | constructor(props) { 5 | super(props); 6 | this.state = {user: []}; 7 | } 8 | 9 | componentDidMount() { 10 | fetch('https://jsonplaceholder.typicode.com/posts', { 11 | method: 'POST', 12 | body: JSON.stringify({ 13 | title: 'New title added', 14 | body: 'New body added. Hello body.', 15 | userId: 2 16 | }), 17 | headers: { 18 | "Content-type": "application/json; charset=UTF-8" 19 | } 20 | }).then(response => { 21 | return response.json() 22 | }).then(json => { 23 | this.setState({ 24 | user:json 25 | }); 26 | }); 27 | } 28 | render() { 29 | return ( 30 |
31 |

New Resource created in the server as shown below

32 |

Id : {this.state.user.id}

33 |

Title : {this.state.user.title}

34 |

Body : {this.state.user.body}

35 |

UserId : {this.state.user.userId}

36 |
37 | ) 38 | } 39 | } 40 | 41 | export default RestController; -------------------------------------------------------------------------------- /react-rest-post-api/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import RestController from './RestController' 4 | 5 | ReactDOM.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /react-rest-put-api/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-rest-put-api", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /react-rest-put-api/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React – REST API PUT Example 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /react-rest-put-api/readme.rst: -------------------------------------------------------------------------------- 1 | Please follow the tutorial https://roytuts.com/reactjs-rest-api-put-example/ 2 | -------------------------------------------------------------------------------- /react-rest-put-api/src/RestController.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class RestController extends React.Component { 4 | constructor(props) { 5 | super(props); 6 | this.state = {user: []}; 7 | } 8 | 9 | componentDidMount() { 10 | fetch('https://jsonplaceholder.typicode.com/posts/1', { 11 | method: 'PUT', 12 | body: JSON.stringify({ 13 | id: 1, 14 | title: 'foo', 15 | body: 'bar', 16 | userId: 1 17 | }), 18 | headers: { 19 | "Content-type": "application/json; charset=UTF-8" 20 | } 21 | }).then(response => { 22 | return response.json() 23 | }).then(json => { 24 | console.log(json) 25 | this.setState({ 26 | user:json 27 | }); 28 | }) 29 | } 30 | render() { 31 | return ( 32 |
33 |

Resource updated in the server as shown below

34 |

Id : {this.state.user.id}

35 |

Title : {this.state.user.title}

36 |

Body : {this.state.user.body}

37 |

UserId : {this.state.user.userId}

38 |
39 | ) 40 | } 41 | } 42 | 43 | export default RestController; -------------------------------------------------------------------------------- /react-rest-put-api/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import RestController from './RestController' 4 | 5 | ReactDOM.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /react-springboot-security/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-springboot-security", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "axios": "^1.6.0", 10 | "react": "^18.2.0", 11 | "react-dom": "^18.2.0", 12 | "react-router-dom": "^6.17.0", 13 | "react-scripts": "^3.0.1", 14 | "web-vitals": "^2.1.4" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts --openssl-legacy-provider start", 18 | "build": "react-scripts --openssl-legacy-provider build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /react-springboot-security/readme.rst: -------------------------------------------------------------------------------- 1 | Please follow the tutorial https://roytuts.com/react-login-logout-with-spring-boot-security/ 2 | -------------------------------------------------------------------------------- /react-springboot-security/src/components/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | //import axios from 'axios'; 3 | import AuthenticationService from '../service/AuthenticationService'; 4 | 5 | class Home extends React.Component { 6 | 7 | constructor(props) { 8 | super(props); 9 | this.state = {loggedinUser: '', greetId: '', greetMsg: ''}; 10 | this.logout = this.logout.bind(this); 11 | } 12 | 13 | componentDidMount() { 14 | /*axios.get(`http://localhost:8080/resource`, AuthenticationService.getAxiosConfig()) 15 | .then(response => { 16 | //console.log(response.data); 17 | this.setState({ 18 | loggedinUser:AuthenticationService.getLoggedinUser(), 19 | greetId: response.data.id, 20 | greetMsg: response.data.content 21 | }); 22 | }) 23 | .catch((error) => { 24 | console.log('error in home ' + error); 25 | });*/ 26 | 27 | fetch(`http://localhost:8080/resource`, AuthenticationService.getAxiosConfig()) 28 | .then(response => { 29 | return response.json(); 30 | }).then(result => { 31 | this.setState({ 32 | loggedinUser:AuthenticationService.getLoggedinUser(), 33 | greetId: result.id, 34 | greetMsg: result.content 35 | }); 36 | }); 37 | } 38 | 39 | logout() { 40 | if(window.confirm("Are you sure want to Logout?")) { 41 | AuthenticationService.logout(); 42 | window.location.href = '/'; 43 | } 44 | } 45 | 46 | render() { 47 | return ( 48 |
49 |

Welcome back, { this.state.loggedinUser }!

50 |

The ID is { this.state.greetId }

51 |

The content is { this.state.greetMsg }

52 | 53 |

54 |
55 | ); 56 | } 57 | 58 | } 59 | 60 | export default Home; 61 | -------------------------------------------------------------------------------- /react-springboot-security/src/components/Login.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import AuthenticationService from '../service/AuthenticationService'; 3 | 4 | class Login extends React.Component { 5 | 6 | constructor(props) { 7 | super(props); 8 | this.state = {username: '', password:'', isLoginFailed: false}; 9 | this.handleChange = this.handleChange.bind(this); 10 | this.handleSubmit = this.handleSubmit.bind(this); 11 | } 12 | 13 | handleChange(event) { 14 | const state = this.state 15 | state[event.target.name] = event.target.value 16 | this.setState(state); 17 | } 18 | 19 | handleSubmit(event) { 20 | event.preventDefault(); 21 | AuthenticationService 22 | .authenticate(this.state.username, this.state.password) 23 | .then(() => { 24 | AuthenticationService.registerUserInSession(this.state.username, this.state.password); 25 | window.location.href = '/'; 26 | }) 27 | .catch( () => this.setState({ isLoginFailed: true }) ); 28 | } 29 | 30 | render() { 31 | return ( 32 |
33 |

Login Here

34 |

35 | {this.state.isLoginFailed &&

Invalid Credentials
} 36 |
37 |

38 | 39 | 40 |

41 |

42 | 43 | 44 |

45 |

46 | 47 |

48 |
49 |
50 | ); 51 | } 52 | 53 | } 54 | 55 | export default Login; 56 | -------------------------------------------------------------------------------- /react-springboot-security/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Navigate } from "react-router"; 3 | import ReactDOM from 'react-dom/client'; 4 | import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; 5 | import Login from './components/Login'; 6 | import Home from './components/Home'; 7 | import AuthenticationService from './service/AuthenticationService'; 8 | import reportWebVitals from './reportWebVitals'; 9 | 10 | const root = ReactDOM.createRoot(document.getElementById('root')); 11 | root.render( 12 | 13 | 14 | 15 | : } /> 16 | } /> 17 | 18 | 19 | 20 | ); 21 | 22 | // If you want to start measuring performance in your app, pass a function 23 | // to log results (for example: reportWebVitals(console.log)) 24 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 25 | reportWebVitals(); 26 | -------------------------------------------------------------------------------- /react-springboot-security/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /react-springboot-security/src/service/AuthenticationService.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | export const KEY_USER = 'auth_user' 4 | export const KEY_PWD = 'auth_pwd' 5 | 6 | class AuthenticationService { 7 | 8 | authenticate(username, password) { 9 | /*return fetch(`http://localhost:8080/auth`, { 10 | method: 'get', 11 | headers: { 12 | authorization: this.createBasicAuthToken(username, password) 13 | } 14 | }).then(function(res) { 15 | return res.json(); 16 | }).then(res => { 17 | return res; 18 | });*/ 19 | 20 | return axios.get(`http://localhost:8080/auth`, 21 | { headers: { authorization: this.createBasicAuthToken(username, password) } }); 22 | } 23 | 24 | getAxiosConfig() { 25 | return { 26 | headers: { 27 | authorization: this.createBasicAuthToken(sessionStorage.getItem(this.KEY_USER), sessionStorage.getItem(this.KEY_PWD)) 28 | } 29 | } 30 | } 31 | 32 | createBasicAuthToken(username, password) { 33 | return 'Basic ' + window.btoa(username + ":" + password) 34 | } 35 | 36 | registerUserInSession(username, password) { 37 | sessionStorage.setItem(this.KEY_USER, username); 38 | sessionStorage.setItem(this.KEY_PWD, password); 39 | this.setupAxiosInterceptors(this.createBasicAuthToken(username, password)); 40 | } 41 | 42 | logout() { 43 | sessionStorage.removeItem(this.KEY_USER); 44 | sessionStorage.removeItem(this.KEY_PWD); 45 | } 46 | 47 | isUserLoggedin() { 48 | let user = sessionStorage.getItem(this.KEY_USER) 49 | if (user === null) return false 50 | return true 51 | } 52 | 53 | getLoggedinUser() { 54 | let user = sessionStorage.getItem(this.KEY_USER) 55 | if (user === null) return '' 56 | return user 57 | } 58 | 59 | setupAxiosInterceptors(token) { 60 | axios.interceptors.request.use(request => { 61 | 62 | if (this.isUserLoggedIn()) { 63 | request.headers.authorization = token 64 | } 65 | 66 | return request; 67 | }, error => { 68 | return Promise.reject(error); 69 | }); 70 | } 71 | 72 | } 73 | 74 | export default new AuthenticationService() 75 | -------------------------------------------------------------------------------- /react-table-cell-conditional-color/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-table-cell-conditional-color", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.3.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react-table-cell-conditional-color/readme.rst: -------------------------------------------------------------------------------- 1 | Please follow the tutorial https://roytuts.com/html-table-conditional-cell-color-using-react/ 2 | -------------------------------------------------------------------------------- /react-table-cell-conditional-color/src/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Table extends React.Component { 4 | constructor(props) { 5 | super(props); 6 | this.state = { 7 | products : [] 8 | }; 9 | this.headers = [ 10 | { key: 'id', label: 'Product Id'}, 11 | { key: 'price', label: 'Price' }, 12 | { key: 'sale_price', label: 'Sale Price' }, 13 | { key: 'sales_count', label: 'Sales Count' }, 14 | { key: 'sale_date', label: 'Sale Date' } 15 | ]; 16 | } 17 | 18 | componentDidMount() { 19 | this.setState({ 20 | products : [ 21 | { id: 1, price: 30000, sale_price: 35000, sales_count: 55, sale_date: '02-04-2018'}, 22 | { id: 2, price: 30300, sale_price: 37030, sales_count: 43, sale_date: '03-04-2018'}, 23 | { id: 3, price: 39010, sale_price: 48700, sales_count: 145, sale_date: '04-04-2018'}, 24 | { id: 4, price: 15000, sale_price: 17505, sales_count: 251, sale_date: '05-04-2018'}, 25 | { id: 5, price: 18000, sale_price: 22080, sales_count: 178, sale_date: '05-04-2018'}, 26 | { id: 6, price: 30500, sale_price: 34040, sales_count: 58, sale_date: '05-04-2018'}, 27 | { id: 7, price: 2000, sale_price: 2500, sales_count: 68, sale_date: '06-04-2018'}, 28 | { id: 8, price: 45871, sale_price: 55894, sales_count: 165, sale_date: '07-04-2018'} 29 | ] 30 | }); 31 | } 32 | 33 | getColor(value: number): string { 34 | if (value >=0 && value <=15) { 35 | return 'RGBA(255,198,191,0.4)'; 36 | } else if (value > 15 && value <=20) { 37 | return 'RGBA(170,214,136,0.4)'; 38 | } else if (value > 20 && value <=25) { 39 | return 'RGBA(152,195,119,0.6)'; 40 | } else if (value > 25 && value <=30) { 41 | return 'RGBA(139,189,120,0.9)'; 42 | } else if (value > 30 && value <=60) { 43 | return 'RGBA(94,167,88,0.9)'; 44 | } else if (value > 60 && value <=150) { 45 | return 'RGBA(88,157,65,0.3)'; 46 | } else if (value > 150 && value <=10000) { 47 | return 'RGBA(95,160,97,0.6)'; 48 | } else if (value > 10000 && value <=20000) { 49 | return 'RGBA(105,170,90,0.7)'; 50 | } else if (value > 20000 && value <=30000) { 51 | return 'RGBA(115,164,76,0.6)'; 52 | } else if (value > 30000) { 53 | return 'RGBA(98,143,94,0.4)'; 54 | } else { 55 | return 'RGBA(70,135,90,0.2)'; 56 | } 57 | } 58 | 59 | render() { 60 | return ( 61 |
62 | 63 | 64 | 65 | { 66 | this.headers.map(function(h) { 67 | return ( 68 | 69 | ) 70 | }) 71 | } 72 | 73 | 74 | 75 | { 76 | this.state.products.map(function(product, key) { 77 | return ( 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | ) 86 | }.bind(this)) 87 | } 88 | 89 |
{h.label}
{product.id}{product.price}{product.sale_price}{product.sales_count}{product.sale_date}
90 |
91 | ) 92 | } 93 | } 94 | 95 | export default Table; 96 | -------------------------------------------------------------------------------- /react-table-cell-conditional-color/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import Table from './Table'; 4 | import reportWebVitals from './reportWebVitals'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | 13 | // If you want to start measuring performance in your app, pass a function 14 | // to log results (for example: reportWebVitals(console.log)) 15 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 16 | reportWebVitals(); 17 | -------------------------------------------------------------------------------- /react-table-cell-conditional-color/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /react-table-search/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-table-search", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "axios": "^1.3.4", 10 | "react": "^18.2.0", 11 | "react-dom": "^18.2.0", 12 | "react-scripts": "5.0.1", 13 | "web-vitals": "^2.1.4" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /react-table-search/readme.rst: -------------------------------------------------------------------------------- 1 | Please follow the tutorial https://roytuts.com/react-search-functionality-in-html-table/ 2 | -------------------------------------------------------------------------------- /react-table-search/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App table {margin: auto; border: 1px solid;} 6 | .App table tr:nth-child(even) {background: #CCC} 7 | .App table tr:nth-child(odd) {background: #FFF} 8 | -------------------------------------------------------------------------------- /react-table-search/src/Todo.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import axios from 'axios'; 3 | import './App.css' 4 | export default function Todo() { 5 | 6 | const [todos, setTodos] = useState([]); 7 | const [todosInitial, setTodosInitial] = useState([]); 8 | const [todoSearch, setTodoSearch] = useState(""); 9 | 10 | useEffect(() => { 11 | axios({ 12 | url: "https://jsonplaceholder.typicode.com/todos" 13 | }).then(response => { 14 | //console.log(response.data); 15 | setTodos(response.data); 16 | setTodosInitial(response.data); 17 | }) 18 | 19 | 20 | }, []); 21 | 22 | function handleTodoChange(e) { 23 | e.preventDefault(); 24 | setTodoSearch(e.target.value); 25 | setTodos(todosInitial.filter(todo => todo.title.includes(todoSearch))); 26 | } 27 | return ( 28 |
29 |
30 | 31 |
32 |
33 | 34 | 35 | 36 | 37 | 38 | {todos.map(todo => ( 39 | 40 | 41 | 42 | 43 | ))} 44 | 45 |
TitleStatus
{todo.title}{todo.completed.toString()}
46 | 47 | ) 48 | } 49 | -------------------------------------------------------------------------------- /react-table-search/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import Todo from './Todo'; 4 | import reportWebVitals from './reportWebVitals'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | 13 | // If you want to start measuring performance in your app, pass a function 14 | // to log results (for example: reportWebVitals(console.log)) 15 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 16 | reportWebVitals(); 17 | -------------------------------------------------------------------------------- /react-table-search/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /reactjs-ajax-without-third-party-library/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reactjs-ajax-without-third-party-library", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.5", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "react": "^17.0.1", 10 | "react-dom": "^17.0.1", 11 | "react-scripts": "4.0.0", 12 | "web-vitals": "^0.2.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /reactjs-ajax-without-third-party-library/readme.rst: -------------------------------------------------------------------------------- 1 | Please follow the tutorial https://roytuts.com/how-to-use-ajax-in-react-http-get-request-without-using-third-party-library/ 2 | -------------------------------------------------------------------------------- /reactjs-ajax-without-third-party-library/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /reactjs-ajax-without-third-party-library/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class App extends React.Component { 4 | 5 | constructor (props) { 6 | super(props) 7 | this.state = {error: null, users: []}; 8 | this.headers = [ 9 | { key: 'userId', label: 'User ID' }, 10 | { key: 'id', label: 'ID' }, 11 | { key: 'title', label: 'Title' }, 12 | { key: 'body', label: 'Body' } 13 | ]; 14 | } 15 | 16 | componentDidMount () { 17 | var request = new XMLHttpRequest(); 18 | 19 | request.open('GET', 'https://jsonplaceholder.typicode.com/posts', true); 20 | 21 | request.onload = () => { 22 | if (request.readyState === 4 && request.status === 200) { 23 | this.setState({users: JSON.parse(request.responseText)}) 24 | } else { 25 | //Error 26 | } 27 | }; 28 | 29 | request.onerror = (err) => { 30 | this.setState({error: err}) 31 | }; 32 | 33 | request.send(); 34 | } 35 | 36 | render() { 37 | if (this.state.error) { 38 | return
Error: {this.state.error.message}
; 39 | } else { 40 | return ( 41 | 42 | 43 | 44 | { 45 | this.headers.map(function(h) { 46 | return ( 47 | 48 | ) 49 | }) 50 | } 51 | 52 | 53 | 54 | { 55 | this.state.users.map(function(item, key) { 56 | return ( 57 | 58 | 59 | 60 | 61 | 62 | 63 | ) 64 | }) 65 | } 66 | 67 |
{h.label}
{item.userId}{item.id}{item.title}{item.body}
68 | ) 69 | } 70 | } 71 | } 72 | 73 | export default App; 74 | -------------------------------------------------------------------------------- /reactjs-ajax-without-third-party-library/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /reactjs-ajax-without-third-party-library/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /reactjs-ajax-without-third-party-library/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /reactjs-ajax-without-third-party-library/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /reactjs-ajax-without-third-party-library/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /reactjs-ajax-without-third-party-library/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /tic-tac-toe-game/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tic-tac-toe-game", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /tic-tac-toe-game/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Game – tic tac toe 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /tic-tac-toe-game/readme.rst: -------------------------------------------------------------------------------- 1 | Please follow the tutorial https://roytuts.com/tic-tac-toe-game-using-react-js/ 2 | -------------------------------------------------------------------------------- /tic-tac-toe-game/src/Board.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import * as utils from './functions.js'; 3 | import './index.css'; 4 | 5 | class Board extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | squares: Array(9).fill(null), 10 | xIsNext: true, 11 | }; 12 | } 13 | 14 | renderSquare(i) { 15 | return this.handleClick(i)}/>; 16 | } 17 | 18 | handleClick(i) { 19 | const squares = this.state.squares.slice(); 20 | if (utils.findWinner(squares) || squares[i]) { 21 | return; 22 | } 23 | 24 | if(utils.isAllSquareClicked(squares) === true) { 25 | return; 26 | } 27 | 28 | squares[i] = this.state.xIsNext ? 'X' : 'O'; 29 | this.setState({ 30 | squares: squares, 31 | xIsNext: !this.state.xIsNext 32 | }); 33 | } 34 | 35 | render() { 36 | const winner = utils.findWinner(this.state.squares); 37 | const isFilled = utils.isAllSquareClicked(this.state.squares); 38 | let status; 39 | if (winner) { 40 | status = 'Winner: ' + winner; 41 | } else if(!winner && isFilled) { 42 | status = 'Game drawn'; 43 | } else { 44 | status = 'Now ' + (this.state.xIsNext ? 'X' : 'O') + '\'s turn'; 45 | } 46 | 47 | return ( 48 |
49 |
{status}
50 |
51 | {this.renderSquare(0)} 52 | {this.renderSquare(1)} 53 | {this.renderSquare(2)} 54 |
55 |
56 | {this.renderSquare(3)} 57 | {this.renderSquare(4)} 58 | {this.renderSquare(5)} 59 |
60 |
61 | {this.renderSquare(6)} 62 | {this.renderSquare(7)} 63 | {this.renderSquare(8)} 64 |
65 |
66 | ); 67 | } 68 | } 69 | 70 | export default Board; -------------------------------------------------------------------------------- /tic-tac-toe-game/src/Game.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Board from './Board' 3 | import './index.css'; 4 | 5 | class Game extends React.Component { 6 | render() { 7 | return ( 8 |
9 | 10 |
11 | ); 12 | } 13 | } 14 | 15 | export default Game; -------------------------------------------------------------------------------- /tic-tac-toe-game/src/functions.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export function square(props) { 4 | return ( 5 | 8 | ); 9 | } 10 | 11 | export function findWinner(squares) { 12 | const lines = [ 13 | [0, 1, 2], 14 | [3, 4, 5], 15 | [6, 7, 8], 16 | [0, 3, 6], 17 | [1, 4, 7], 18 | [2, 5, 8], 19 | [0, 4, 8], 20 | [2, 4, 6], 21 | ]; 22 | 23 | for (let i = 0; i < lines.length; i++) { 24 | const [a, b, c] = lines[i]; 25 | if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { 26 | return squares[a]; 27 | } 28 | } 29 | 30 | return null; 31 | } 32 | 33 | export function isAllSquareClicked(squares) { 34 | let count = 0; 35 | squares.forEach(function (item) { 36 | if (item !== null) { 37 | count++; 38 | } 39 | }); 40 | if(count === 9) { 41 | return true; 42 | } else { 43 | return false; 44 | } 45 | } -------------------------------------------------------------------------------- /tic-tac-toe-game/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px "Times New Roman", Times, serif; 3 | margin: 20px; 4 | } 5 | 6 | .board-row:after { 7 | clear: both; 8 | content: ""; 9 | display: table; 10 | } 11 | 12 | .square { 13 | background: #4169E1; 14 | border: 2px solid #999; 15 | float: left; 16 | font-size: 24px; 17 | font-weight: bold; 18 | line-height: 34px; 19 | height: 34px; 20 | margin-right: -2px; 21 | margin-top: -2px; 22 | padding: 0; 23 | text-align: center; 24 | width: 34px; 25 | } 26 | 27 | .square:focus { 28 | outline: none; 29 | } 30 | 31 | .status { 32 | margin: 10px; 33 | } 34 | 35 | .game { 36 | display: flex; 37 | flex-direction: row; 38 | } -------------------------------------------------------------------------------- /tic-tac-toe-game/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import Game from './Game' 4 | 5 | ReactDOM.render( 6 | , 7 | document.getElementById('root') 8 | ); --------------------------------------------------------------------------------