├── BGRemover ├── public │ ├── robots.txt │ ├── manifest.json │ └── index.html ├── .gitattributes ├── src │ ├── store.js │ ├── setupTests.js │ ├── App.test.js │ ├── components │ │ ├── Header.js │ │ └── Footer.js │ ├── App.js │ ├── features │ │ └── removeBackground.js │ └── index.js ├── .gitignore ├── README.md ├── package.json └── LICENSE ├── changename ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── src │ ├── App.js │ ├── hooks │ │ ├── UseContextA.jsx │ │ ├── UseContextB.jsx │ │ ├── CallbackButton.jsx │ │ ├── CallbackDisplayTitle.jsx │ │ ├── UseContextC.jsx │ │ ├── UseMemoSha.jsx │ │ ├── ToggleEvent.jsx │ │ ├── UseStateString.jsx │ │ ├── UseStateHook.jsx │ │ ├── UseStateArray.jsx │ │ ├── UseEffectEvent.jsx │ │ ├── UseEffectHook.jsx │ │ ├── UseCallback.jsx │ │ ├── UseMemoHook.jsx │ │ ├── UseRefHook.jsx │ │ ├── UseReducerEx.jsx │ │ └── FetchGetRequest.jsx │ ├── setupTests.js │ ├── App.test.js │ ├── replaceredux │ │ ├── ComponentB.jsx │ │ ├── ComponentD.jsx │ │ ├── ComponentE.jsx │ │ ├── ComponentA.jsx │ │ ├── ComponentC.jsx │ │ └── ComponentF.jsx │ ├── component │ │ ├── FChangeName.jsx │ │ ├── ChangeName.jsx │ │ ├── Loop.jsx │ │ ├── DisplayName.jsx │ │ ├── ToggleName.jsx │ │ ├── UpdateName.jsx │ │ ├── GetData.jsx │ │ └── FetchData.jsx │ ├── bubbleevent │ │ ├── name.jsx │ │ ├── ChangeName.jsx │ │ └── DisplayName.jsx │ ├── index.css │ ├── reportWebVitals.js │ ├── index.js │ ├── App.css │ ├── AppRedux.js │ ├── httpdata │ │ ├── axiosget.jsx │ │ ├── FetchData.jsx │ │ └── PostAxios.jsx │ └── logo.svg ├── .gitignore ├── package.json └── README.md ├── firstapp ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── src │ ├── setupTests.js │ ├── App.test.js │ ├── component │ │ ├── Navbar.jsx │ │ ├── MyCounter.jsx │ │ ├── HomeCounter.jsx │ │ ├── CounterNoDelete.jsx │ │ ├── Counter.jsx │ │ └── App.jsx │ ├── index.css │ ├── reportWebVitals.js │ ├── index.js │ ├── App.css │ ├── OllApp.js │ └── logo.svg ├── .gitignore ├── package.json └── README.md ├── qrcodeapp ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── src │ ├── App.js │ ├── setupTests.js │ ├── App.test.js │ ├── index.css │ ├── reportWebVitals.js │ ├── index.js │ ├── components │ │ ├── QRGenerate.jsx │ │ ├── QRWebcamScan.jsx │ │ ├── BarcodeEx.jsx │ │ ├── QRFileScan.jsx │ │ └── QRCodeEx.jsx │ ├── App.css │ └── logo.svg ├── .gitignore ├── package.json └── README.md ├── qrgenerator ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── src │ ├── App.js │ ├── setupTests.js │ ├── App.test.js │ ├── index.css │ ├── reportWebVitals.js │ ├── component │ │ ├── QRCodeDisplay.jsx │ │ ├── QRCodeGenerate.jsx │ │ ├── QRCodeWebcam.jsx │ │ ├── QRCodeEx.jsx │ │ └── QRCodeFileScan.jsx │ ├── index.js │ ├── App.css │ └── logo.svg ├── .gitignore ├── package.json └── README.md ├── barcodegenerator ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── src │ ├── App.js │ ├── setupTests.js │ ├── App.test.js │ ├── index.css │ ├── reportWebVitals.js │ ├── index.js │ ├── App.css │ ├── component │ │ └── BarcodeGen.jsx │ └── logo.svg ├── .gitignore ├── package.json └── README.md ├── errorboundary ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── src │ ├── component │ │ ├── DisplayName.jsx │ │ ├── ShowNotification.js │ │ ├── ChangeColorOnHover.jsx │ │ ├── PortalsComponent.jsx │ │ ├── ChangeColorProps.jsx │ │ ├── ChangeColorOnClick.jsx │ │ ├── ErrorBoundry.jsx │ │ └── ChangeColor.jsx │ ├── setupTests.js │ ├── App.test.js │ ├── index.css │ ├── reportWebVitals.js │ ├── App.js │ ├── index.js │ ├── App.css │ └── logo.svg ├── .gitignore ├── package.json └── README.md ├── reactwithspring ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ ├── index.html │ └── MiddlewareDeprecationSolution.txt ├── src │ ├── reactrouter │ │ ├── OnlineVideos.jsx │ │ ├── YoutubeVideos.jsx │ │ ├── Footer.jsx │ │ ├── LangInfo.jsx │ │ ├── Language.jsx │ │ ├── AboutUs.jsx │ │ ├── ErrorPage.jsx │ │ ├── Service.jsx │ │ ├── Header.jsx │ │ └── Home.jsx │ ├── setupTests.js │ ├── App.test.js │ ├── index.css │ ├── reportWebVitals.js │ ├── App.css │ ├── springapi │ │ ├── HomeRest.jsx │ │ ├── GetStudent.jsx │ │ ├── DeleteStudent.jsx │ │ ├── Navigation.jsx │ │ ├── PutStudent.jsx │ │ ├── PostStudent.jsx │ │ └── RestHome.jsx │ ├── index.js │ ├── reactspring │ │ ├── GetStudentInfo.jsx │ │ ├── DeleteStudent.jsx │ │ ├── UpdateStudent.jsx │ │ ├── InsertStudent.jsx │ │ ├── ReactHome.jsx │ │ └── ReactHomeModal.jsx │ ├── App.js │ └── logo.svg ├── .gitignore └── package.json └── README.md /BGRemover/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /BGRemover/.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /changename/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /firstapp/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /qrcodeapp/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /qrgenerator/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /barcodegenerator/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /errorboundary/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /reactwithspring/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /changename/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrVipinKumar/ReactAllProjects/HEAD/changename/public/favicon.ico -------------------------------------------------------------------------------- /changename/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrVipinKumar/ReactAllProjects/HEAD/changename/public/logo192.png -------------------------------------------------------------------------------- /changename/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrVipinKumar/ReactAllProjects/HEAD/changename/public/logo512.png -------------------------------------------------------------------------------- /firstapp/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrVipinKumar/ReactAllProjects/HEAD/firstapp/public/favicon.ico -------------------------------------------------------------------------------- /firstapp/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrVipinKumar/ReactAllProjects/HEAD/firstapp/public/logo192.png -------------------------------------------------------------------------------- /firstapp/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrVipinKumar/ReactAllProjects/HEAD/firstapp/public/logo512.png -------------------------------------------------------------------------------- /qrcodeapp/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrVipinKumar/ReactAllProjects/HEAD/qrcodeapp/public/favicon.ico -------------------------------------------------------------------------------- /qrcodeapp/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrVipinKumar/ReactAllProjects/HEAD/qrcodeapp/public/logo192.png -------------------------------------------------------------------------------- /qrcodeapp/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrVipinKumar/ReactAllProjects/HEAD/qrcodeapp/public/logo512.png -------------------------------------------------------------------------------- /qrgenerator/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrVipinKumar/ReactAllProjects/HEAD/qrgenerator/public/favicon.ico -------------------------------------------------------------------------------- /qrgenerator/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrVipinKumar/ReactAllProjects/HEAD/qrgenerator/public/logo192.png -------------------------------------------------------------------------------- /qrgenerator/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrVipinKumar/ReactAllProjects/HEAD/qrgenerator/public/logo512.png -------------------------------------------------------------------------------- /errorboundary/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrVipinKumar/ReactAllProjects/HEAD/errorboundary/public/favicon.ico -------------------------------------------------------------------------------- /errorboundary/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrVipinKumar/ReactAllProjects/HEAD/errorboundary/public/logo192.png -------------------------------------------------------------------------------- /errorboundary/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrVipinKumar/ReactAllProjects/HEAD/errorboundary/public/logo512.png -------------------------------------------------------------------------------- /reactwithspring/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrVipinKumar/ReactAllProjects/HEAD/reactwithspring/public/favicon.ico -------------------------------------------------------------------------------- /reactwithspring/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrVipinKumar/ReactAllProjects/HEAD/reactwithspring/public/logo192.png -------------------------------------------------------------------------------- /reactwithspring/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrVipinKumar/ReactAllProjects/HEAD/reactwithspring/public/logo512.png -------------------------------------------------------------------------------- /barcodegenerator/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrVipinKumar/ReactAllProjects/HEAD/barcodegenerator/public/favicon.ico -------------------------------------------------------------------------------- /barcodegenerator/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrVipinKumar/ReactAllProjects/HEAD/barcodegenerator/public/logo192.png -------------------------------------------------------------------------------- /barcodegenerator/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrVipinKumar/ReactAllProjects/HEAD/barcodegenerator/public/logo512.png -------------------------------------------------------------------------------- /reactwithspring/src/reactrouter/OnlineVideos.jsx: -------------------------------------------------------------------------------- 1 | const OnlineVideos = () => { 2 | return ( 3 |
4 |

We also provides Online Lectures

5 |
6 | ); 7 | }; 8 | 9 | export default OnlineVideos; 10 | -------------------------------------------------------------------------------- /qrcodeapp/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import BarcodeEx from "./components/BarcodeEx"; 3 | 4 | function App() { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /qrgenerator/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import QRCodeEx from "./component/QRCodeEx"; 3 | 4 | function App() { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /BGRemover/src/store.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from '@reduxjs/toolkit'; 2 | import statusReducer from './features/removeBackground'; 3 | 4 | export const store = configureStore({ 5 | reducer: { 6 | status: statusReducer 7 | }, 8 | }); 9 | -------------------------------------------------------------------------------- /barcodegenerator/src/App.js: -------------------------------------------------------------------------------- 1 | import BarcodeGen from "./component/BarcodeGen"; 2 | 3 | function App() { 4 | return ( 5 |
6 | 7 |
8 | ); 9 | } 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /errorboundary/src/component/DisplayName.jsx: -------------------------------------------------------------------------------- 1 | const DisplayName = ({ name }) => { 2 | if (/\d/.test(name)) { 3 | throw new Error("Number is not allowed in name"); 4 | } 5 | return

{name}

; 6 | }; 7 | 8 | export default DisplayName; 9 | -------------------------------------------------------------------------------- /reactwithspring/src/reactrouter/YoutubeVideos.jsx: -------------------------------------------------------------------------------- 1 | const YoutubeVideos = () => { 2 | return ( 3 |
4 |

We also provides YouTube Videos Lectures

5 |
6 | ); 7 | }; 8 | 9 | export default YoutubeVideos; 10 | -------------------------------------------------------------------------------- /errorboundary/src/component/ShowNotification.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | class ShowNotification extends Component { 4 | render() { 5 | return
; 6 | } 7 | } 8 | 9 | export default ShowNotification; 10 | -------------------------------------------------------------------------------- /changename/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Loop from "./component/Loop"; 3 | 4 | const App = () => { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | }; 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /changename/src/hooks/UseContextA.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import UseContextB from "./UseContextB"; 3 | const UseContextA = () => { 4 | return ( 5 |
6 | 7 |
8 | ); 9 | }; 10 | 11 | export default UseContextA; 12 | -------------------------------------------------------------------------------- /changename/src/hooks/UseContextB.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import UseContextC from "./UseContextC"; 3 | const UseContextB = () => { 4 | return ( 5 |
6 | 7 |
8 | ); 9 | }; 10 | 11 | export default UseContextB; 12 | -------------------------------------------------------------------------------- /firstapp/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 | -------------------------------------------------------------------------------- /qrcodeapp/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 | -------------------------------------------------------------------------------- /changename/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 | -------------------------------------------------------------------------------- /errorboundary/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 | -------------------------------------------------------------------------------- /qrgenerator/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 | -------------------------------------------------------------------------------- /barcodegenerator/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 | -------------------------------------------------------------------------------- /reactwithspring/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 | -------------------------------------------------------------------------------- /BGRemover/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 | -------------------------------------------------------------------------------- /firstapp/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 | -------------------------------------------------------------------------------- /qrcodeapp/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 | -------------------------------------------------------------------------------- /changename/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 | -------------------------------------------------------------------------------- /changename/src/replaceredux/ComponentB.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ComponentC from "./ComponentC"; 3 | 4 | const ComponentB = () => { 5 | return ( 6 |
7 | ComponentB 8 | 9 |
10 | ); 11 | }; 12 | 13 | export default ComponentB; 14 | -------------------------------------------------------------------------------- /changename/src/replaceredux/ComponentD.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ComponentE from "./ComponentE"; 3 | 4 | const ComponentD = () => { 5 | return ( 6 |
7 | ComponentD 8 | 9 |
10 | ); 11 | }; 12 | 13 | export default ComponentD; 14 | -------------------------------------------------------------------------------- /changename/src/replaceredux/ComponentE.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ComponentF from "./ComponentF"; 3 | 4 | const ComponentE = () => { 5 | return ( 6 |
7 | ComponentE 8 | 9 |
10 | ); 11 | }; 12 | 13 | export default ComponentE; 14 | -------------------------------------------------------------------------------- /errorboundary/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 | -------------------------------------------------------------------------------- /qrgenerator/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 | -------------------------------------------------------------------------------- /barcodegenerator/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 | -------------------------------------------------------------------------------- /reactwithspring/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 | -------------------------------------------------------------------------------- /changename/src/component/FChangeName.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const FChangeName = (props) => { 3 | console.log("...inside render in FChangeName"); 4 | return ( 5 |
6 |

{props.name}

7 |
8 | ); 9 | }; 10 | 11 | export default React.memo(FChangeName); 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | All React Project Code at One Place 2 | ------------------------------------------ 3 | 4 | 1. BGRemover
5 | 2. barcodegenerator
6 | 3. changename
7 | 4. errorboundary
8 | 5. firstapp
9 | 6. qrcodeapp
10 | 7. qrgenerator
11 | 8. reactwithspring
12 | -------------------------------------------------------------------------------- /reactwithspring/src/reactrouter/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const Footer = () => { 3 | return ( 4 |
5 | @Copyright 6 |  Dr. Vipin Classes 7 |
8 | ); 9 | }; 10 | 11 | export default Footer; 12 | -------------------------------------------------------------------------------- /changename/src/bubbleevent/name.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | class Name extends Component { 3 | render() { 4 | return ( 5 |
6 |

{this.props.name}

7 | 8 |
9 | ); 10 | } 11 | } 12 | 13 | export default Name; 14 | -------------------------------------------------------------------------------- /changename/src/hooks/CallbackButton.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const CallbackButton = ({ eventHandle, children }) => { 3 | console.log("Rendering inside " + children); 4 | return ( 5 |
6 | 7 |
8 | ); 9 | }; 10 | 11 | export default React.memo(CallbackButton); 12 | -------------------------------------------------------------------------------- /changename/src/hooks/CallbackDisplayTitle.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const CallbackDisplayTitle = () => { 3 | console.log("Rendering Inside CallbackDisplayTitle Component"); 4 | return ( 5 |
6 |

Use of UseCallback Hook Example

7 |
8 | ); 9 | }; 10 | 11 | export default React.memo(CallbackDisplayTitle); 12 | -------------------------------------------------------------------------------- /reactwithspring/src/reactrouter/LangInfo.jsx: -------------------------------------------------------------------------------- 1 | import { useParams } from "react-router-dom"; 2 | 3 | const LangInfo = () => { 4 | const { lang } = useParams(); 5 | return ( 6 |
7 |

We provides lectures on {lang} language also...

8 |
9 | ); 10 | }; 11 | 12 | export default LangInfo; 13 | -------------------------------------------------------------------------------- /changename/src/component/ChangeName.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from "react"; 2 | class ChangeName extends PureComponent { 3 | render() { 4 | console.log("...inside render in ChangeName"); 5 | return ( 6 |
7 |

{this.props.name}

8 |
9 | ); 10 | } 11 | } 12 | 13 | export default ChangeName; 14 | -------------------------------------------------------------------------------- /changename/src/hooks/UseContextC.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import { UserContext } from "../App"; 3 | const UseContextC = () => { 4 | const name = useContext(UserContext); 5 | return ( 6 |
7 |

Welcome {name} to UseContext C Component

8 |
9 | ); 10 | }; 11 | 12 | export default UseContextC; 13 | -------------------------------------------------------------------------------- /changename/src/bubbleevent/ChangeName.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Name from "./name"; 3 | class ChangeName extends Component { 4 | render() { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | } 11 | } 12 | 13 | export default ChangeName; 14 | -------------------------------------------------------------------------------- /reactwithspring/src/reactrouter/Language.jsx: -------------------------------------------------------------------------------- 1 | import { Outlet } from "react-router-dom"; 2 | const Language = (props) => { 3 | return ( 4 |
5 |

We provides videos lectures on almost ALL computer languages...

6 | 7 | {props.lang} 8 |
9 | ); 10 | }; 11 | 12 | export default Language; 13 | -------------------------------------------------------------------------------- /firstapp/src/component/Navbar.jsx: -------------------------------------------------------------------------------- 1 | const Navbar = (props) => { 2 | return ( 3 |
4 | 5 |

6 | Total Counter 7 | {props.totalCounter} 8 |

9 | 10 |
11 | ); 12 | }; 13 | 14 | export default Navbar; 15 | -------------------------------------------------------------------------------- /errorboundary/src/component/ChangeColorOnHover.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | class ChangeColorOnHover extends Component { 3 | render() { 4 | const color = this.props.color; 5 | return ( 6 |
7 |

Dr. Vipin Teotia

8 |
9 | ); 10 | } 11 | } 12 | 13 | export default ChangeColorOnHover; 14 | -------------------------------------------------------------------------------- /BGRemover/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /changename/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /firstapp/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /qrcodeapp/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /qrgenerator/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /barcodegenerator/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /errorboundary/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /reactwithspring/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /reactwithspring/src/reactrouter/AboutUs.jsx: -------------------------------------------------------------------------------- 1 | import { useNavigate } from "react-router-dom"; 2 | 3 | const AboutUs = () => { 4 | const navigate = useNavigate(); 5 | return ( 6 |
7 |

About Us Page

8 | 11 |
12 | ); 13 | }; 14 | 15 | export default AboutUs; 16 | -------------------------------------------------------------------------------- /changename/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 | -------------------------------------------------------------------------------- /firstapp/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 | -------------------------------------------------------------------------------- /qrcodeapp/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 | -------------------------------------------------------------------------------- /qrgenerator/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 | -------------------------------------------------------------------------------- /barcodegenerator/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 | -------------------------------------------------------------------------------- /changename/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 | -------------------------------------------------------------------------------- /errorboundary/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 | -------------------------------------------------------------------------------- /firstapp/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 | -------------------------------------------------------------------------------- /qrcodeapp/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 | -------------------------------------------------------------------------------- /qrgenerator/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 | -------------------------------------------------------------------------------- /reactwithspring/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 | -------------------------------------------------------------------------------- /barcodegenerator/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 | -------------------------------------------------------------------------------- /errorboundary/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 | -------------------------------------------------------------------------------- /reactwithspring/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 | -------------------------------------------------------------------------------- /BGRemover/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import { Provider } from 'react-redux'; 4 | import { store } from './app/store'; 5 | import App from './App'; 6 | 7 | test('renders learn react link', () => { 8 | const { getByText } = render( 9 | 10 | 11 | 12 | ); 13 | 14 | expect(getByText(/learn/i)).toBeInTheDocument(); 15 | }); 16 | -------------------------------------------------------------------------------- /BGRemover/src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | export default class Header extends Component { 4 | render() { 5 | return ( 6 |
7 |
8 |

Background Removal Tool

9 |

Fast, simple and great performance.

10 |
11 |
12 | ); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /changename/src/component/Loop.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Loop = () => { 4 | const loopFunc = () => { 5 | let data = []; 6 | for (let i = 0; i < 10; i++) data.push(i * 2); 7 | return data; 8 | }; 9 | return ( 10 |
11 |

Loop Inside JSX Example

12 | {loopFunc().map((value) => ( 13 |

{value}

14 | ))} 15 |
16 | ); 17 | }; 18 | 19 | export default Loop; 20 | -------------------------------------------------------------------------------- /changename/src/hooks/UseMemoSha.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useMemo } from "react"; 3 | let complexFunction = function (arg1, arg2) { 4 | return arg1 + arg2; // just for example (any logic can be here) 5 | }; 6 | const cache = (complexFunction) => { 7 | return useMemo(complexFunction, []); 8 | }; 9 | let cachedFunction = cache(complexFunction); 10 | const UseMemoSha = () => { 11 | return
; 12 | }; 13 | 14 | export default UseMemoSha; 15 | -------------------------------------------------------------------------------- /errorboundary/src/component/PortalsComponent.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import ReactDOM from "react-dom"; 3 | class PortalsComponent extends Component { 4 | state = { 5 | name: "Dr. Vipin Classes", 6 | }; 7 | render() { 8 | return ReactDOM.createPortal( 9 |

{this.state.name}

, 10 | document.getElementById("portals") 11 | ); 12 | } 13 | } 14 | 15 | export default PortalsComponent; 16 | -------------------------------------------------------------------------------- /BGRemover/src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | export default class Footer extends Component { 4 | render() { 5 | return ( 6 |
7 |
8 |
9 |

made with by Dr. Vipin Kumar

10 |
11 |
12 |
13 | ); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /errorboundary/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import ChangeColorOnClick from "./component/ChangeColorOnClick"; 3 | import ChangeColorProps from "./component/ChangeColorProps"; 4 | 5 | function App() { 6 | return ( 7 |
8 | { 10 | return ; 11 | }} 12 | /> 13 |
14 | ); 15 | } 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /BGRemover/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./App.css"; 3 | import Footer from "./components/Footer"; 4 | import Header from "./components/Header"; 5 | import RemoveBackground from "./components/RemoveBackground"; 6 | 7 | function App() { 8 | return ( 9 |
10 |
11 |
12 | 13 |
14 |
15 |
16 | ); 17 | } 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /reactwithspring/src/reactrouter/ErrorPage.jsx: -------------------------------------------------------------------------------- 1 | import { useNavigate } from "react-router-dom"; 2 | 3 | const ErrorPage = () => { 4 | const navigate = useNavigate(); 5 | return ( 6 |
7 |

Page not found!

8 | 14 |
15 | ); 16 | }; 17 | 18 | export default ErrorPage; 19 | -------------------------------------------------------------------------------- /firstapp/src/component/MyCounter.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | let count = 0; 3 | 4 | function MyCounter(props) { 5 | //Functional Component 6 | let { count } = props; 7 | function handleIncrement() { 8 | count++; 9 | console.log(count); 10 | } 11 | return ( 12 |
13 | 14 | {count} 15 | 16 |
17 | ); 18 | } 19 | 20 | export default MyCounter; 21 | -------------------------------------------------------------------------------- /errorboundary/src/component/ChangeColorProps.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | class ChangeColorProps extends Component { 3 | state = { 4 | color: "#ff0000", 5 | }; 6 | changeColor = () => { 7 | const color = "#" + Math.floor(Math.random() * 6177722).toString(16); 8 | this.setState({ 9 | color: color, 10 | }); 11 | }; 12 | render() { 13 | return
{this.props.render(this.state.color, this.changeColor)}
; 14 | } 15 | } 16 | 17 | export default ChangeColorProps; 18 | -------------------------------------------------------------------------------- /BGRemover/src/features/removeBackground.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from '@reduxjs/toolkit'; 2 | 3 | const initialState = { 4 | bgRemoved: null 5 | } 6 | 7 | const removeBackground = createSlice({ 8 | name: 'removeBg', 9 | initialState, 10 | reducers: { 11 | setActionStatus: (state, action ) => { 12 | return { ...state, bgRemoved: action.payload }; 13 | }, 14 | }, 15 | }); 16 | 17 | export const { setActionStatus } = removeBackground.actions; 18 | export default removeBackground.reducer; -------------------------------------------------------------------------------- /changename/src/bubbleevent/DisplayName.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import ChangeName from "./ChangeName"; 3 | class DisplayName extends Component { 4 | state = { name: "Dr Vipin Classes" }; 5 | changeName = () => { 6 | this.setState({ 7 | name: "Dr. Vipin Teotia", 8 | }); 9 | }; 10 | render() { 11 | return ( 12 |
13 | 14 |
15 | ); 16 | } 17 | } 18 | 19 | export default DisplayName; 20 | -------------------------------------------------------------------------------- /changename/src/hooks/ToggleEvent.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import UseEffectEvent from "./UseEffectEvent"; 3 | const ToggleEvent = () => { 4 | const [display, setDisplay] = useState(true); 5 | 6 | return ( 7 |
8 | 15 | {display && } 16 |
17 | ); 18 | }; 19 | 20 | export default ToggleEvent; 21 | -------------------------------------------------------------------------------- /errorboundary/src/component/ChangeColorOnClick.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import ChangeColor from "./ChangeColor"; 3 | class ChangeColorOnClick extends Component { 4 | render() { 5 | const color = this.props.color; 6 | return ( 7 |
8 |

Dr. Vipin Classes

9 | 10 |
11 | ); 12 | } 13 | } 14 | 15 | export default ChangeColor(ChangeColorOnClick); 16 | -------------------------------------------------------------------------------- /errorboundary/src/component/ErrorBoundry.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | class ErrorBoundry extends Component { 3 | state = { 4 | checkError: false, 5 | }; 6 | static getDerivedStateFromError(error) { 7 | return { 8 | checkError: true, 9 | }; 10 | } 11 | render() { 12 | if (this.state.checkError) { 13 | return

Error: Please pass correct name

; 14 | } 15 | return this.props.children; 16 | } 17 | } 18 | 19 | export default ErrorBoundry; 20 | -------------------------------------------------------------------------------- /changename/src/hooks/UseStateString.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | const UseStateHook = () => { 3 | const [fullName, setFullName] = useState({ 4 | fname: "Dr. Vipin", 5 | lname: "Classes", 6 | }); 7 | 8 | return ( 9 |
10 | {fullName.fname + " " + fullName.lname} 11 |
12 | 15 |

{JSON.stringify(fullName)}

16 |
17 | ); 18 | }; 19 | 20 | export default UseStateHook; 21 | -------------------------------------------------------------------------------- /reactwithspring/src/reactrouter/Service.jsx: -------------------------------------------------------------------------------- 1 | import { NavLink, Outlet } from "react-router-dom"; 2 | 3 | const Service = () => { 4 | return ( 5 |
6 |

We are providing following services

7 | 15 | 16 |
17 | ); 18 | }; 19 | 20 | export default Service; 21 | -------------------------------------------------------------------------------- /qrgenerator/src/component/QRCodeDisplay.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const QRCodeDisplay = ({ imageQR }) => { 4 | return ( 5 |
6 |
7 |

QrCode Image

8 |
9 |
10 | {imageQR && ( 11 | 12 | qr code pic is here 13 | 14 | )} 15 |
16 |
17 | ); 18 | }; 19 | 20 | export default QRCodeDisplay; 21 | -------------------------------------------------------------------------------- /BGRemover/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 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /errorboundary/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 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 | -------------------------------------------------------------------------------- /firstapp/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 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /qrcodeapp/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 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /changename/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 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /errorboundary/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 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /qrgenerator/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 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /barcodegenerator/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 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /reactwithspring/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 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /changename/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import "./index.css"; 4 | import reportWebVitals from "./reportWebVitals"; 5 | import App from "./App"; 6 | import "bootstrap/dist/css/bootstrap.css"; 7 | const root = ReactDOM.createRoot(document.getElementById("root")); 8 | root.render( 9 | 10 | 11 | 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 | -------------------------------------------------------------------------------- /changename/src/component/DisplayName.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import FChangeName from "./FChangeName"; 3 | class DisplayName extends Component { 4 | state = { 5 | name: "Dr Vipin Teotia", 6 | }; 7 | changeName = () => { 8 | this.setState({ 9 | name: "Dr Vipin Classes", 10 | }); 11 | }; 12 | render() { 13 | console.log("...inside render in DisplayName"); 14 | return ( 15 |
16 | 17 | 18 |
19 | ); 20 | } 21 | } 22 | 23 | export default DisplayName; 24 | -------------------------------------------------------------------------------- /BGRemover/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import { store } from './store'; 5 | import { Provider } from 'react-redux'; 6 | import * as serviceWorker from './serviceWorker'; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | 12 | 13 | , 14 | document.getElementById('root') 15 | ); 16 | 17 | // If you want your app to work offline and load faster, you can change 18 | // unregister() to register() below. Note this comes with some pitfalls. 19 | // Learn more about service workers: https://bit.ly/CRA-PWA 20 | serviceWorker.unregister(); 21 | -------------------------------------------------------------------------------- /qrcodeapp/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import "bootstrap/dist/css/bootstrap.css"; 7 | import "bootstrap/dist/js/bootstrap"; 8 | const root = ReactDOM.createRoot(document.getElementById('root')); 9 | root.render( 10 | 11 | 12 | 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 | -------------------------------------------------------------------------------- /qrgenerator/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import "bootstrap/dist/css/bootstrap.css"; 7 | import "bootstrap/dist/js/bootstrap.js"; 8 | const root = ReactDOM.createRoot(document.getElementById('root')); 9 | root.render( 10 | 11 | 12 | 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 | -------------------------------------------------------------------------------- /barcodegenerator/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import "bootstrap/dist/css/bootstrap.css"; 7 | import "bootstrap/dist/js/bootstrap"; 8 | const root = ReactDOM.createRoot(document.getElementById('root')); 9 | root.render( 10 | 11 | 12 | 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 | -------------------------------------------------------------------------------- /changename/src/hooks/UseStateHook.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | const UseStateHook = () => { 3 | const [count, setCount] = useState(0); 4 | const incrementFive = () => { 5 | setCount((prevCount) => prevCount + 1); 6 | setCount((prevCount) => prevCount + 1); 7 | setCount((prevCount) => prevCount + 1); 8 | setCount((prevCount) => prevCount + 1); 9 | setCount((prevCount) => prevCount + 1); 10 | }; 11 | return ( 12 |
13 | {count} 14 |
15 | 16 | 17 |
18 | ); 19 | }; 20 | 21 | export default UseStateHook; 22 | -------------------------------------------------------------------------------- /errorboundary/src/component/ChangeColor.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | const ChangeColor = (NormalComponent) => { 4 | class EnhanceComponent extends Component { 5 | state = { 6 | color: "#ff0000", 7 | }; 8 | changeColor = () => { 9 | const color = "#" + Math.floor(Math.random() * 6177722).toString(16); 10 | this.setState({ 11 | color: color, 12 | }); 13 | }; 14 | render() { 15 | return ( 16 | 20 | ); 21 | } 22 | } 23 | 24 | return EnhanceComponent; 25 | }; 26 | 27 | export default ChangeColor; 28 | -------------------------------------------------------------------------------- /changename/src/hooks/UseStateArray.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | const UseStateHook = () => { 3 | const [name, setName] = useState(""); 4 | const [names, setNames] = useState([]); 5 | const addName = () => { 6 | setNames([...names, { id: names.length, value: name }]); 7 | }; 8 | return ( 9 |
10 | {names.map((n) => { 11 | return
  • {n.value}
    • ; 12 | })} 13 |
    14 | setName(event.target.value)} 18 | > 19 | 20 |
    21 | ); 22 | }; 23 | 24 | export default UseStateHook; 25 | -------------------------------------------------------------------------------- /firstapp/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from "./component/App.jsx"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | //import MyCounter from "./component/MyCounter"; 7 | 8 | import "bootstrap/dist/css/bootstrap.css"; 9 | const root = ReactDOM.createRoot(document.getElementById("root")); 10 | root.render( 11 | 12 | 13 | 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 | -------------------------------------------------------------------------------- /changename/src/hooks/UseEffectEvent.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | const UseEffectEvent = () => { 3 | const [X, setX] = useState(0); 4 | const [Y, setY] = useState(0); 5 | const changeMouse = (event) => { 6 | console.log("Inside Change Mouse Method"); 7 | setX(event.clientX); 8 | setY(event.clientY); 9 | }; 10 | useEffect(() => { 11 | console.log("Inside useffect hook"); 12 | window.addEventListener("mousemove", changeMouse); 13 | return () => { 14 | window.removeEventListener("mousemove", changeMouse); 15 | }; 16 | }, []); 17 | return ( 18 |
    19 |

    X: {X}

    ,

    Y: {Y}

    20 |
    21 | ); 22 | }; 23 | 24 | export default UseEffectEvent; 25 | -------------------------------------------------------------------------------- /changename/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 | -------------------------------------------------------------------------------- /firstapp/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 | -------------------------------------------------------------------------------- /qrgenerator/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 | -------------------------------------------------------------------------------- /barcodegenerator/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 | -------------------------------------------------------------------------------- /errorboundary/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 | -------------------------------------------------------------------------------- /qrcodeapp/src/components/QRGenerate.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const QRGenerate = ({ imageQR }) => { 4 | return ( 5 |
    6 |
    7 |
    8 |

    9 | 10 | QR Code Generator 11 | 12 |

    13 |
    14 |
    15 | {imageQR && ( 16 | 17 | ... 18 | 19 | )} 20 |
    21 |
    22 |
    23 | ); 24 | }; 25 | 26 | export default QRGenerate; 27 | -------------------------------------------------------------------------------- /reactwithspring/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 | -------------------------------------------------------------------------------- /reactwithspring/src/springapi/HomeRest.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { Routes, Route } from "react-router-dom"; 3 | import DeleteStudents from "./DeleteStudent"; 4 | import GetStudents from "./GetStudent"; 5 | import PostStudents from "./PostStudent"; 6 | import PutStudents from "./PutStudent"; 7 | class HomeRest extends Component { 8 | render() { 9 | return ( 10 | 11 | }> 12 | }> 13 | }> 14 | }> 15 | 16 | ); 17 | } 18 | } 19 | 20 | export default HomeRest; 21 | -------------------------------------------------------------------------------- /changename/src/component/ToggleName.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import UpdateName from "./UpdateName"; 3 | class ToggleName extends Component { 4 | state = { 5 | toggle: true, 6 | }; 7 | toggleComponent = () => { 8 | const check = this.state.toggle === true ? false : true; 9 | this.setState({ 10 | toggle: check, 11 | }); 12 | }; 13 | render() { 14 | return ( 15 |
    16 | {this.state.toggle === true ? ( 17 | 18 | ) : ( 19 |

    Removed Component

    20 | )} 21 | 22 |
    23 | ); 24 | } 25 | } 26 | 27 | export default ToggleName; 28 | -------------------------------------------------------------------------------- /qrcodeapp/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | margin:10px auto; 4 | } 5 | 6 | .App-logo { 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | @media (prefers-reduced-motion: no-preference) { 12 | .App-logo { 13 | animation: App-logo-spin infinite 20s linear; 14 | } 15 | } 16 | 17 | .App-header { 18 | background-color: #282c34; 19 | min-height: 100vh; 20 | display: flex; 21 | flex-direction: column; 22 | align-items: center; 23 | justify-content: center; 24 | font-size: calc(10px + 2vmin); 25 | color: white; 26 | } 27 | 28 | .App-link { 29 | color: #61dafb; 30 | } 31 | 32 | @keyframes App-logo-spin { 33 | from { 34 | transform: rotate(0deg); 35 | } 36 | to { 37 | transform: rotate(360deg); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /reactwithspring/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import { BrowserRouter } from "react-router-dom"; 4 | import "./index.css"; 5 | import App from "./App"; 6 | import reportWebVitals from "./reportWebVitals"; 7 | import "bootstrap/dist/css/bootstrap.css"; 8 | const root = ReactDOM.createRoot(document.getElementById("root")); 9 | root.render( 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | 17 | // If you want to start measuring performance in your app, pass a function 18 | // to log results (for example: reportWebVitals(console.log)) 19 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 20 | reportWebVitals(); 21 | -------------------------------------------------------------------------------- /firstapp/src/component/HomeCounter.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Counter from "./Counter"; 3 | class HomeCounter extends Component { 4 | render() { 5 | return ( 6 |
    7 | 13 | {this.props.counters.map((counter) => ( 14 | 21 | ))} 22 |
    23 | ); 24 | } 25 | } 26 | 27 | export default HomeCounter; 28 | -------------------------------------------------------------------------------- /changename/src/hooks/UseEffectHook.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | 3 | const UseEffectHook = () => { 4 | const [count, setCount] = useState(0); 5 | const [name, setName] = useState("Dr. Vipin Classes"); 6 | useEffect(() => { 7 | console.log("Inside useEffect Hook called Once"); 8 | }, [name]); 9 | // useEffect(() => { 10 | // console.log("Inside useEffect Hook called on Name Change"); 11 | // }, [name]); 12 | const incrementCount = () => { 13 | setCount(count + 1); 14 | }; 15 | return ( 16 |
    17 |

    {count}

    18 | 19 |

    {name}

    20 | 27 |
    28 | ); 29 | }; 30 | 31 | export default UseEffectHook; 32 | -------------------------------------------------------------------------------- /qrgenerator/src/component/QRCodeGenerate.jsx: -------------------------------------------------------------------------------- 1 | const QRCodeGenerate = (props) => { 2 | return ( 3 |
    4 |
    5 |

    6 | QrCode Generator 7 |

    8 |
    9 |
    10 |

    Enter text for generating QR Code

    11 |
    12 |
    13 | props.QRCodeGen(e.target.value)} 18 | /> 19 | 25 |
    26 |
    27 | ); 28 | }; 29 | 30 | export default QRCodeGenerate; 31 | -------------------------------------------------------------------------------- /BGRemover/README.md: -------------------------------------------------------------------------------- 1 | 2 | ![Logo](https://i1.wp.com/fcdn.serdarbudak.com.tr/wp-content/uploads/2021/09/bgremove-min.png) 3 | 4 | 5 | # Image Background Removal Tool with React 6 | 7 | With the this Background Removal Tool you can simply remove the image background and download the result. 8 | 9 | ## Features 10 | 11 | - Fast 12 | - Simple Usage 13 | - Max Performance 14 | 15 | ## Demo 16 | 17 | Live [here](https://removebg.serdarbudak.com.tr/). 18 | 19 | 20 | ## License 21 | 22 | [MIT](https://choosealicense.com/licenses/mit/) 23 | 24 | 25 | ## Installation 26 | 27 | In the project directory, you can run: 28 | 29 | ```bash 30 | npm install 31 | 32 | ``` 33 | 34 | ## Run it on your computer 35 | 36 | 37 | In the project directory, you can run: 38 | ```bash 39 | npm start 40 | ``` 41 | 42 | 43 | ## Used Technologies 44 | 45 | React, Redux 46 | 47 | 48 | ## FeedBack 49 | 50 | If you have any feedback, please contact us at mail@serdarbudak.com.tr 51 | 52 | 53 | -------------------------------------------------------------------------------- /changename/src/replaceredux/ComponentA.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useContext } from "react"; 3 | import { sizeContext } from "../AppRedux"; 4 | 5 | const ComponentA = () => { 6 | const contextSize = useContext(sizeContext); 7 | return ( 8 |
    9 | ComponentA 10 |
    11 | 17 | 23 | 29 |
    30 |
    31 | ); 32 | }; 33 | 34 | export default ComponentA; 35 | -------------------------------------------------------------------------------- /changename/src/replaceredux/ComponentC.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useContext } from "react"; 3 | import { sizeContext } from "../AppRedux"; 4 | 5 | const ComponentC = () => { 6 | const contextSize = useContext(sizeContext); 7 | return ( 8 |
    9 | ComponentC 10 |
    11 | 17 | 23 | 29 |
    30 |
    31 | ); 32 | }; 33 | 34 | export default ComponentC; 35 | -------------------------------------------------------------------------------- /changename/src/replaceredux/ComponentF.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useContext } from "react"; 3 | import { sizeContext } from "../AppRedux"; 4 | 5 | const ComponentF = () => { 6 | const contextSize = useContext(sizeContext); 7 | return ( 8 |
    9 | ComponentF 10 |
    11 | 17 | 23 | 29 |
    30 |
    31 | ); 32 | }; 33 | 34 | export default ComponentF; 35 | -------------------------------------------------------------------------------- /changename/src/AppRedux.js: -------------------------------------------------------------------------------- 1 | import React, { useReducer } from "react"; 2 | import "./App.css"; 3 | import ComponentA from "./replaceredux/ComponentA"; 4 | import ComponentB from "./replaceredux/ComponentB"; 5 | import ComponentD from "./replaceredux/ComponentD"; 6 | const initsize = "25px"; 7 | const reducer = (state, action) => { 8 | switch (action) { 9 | case "30px": 10 | return (state = "30px"); 11 | case "40px": 12 | return (state = "40px"); 13 | case "50px": 14 | return (state = "50px"); 15 | default: 16 | return state; 17 | } 18 | }; 19 | export const sizeContext = React.createContext(); 20 | function App() { 21 | const [size, dispatch] = useReducer(reducer, initsize); 22 | return ( 23 |
    24 | 25 | 26 | 27 | 28 | 29 |
    30 | ); 31 | } 32 | 33 | export default App; 34 | -------------------------------------------------------------------------------- /errorboundary/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "errorboundary", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.4", 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 | "react-toastify": "^9.0.5", 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 | -------------------------------------------------------------------------------- /firstapp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "firstapp", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.4", 7 | "@testing-library/react": "^13.2.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "autoprefixer": "10.4.5", 10 | "bootstrap": "^5.2.0-beta1", 11 | "react": "^18.1.0", 12 | "react-dom": "^18.1.0", 13 | "react-scripts": "5.0.1", 14 | "web-vitals": "^2.1.4" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts 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 | -------------------------------------------------------------------------------- /barcodegenerator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "barcodegenerator", 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 | "bootstrap": "^5.2.1", 10 | "react": "^18.2.0", 11 | "react-barcode": "^1.4.5", 12 | "react-dom": "^18.2.0", 13 | "react-scripts": "5.0.1", 14 | "web-vitals": "^2.1.4" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts 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 | -------------------------------------------------------------------------------- /qrgenerator/src/component/QRCodeWebcam.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import QrReader from "react-qr-reader"; 3 | const QRCodeWebcam = () => { 4 | const [webcamResult, setWebcamResult] = useState(); 5 | const webcamError = (error) => { 6 | if (error) { 7 | console.log(error); 8 | } 9 | }; 10 | const webcamScan = (result) => { 11 | if (result) { 12 | setWebcamResult(result); 13 | } 14 | }; 15 | return ( 16 |
    17 |
    18 |

    Webcam Image

    19 |
    20 |
    21 | 28 |
    29 |
    30 |
    WebCam Result: {webcamResult}
    31 |
    32 |
    33 | ); 34 | }; 35 | 36 | export default QRCodeWebcam; 37 | -------------------------------------------------------------------------------- /barcodegenerator/src/component/BarcodeGen.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useState } from "react"; 3 | import Barcode from "react-barcode"; 4 | const BarcodeGen = () => { 5 | const [text, setText] = useState(); 6 | const [barcode, setBarcode] = useState(); 7 | const generateBarcode = () => { 8 | setBarcode(text); 9 | }; 10 | return ( 11 |
    12 | 13 |

    Barcode Generator

    14 |     15 |
    16 | setText(e.target.value)} 21 | /> 22 | 28 |
    29 |
    30 | 31 |
    32 |
    33 | ); 34 | }; 35 | 36 | export default BarcodeGen; 37 | -------------------------------------------------------------------------------- /qrgenerator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "qrgenerator", 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 | "bootstrap": "^5.2.1", 10 | "qrcode": "^1.5.1", 11 | "react": "^18.2.0", 12 | "react-dom": "^18.2.0", 13 | "react-qr-reader": "^2.2.1", 14 | "react-scripts": "5.0.1", 15 | "web-vitals": "^2.1.4" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": [ 25 | "react-app", 26 | "react-app/jest" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /BGRemover/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "remove-image-background", 3 | "author": "Serdar Budak", 4 | "version": "1.0.0", 5 | "private": true, 6 | "dependencies": { 7 | "@reduxjs/toolkit": "^1.5.1", 8 | "@testing-library/jest-dom": "^4.2.4", 9 | "@testing-library/react": "^9.3.2", 10 | "@testing-library/user-event": "^7.1.2", 11 | "blueimp-load-image": "^5.14.0", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2", 14 | "react-redux": "^7.2.3", 15 | "react-scripts": "4.0.3", 16 | "request": "^2.88.2" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": "react-app" 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 | -------------------------------------------------------------------------------- /qrgenerator/src/component/QRCodeEx.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useState } from "react"; 3 | import qrcode from "qrcode"; 4 | 5 | import QRCodeGenerate from "./QRCodeGenerate"; 6 | import QRCodeDisplay from "./QRCodeDisplay"; 7 | import QRCodeFileScan from "./QRCodeFileScan"; 8 | import QRCodeWebcam from "./QRCodeWebcam"; 9 | const QRCodeEx = () => { 10 | const [text, setText] = useState(); 11 | const [imageQR, setImageQR] = useState(); 12 | const QRCodeGen = (value) => { 13 | setText(value); 14 | }; 15 | const generateQRCode = async () => { 16 | const image = await qrcode.toDataURL(text); 17 | setImageQR(image); 18 | }; 19 | 20 | return ( 21 |
    22 | 27 |
    28 | 29 | 30 | 31 |
    32 |
    33 | ); 34 | }; 35 | 36 | export default QRCodeEx; 37 | -------------------------------------------------------------------------------- /qrcodeapp/src/components/QRWebcamScan.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import QrReader from "react-qr-reader"; 3 | const QRWebcamScan = () => { 4 | const [webScan, setWebScan] = useState(); 5 | const camError = (error) => { 6 | if (error) { 7 | console.info(error); 8 | } 9 | }; 10 | const camScan = (result) => { 11 | if (result) { 12 | setWebScan(result); 13 | } 14 | }; 15 | return ( 16 |
    17 |
    18 |
    19 |

    20 | 21 | WebCam to Scan QR Code 22 | 23 |

    24 |
    25 |
    26 | 33 |
    Web Result:{webScan}
    34 |
    35 |
    36 |
    37 | ); 38 | }; 39 | 40 | export default QRWebcamScan; 41 | -------------------------------------------------------------------------------- /BGRemover/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 igserdar 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /qrcodeapp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "qrcodeapp", 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 | "bootstrap": "^5.2.1", 10 | "qr-scanner": "^1.4.1", 11 | "qrcode": "^1.5.1", 12 | "react": "^18.2.0", 13 | "react-barcode": "^1.4.5", 14 | "react-dom": "^18.2.0", 15 | "react-qr-reader": "^2.2.1", 16 | "react-scripts": "5.0.1", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /changename/src/hooks/UseCallback.jsx: -------------------------------------------------------------------------------- 1 | import React, { useCallback } from "react"; 2 | import { useState } from "react"; 3 | import CallbackDisplayTitle from "../hooks/CallbackDisplayTitle"; 4 | import CallbackButton from "./CallbackButton"; 5 | 6 | const UseCallback = () => { 7 | console.log("Rendering inside UseCallBack"); 8 | const [color, setColor] = useState("#000000"); 9 | const [size, setSize] = useState("30px"); 10 | const changeColor = useCallback(() => { 11 | const color = "#" + Math.floor(Math.random() * 6177722).toString(16); 12 | setColor(color); 13 | }, []); 14 | const changeSize = useCallback(() => { 15 | const size = Math.floor(Math.random() * 40) + 30 + "px"; 16 | setSize(size); 17 | }, []); 18 | 19 | return ( 20 |
    21 | 22 |

    Dr. Vipin Classes

    23 | Change Color 24 |

    Dr. Vipin Teotia

    25 | Change Size 26 |
    27 | ); 28 | }; 29 | 30 | export default UseCallback; 31 | -------------------------------------------------------------------------------- /changename/src/hooks/UseMemoHook.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useState, useMemo } from "react"; 3 | const UseMemoHook = () => { 4 | const [num, setNum] = useState(1); 5 | const [color, setColor] = useState("#000000"); 6 | const changeColor = () => { 7 | const color = "#" + Math.floor(Math.random() * 6177722).toString(16); 8 | setColor(color); 9 | }; 10 | const displayTable = useMemo(() => { 11 | let table = []; 12 | let j = 0; 13 | while (j < 2000000000) j++; 14 | for (let i = 0; i <= 10; i++) { 15 | table.push(`${num} X ${i}=${num * i}`); 16 | } 17 | return table; 18 | }, [num]); 19 | return ( 20 |
    21 | 22 |
    23 | setNum(e.target.value)} 27 | > 28 | 29 |
    30 | {displayTable.map((value) => ( 31 |

    {value}

    32 | ))} 33 |
    34 |
    35 | ); 36 | }; 37 | 38 | export default UseMemoHook; 39 | -------------------------------------------------------------------------------- /reactwithspring/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reactwithspring", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.4", 7 | "@testing-library/react": "^13.3.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "axios": "^0.27.2", 10 | "bootstrap": "^5.2.0-beta1", 11 | "react": "^18.2.0", 12 | "react-bootstrap": "^2.4.0", 13 | "react-dom": "^18.2.0", 14 | "react-router-dom": "^6.3.0", 15 | "react-scripts": "5.0.1", 16 | "react-toastify": "^9.0.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /firstapp/src/OllApp.js: -------------------------------------------------------------------------------- 1 | import logo from './logo.svg'; 2 | import './App.css'; 3 | import React from "react"; 4 | 5 | function App() { 6 | const name = "Dr Vipin Classes"; 7 | const lang = [ 8 | { id: "1", info: "Go Lang" }, 9 | { id: "2", info: "Java" }, 10 | { id: "3", info: "Kotlin" }, 11 | { id: "4", info: "React" }, 12 | { id: "5", info: "JavaScript" }, 13 | { id: "6", info: "Android with Java" }, 14 | { id: "7", info: "Android with Kotlin" }, 15 | { id: "8", info: "Android with Jetpack Compose" }, 16 | ]; 17 | function conditionalRendering() { 18 | const lists = 19 | lang.length === 0 ? ( 20 |

    List is Empty

    21 | ) : ( 22 | lang.map((lang) =>
  • {lang.info}
    • ) 23 | ); 24 | return lists; 25 | } 26 | return ( 27 | //JSX is JavaScript XML 28 |
    29 |

    Welcome at {name}

    30 |

    31 | Watch videos of following playlist on my YouTube Channel 32 |

    33 |
      {conditionalRendering()}
    34 |
    35 | ); 36 | } 37 | 38 | export default App; 39 | -------------------------------------------------------------------------------- /changename/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "changename", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.4", 7 | "@testing-library/react": "^13.3.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "axios": "^0.27.2", 10 | "bootstrap": "^5.2.0-beta1", 11 | "react": "^18.2.0", 12 | "react-app-rewired": "^2.2.1", 13 | "react-dom": "^18.2.0", 14 | "react-scripts": "^5.0.1", 15 | "react-toastify": "^7.0.4", 16 | "web-vitals": "^2.1.4" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | }, 42 | "devDependencies": { 43 | "webpack-dev-middleware": "^5.3.3" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /qrgenerator/src/component/QRCodeFileScan.jsx: -------------------------------------------------------------------------------- 1 | import { useRef, useState } from "react"; 2 | import QrReader from "react-qr-reader"; 3 | const QRCodeFileScan = () => { 4 | const qrRef = useRef(null); 5 | const [fileResult, setFileResult] = useState(); 6 | const openDialog = () => { 7 | qrRef.current.openImageDialog(); 8 | }; 9 | const fileError = (error) => { 10 | if (error) { 11 | console.log(error); 12 | } 13 | }; 14 | const fileScan = (result) => { 15 | if (result) { 16 | setFileResult(result); 17 | } 18 | }; 19 | return ( 20 |
    21 |
    22 | 25 |
    26 |
    27 | 34 |
    35 |
    36 |
    Image Result: {fileResult}
    37 |
    38 |
    39 | ); 40 | }; 41 | 42 | export default QRCodeFileScan; 43 | -------------------------------------------------------------------------------- /qrcodeapp/src/components/BarcodeEx.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useState } from "react"; 3 | import Barcode from "react-barcode"; 4 | const BarcodeEx = () => { 5 | const [value, setValue] = useState(); 6 | const [barValue, setBarValue] = useState(); 7 | return ( 8 |
    9 |
    10 | 11 |

    Barcode Generator

    12 |     13 |
    14 |
    15 |
    16 | { 21 | setValue(e.target.value); 22 | }} 23 | /> 24 | 32 |
    33 |
    34 | 35 |
    36 |
    37 |
    38 | ); 39 | }; 40 | 41 | export default BarcodeEx; 42 | -------------------------------------------------------------------------------- /qrcodeapp/src/components/QRFileScan.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useRef } from "react"; 2 | import QrReader from "react-qr-reader"; 3 | const QRFileScan = () => { 4 | const qrRef = useRef(); 5 | const [fileScan, setFileScan] = useState(); 6 | const fileError = (error) => { 7 | if (error) { 8 | console.info(error); 9 | } 10 | }; 11 | const scanFile = (result) => { 12 | setFileScan(result); 13 | if (result) { 14 | setFileScan(result); 15 | } 16 | }; 17 | const handleClick = () => { 18 | qrRef.current.openImageDialog(); 19 | }; 20 | return ( 21 |
    22 |
    23 |
    24 | 27 |
    28 |
    29 | 37 |
    Scan Result:{fileScan}
    38 |
    39 |
    40 |
    41 | ); 42 | }; 43 | 44 | export default QRFileScan; 45 | -------------------------------------------------------------------------------- /changename/src/hooks/UseRefHook.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useEffect } from "react"; 2 | import { useState } from "react"; 3 | const UseRefHook = () => { 4 | const stopCounter = useRef(); 5 | const [count, setCount] = useState(0); 6 | const dataRef = useRef(); 7 | const [data, setData] = useState(); 8 | const resetValue = () => { 9 | dataRef.current.value = ""; 10 | dataRef.current.focus(); 11 | }; 12 | useEffect(() => { 13 | dataRef.current.focus(); 14 | stopCounter.current = setInterval(() => { 15 | setCount((prevCount) => prevCount + 1); 16 | }, 1000); 17 | }, []); 18 | return ( 19 |
    20 |

    Use of UseRef Hook in React

    21 | setData(e.target.value)} 26 | > 27 | 28 | 35 |
    36 | Counter: {count} 37 | 44 |
    45 | ); 46 | }; 47 | 48 | export default UseRefHook; 49 | -------------------------------------------------------------------------------- /changename/src/component/UpdateName.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | class UpdateName extends Component { 3 | state = { 4 | name: "Dr. Vipin Teotia", 5 | }; 6 | constructor() { 7 | super(); 8 | console.log("Inside Constructor"); 9 | } 10 | static getDerivedStateFromProps(props, state) { 11 | console.log("Inside getDerivedStateFromProps"); 12 | return null; 13 | } 14 | componentDidMount() { 15 | console.log("Inside componentDidMount"); 16 | } 17 | updateName = () => { 18 | this.setState({ 19 | name: "Dr. Vipin Classes", 20 | }); 21 | }; 22 | shouldComponentUpdate() { 23 | console.log("Inside shouldComponentUpdate"); 24 | return true; 25 | } 26 | getSnapshotBeforeUpdate(prevProps, prevState) { 27 | console.log("Inside getSnapshotBeforeUpdate"); 28 | return null; 29 | } 30 | componentDidUpdate(prevProps, prevState, snapshots) { 31 | console.log("Inside componentDidUpdate"); 32 | } 33 | componentWillUnmount() { 34 | console.log("Inside componentWillUnmount"); 35 | } 36 | render() { 37 | console.log("Inside Render"); 38 | return ( 39 |
    40 |

    Updating State of Class Component

    41 |

    {this.state.name}

    42 | 43 |
    44 | ); 45 | } 46 | } 47 | 48 | export default UpdateName; 49 | -------------------------------------------------------------------------------- /reactwithspring/src/springapi/GetStudent.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import axios from "axios"; 3 | class GetStudents extends Component { 4 | state = { 5 | students: [], 6 | }; 7 | componentDidMount() { 8 | axios 9 | .get("http://localhost:8080/students") 10 | .then((response) => { 11 | this.setState({ 12 | students: response.data, 13 | }); 14 | }) 15 | .catch((error) => { 16 | console.log(error); 17 | }); 18 | } 19 | render() { 20 | console.log(this.state.students); 21 | return ( 22 |
    23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | {this.state.students.map((student) => { 33 | return ( 34 | 35 | 36 | 37 | 38 | 39 | ); 40 | })} 41 | 42 |
    Student IDStudent NameStudent Course
    {student.sid}{student.name}{student.course}
    43 |
    44 | ); 45 | } 46 | } 47 | 48 | export default GetStudents; 49 | -------------------------------------------------------------------------------- /changename/src/hooks/UseReducerEx.jsx: -------------------------------------------------------------------------------- 1 | import React, { useReducer } from "react"; 2 | const initcolor = { color: "#000000", size: "30px" }; 3 | const reducer = (state, action) => { 4 | switch (action.type) { 5 | case "red": 6 | return { ...state, color: (state.color = "#ff0000") }; 7 | case "green": 8 | return { ...state, color: (state.color = "#00ff00") }; 9 | case "blue": 10 | return { ...state, color: (state.color = "#0000ff") }; 11 | } 12 | switch (action.size) { 13 | case "40px": 14 | return { ...state, size: (state.size = "40px") }; 15 | case "50px": 16 | return { ...state, size: (state.size = "50px") }; 17 | default: 18 | return state; 19 | } 20 | }; 21 | const UseReducerEx = () => { 22 | const [state, dispatch] = useReducer(reducer, initcolor); 23 | return ( 24 |
    25 |

    26 | Dr. Vipin Classes 27 |

    28 | 31 | 34 | 37 | 38 | 39 |
    40 | ); 41 | }; 42 | 43 | export default UseReducerEx; 44 | -------------------------------------------------------------------------------- /qrcodeapp/src/components/QRCodeEx.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useState } from "react"; 3 | import qrcode from "qrcode"; 4 | import QRWebcamScan from "./QRWebcamScan"; 5 | import QRFileScan from "./QRFileScan"; 6 | import QRGenerate from "./QRGenerate"; 7 | const QRCodeEx = () => { 8 | const [text, setText] = useState(""); 9 | const [imageQR, setImageQR] = useState(); 10 | 11 | const generateQRCode = async () => { 12 | const response = await qrcode.toDataURL(text); 13 | setImageQR(response); 14 | }; 15 | 16 | return ( 17 |
    18 |

    QR Code Generator

    19 |
    20 |
    21 |
    22 |
    Write URL to Generate QR Code
    23 | setText(e.target.value)} 28 | /> 29 | 37 |
    38 |
    39 |
    40 |
    41 | 42 | 43 | 44 |
    45 |
    46 | ); 47 | }; 48 | 49 | export default QRCodeEx; 50 | -------------------------------------------------------------------------------- /changename/src/httpdata/axiosget.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import axios from "axios"; 3 | class GetAxios extends Component { 4 | state = { 5 | users: [], 6 | }; 7 | componentDidMount() { 8 | axios 9 | .get("https://api.github.com/users") 10 | .then((response) => { 11 | this.setState({ 12 | users: response.data, 13 | }); 14 | }) 15 | .catch((error) => { 16 | console.log(error); 17 | }); 18 | } 19 | render() { 20 | console.log(this.state.users); 21 | return ( 22 |
    23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | {this.state.users.map((user) => { 33 | return ( 34 | 35 | 36 | 37 | 45 | 46 | ); 47 | })} 48 | 49 |
    User IDUser NameUser Photo
    {user.id}{user.login} 38 | Pic not found 44 |
    50 |
    51 | ); 52 | } 53 | } 54 | 55 | export default GetAxios; 56 | -------------------------------------------------------------------------------- /reactwithspring/src/springapi/DeleteStudent.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import axios from "axios"; 3 | class DeleteStudents extends Component { 4 | state = { 5 | sid: "", 6 | }; 7 | changeSID = (event) => { 8 | this.setState({ 9 | sid: event.target.value, 10 | }); 11 | }; 12 | 13 | submitValue = (event) => { 14 | const sid = this.state.sid; 15 | event.preventDefault(); 16 | axios 17 | .delete(`http://localhost:8080/students/${sid}`) 18 | .then((response) => { 19 | alert("Record Deleted"); 20 | }) 21 | .catch((error) => { 22 | alert(error); 23 | }); 24 | }; 25 | render() { 26 | const { sid } = this.state; 27 | return ( 28 |
    29 |

    Enter Student Information

    30 |
    31 |
    32 | 33 |
    34 | 42 |
    43 |
    44 |
    45 | 51 |
    52 |
    53 |
    54 | ); 55 | } 56 | } 57 | 58 | export default DeleteStudents; 59 | -------------------------------------------------------------------------------- /reactwithspring/src/reactspring/GetStudentInfo.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import axios from "axios"; 3 | class GetStudentInfo extends Component { 4 | state = { 5 | students: [], 6 | }; 7 | componentDidMount() { 8 | axios 9 | .get("http://localhost:8080/students") 10 | .then((response) => { 11 | this.setState({ 12 | students: response.data, 13 | }); 14 | }) 15 | .catch((error) => { 16 | alert(error); 17 | }); 18 | } 19 | render() { 20 | return ( 21 |
    22 |
    23 | 29 |
    30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | {this.state.students.map((student) => { 40 | return ( 41 | 42 | 43 | 44 | 45 | 46 | ); 47 | })} 48 | 49 |
    Student IDStudent NameStudent Course
    {student.sid}{student.name}{student.course}
    50 |
    51 | ); 52 | } 53 | } 54 | 55 | export default GetStudentInfo; 56 | -------------------------------------------------------------------------------- /changename/src/httpdata/FetchData.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | class FetchData extends Component { 3 | state = { 4 | users: [], 5 | }; 6 | componentDidMount() { 7 | fetch("https://api.github.com/users") 8 | .then((response) => { 9 | response.json().then((data) => { 10 | this.setState({ 11 | users: data, 12 | }); 13 | }); 14 | }) 15 | .catch((error) => { 16 | console.log(error); 17 | }); 18 | } 19 | render() { 20 | console.log(this.state.users); 21 | return ( 22 |
    23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | {this.state.users.map((user) => { 33 | return ( 34 | 35 | 36 | 37 | 45 | 46 | ); 47 | })} 48 | 49 |
    User IDUser NameUser Photo
    {user.id}{user.login} 38 | Pic not found 44 |
    50 |
    51 | ); 52 | } 53 | } 54 | 55 | export default FetchData; 56 | -------------------------------------------------------------------------------- /firstapp/src/component/CounterNoDelete.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | class Counter extends Component { 4 | // state = this.props; 5 | state = { 6 | count: this.props.count, 7 | }; 8 | //constructor() { 9 | // super(); 10 | 11 | // this.handleIncrement=this.handleIncrement.bind(this) 12 | // this.handleDecrement=this.handleDecrement.bind(this) 13 | // } 14 | checkCount() { 15 | const { count } = this.state; 16 | const checkCounter = 17 | count === 0 ? "btn btn-danger m-2" : "btn btn-warning m-2"; 18 | return checkCounter; 19 | } 20 | checkCountValue() { 21 | const { count } = this.state; 22 | const checkValue = count === 0 ? "Zero" : count; 23 | return checkValue; 24 | } 25 | handleIncrement = () => { 26 | //Arrow Functions 27 | let { count } = this.state; 28 | this.setState({ count: count + 1 }); 29 | 30 | // this.setState( 31 | // (preCount)=>({ 32 | // count:preCount.count+1 33 | // }),()=>{ 34 | // console.log("Count:",this.state.count) 35 | // } 36 | // ) 37 | }; 38 | handleDecrement = () => { 39 | let { count } = this.state; 40 | this.setState({ count: count - 1 }); 41 | }; 42 | 43 | render() { 44 | return ( 45 |
    46 | 49 | {this.checkCountValue()} 50 | 53 |
    54 | ); 55 | } 56 | } 57 | 58 | export default Counter; 59 | -------------------------------------------------------------------------------- /changename/src/component/GetData.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import axios from "axios"; 3 | class GetData extends Component { 4 | state = { users: [] }; 5 | componentDidMount() { 6 | axios 7 | .get("https://api.github.com/users") 8 | .then((response) => { 9 | this.setState({ 10 | users: response.data, 11 | }); 12 | }) 13 | .catch((error) => { 14 | console.log(error); 15 | }); 16 | } 17 | render() { 18 | return ( 19 |
    20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | {this.state.users.map((user) => { 30 | return ( 31 | 32 | 35 | 38 | 46 | 47 | ); 48 | })} 49 | 50 |
    User IDUser NameUser Photo
    33 | {user.id} 34 | 36 | {user.login} 37 | 39 | Pic is not found 45 |
    51 |
    52 | ); 53 | } 54 | } 55 | 56 | export default GetData; 57 | -------------------------------------------------------------------------------- /firstapp/src/component/Counter.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | class Counter extends Component { 4 | // state = this.props; 5 | // state = { 6 | // count: this.props.counter.count, 7 | // }; 8 | //constructor() { 9 | // super(); 10 | 11 | // this.handleIncrement=this.handleIncrement.bind(this) 12 | // this.handleDecrement=this.handleDecrement.bind(this) 13 | // } 14 | checkCount() { 15 | const { count } = this.props.counter; 16 | const checkCounter = 17 | count === 0 ? "col-1 btn btn-danger m-2" : "col-1 btn btn-warning m-2"; 18 | return checkCounter; 19 | } 20 | checkCountValue() { 21 | const { count } = this.props.counter; 22 | const checkValue = count === 0 ? "Zero" : count; 23 | return checkValue; 24 | } 25 | 26 | render() { 27 | return ( 28 |
    29 | 36 | {this.checkCountValue()} 37 | 43 | 49 |
    50 | ); 51 | } 52 | } 53 | 54 | export default Counter; 55 | -------------------------------------------------------------------------------- /reactwithspring/src/reactrouter/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { NavLink } from "react-router-dom"; 3 | const Header = () => { 4 | const activeLink = ({ isActive }) => { 5 | return { 6 | color: isActive ? "#000000" : "#ffffff", 7 | fontWeight: isActive ? "bold" : "", 8 | }; 9 | }; 10 | return ( 11 | 50 | ); 51 | }; 52 | 53 | export default Header; 54 | -------------------------------------------------------------------------------- /reactwithspring/src/reactspring/DeleteStudent.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import axios from "axios"; 3 | class DeleteStudent extends Component { 4 | state = { 5 | sid: "", 6 | }; 7 | changeSid = (event) => { 8 | this.setState({ 9 | sid: event.target.value, 10 | }); 11 | }; 12 | 13 | submitValue = (event) => { 14 | const sid = this.state.sid; 15 | event.preventDefault(); 16 | axios 17 | .delete(`http://localhost:8080/students/${sid}`) 18 | .then((response) => { 19 | alert("Record Deleted"); 20 | }) 21 | .catch((error) => { 22 | alert(error); 23 | }); 24 | }; 25 | render() { 26 | const { sid } = this.state; 27 | return ( 28 |
    29 |

    Delete Student Information

    30 |
    31 | 32 |
    33 | 40 |
    41 |
    42 | 48 | 54 |
    55 |
    56 |
    57 | ); 58 | } 59 | } 60 | 61 | export default DeleteStudent; 62 | -------------------------------------------------------------------------------- /changename/src/component/FetchData.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | class FetchData extends Component { 3 | state = { 4 | users: [], 5 | }; 6 | componentDidMount() { 7 | fetch("https://api.github.com/users") 8 | .then((response) => { 9 | response.json().then((data) => { 10 | this.setState({ 11 | users: data, 12 | }); 13 | }); 14 | }) 15 | .catch((error) => { 16 | console.log(error); 17 | }); 18 | } 19 | render() { 20 | console.log(this.state.users); 21 | return ( 22 |
    23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | {this.state.users.map((user) => { 33 | return ( 34 | 35 | 38 | 41 | 49 | 50 | ); 51 | })} 52 | 53 |
    User IDUser NameUser Photo
    36 | {user.id} 37 | 39 | {user.login} 40 | 42 | Pic is not found 48 |
    54 |
    55 | ); 56 | } 57 | } 58 | 59 | export default FetchData; 60 | -------------------------------------------------------------------------------- /reactwithspring/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import React from "react"; 3 | import { Routes, Route } from "react-router-dom"; 4 | import Home from "./reactrouter/Home"; 5 | import Service from "./reactrouter/Service"; 6 | //import ContactUs from "./reactrouter/ContactUs"; 7 | import AboutUs from "./reactrouter/AboutUs"; 8 | import Header from "./reactrouter/Header"; 9 | import Footer from "./reactrouter/Footer"; 10 | import ErrorPage from "./reactrouter/ErrorPage"; 11 | import OnlineVideos from "./reactrouter/OnlineVideos"; 12 | import YoutubeVideos from "./reactrouter/YoutubeVideos"; 13 | import Language from "./reactrouter/Language"; 14 | import LangInfo from "./reactrouter/LangInfo"; 15 | const LazyContactUs = React.lazy(() => import("./reactrouter/ContactUs")); 16 | function App() { 17 | return ( 18 |
    19 |
    20 | 21 | } /> 22 | }> 23 | }> 24 | 25 | }> 26 | } /> 27 | } /> 28 | } /> 29 | 30 | 34 | 35 | 36 | } 37 | /> 38 | } /> 39 | } /> 40 | 41 |
    42 |
    43 | ); 44 | } 45 | 46 | export default App; 47 | -------------------------------------------------------------------------------- /firstapp/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /changename/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /qrcodeapp/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /qrgenerator/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /barcodegenerator/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /reactwithspring/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /errorboundary/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 33 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /firstapp/src/component/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import HomeCounter from "./HomeCounter"; 3 | import Navbar from "./Navbar"; 4 | class App extends Component { 5 | state = { 6 | counters: [ 7 | { id: 1, count: 0 }, 8 | { id: 2, count: 11 }, 9 | { id: 3, count: 0 }, 10 | { id: 4, count: 0 }, 11 | ], 12 | }; 13 | handleIncrement = (counter) => { 14 | const counters = [...this.state.counters]; 15 | let index = counters.indexOf(counter); 16 | counters[index] = { ...counter }; 17 | counters[index].count++; 18 | this.setState({ counters }); 19 | }; 20 | handleDecrement = (counter) => { 21 | const counters = [...this.state.counters]; 22 | let index = counters.indexOf(counter); 23 | counters[index] = { ...counter }; 24 | counters[index].count--; 25 | this.setState({ counters }); 26 | }; 27 | 28 | handleReset = () => { 29 | const counters = this.state.counters.map((c) => { 30 | c.count = 0; 31 | return c; 32 | }); 33 | this.setState({ counters }); 34 | }; 35 | deleteCounter = (counterId) => { 36 | const counters = this.state.counters.filter((c) => c.id !== counterId); 37 | this.setState({ counters }); 38 | }; 39 | getCounter = () => { 40 | const totalCounter = this.state.counters.filter((c) => c.count > 0).length; 41 | return totalCounter; 42 | }; 43 | render() { 44 | return ( 45 | 46 | 47 |
    48 | 55 |
    56 |     57 | ); 58 | } 59 | } 60 | 61 | export default App; 62 | -------------------------------------------------------------------------------- /reactwithspring/src/springapi/Navigation.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { NavLink } from "react-router-dom"; 3 | const Navigation = () => { 4 | return ( 5 | 58 | ); 59 | }; 60 | 61 | export default Navigation; 62 | -------------------------------------------------------------------------------- /reactwithspring/public/MiddlewareDeprecationSolution.txt: -------------------------------------------------------------------------------- 1 | DeprecationWarning Solution: 2 | 3 | DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] 4 | DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. 5 | In file: node_modules/react-scripts/config/webpackDevServer.config.js 6 | 7 | like this 8 | 9 | onBeforeSetupMiddleware(devServer) { 10 | // Keep `evalSourceMapMiddleware` 11 | // middlewares before `redirectServedPath` otherwise will not have any effect 12 | // This lets us fetch source contents from webpack for the error overlay 13 | devServer.app.use(evalSourceMapMiddleware(devServer)); 14 | 15 | if (fs.existsSync(paths.proxySetup)) { 16 | // This registers user provided middleware for proxy reasons 17 | require(paths.proxySetup)(devServer.app); 18 | } 19 | }, 20 | onAfterSetupMiddleware(devServer) { 21 | // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match 22 | devServer.app.use(redirectServedPath(paths.publicUrlOrPath)); 23 | 24 | // This service worker file is effectively a 'no-op' that will reset any 25 | // previous service worker registered for the same host:port combination. 26 | // We do this in development to avoid hitting the production cache if 27 | // it used the same host and port. 28 | // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432 29 | devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath)); 30 | }, 31 | 32 | Change to this: 33 | 34 | setupMiddlewares: (middlewares, devServer) => { 35 | if (!devServer) { 36 | throw new Error('webpack-dev-server is not defined') 37 | } 38 | 39 | if (fs.existsSync(paths.proxySetup)) { 40 | require(paths.proxySetup)(devServer.app) 41 | } 42 | 43 | middlewares.push( 44 | evalSourceMapMiddleware(devServer), 45 | redirectServedPath(paths.publicUrlOrPath), 46 | noopServiceWorkerMiddleware(paths.publicUrlOrPath) 47 | ) 48 | 49 | return middlewares; 50 | }, -------------------------------------------------------------------------------- /reactwithspring/src/reactrouter/Home.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { useSearchParams } from "react-router-dom"; 3 | 4 | const Home = (probs) => { 5 | const [course, setCourse] = useState(); 6 | const [filterCourse, setFilterCourse] = useSearchParams(); 7 | const searchCourse = () => { 8 | setFilterCourse({ filter: course }); 9 | }; 10 | const showCourse = () => { 11 | switch (filterCourse.get("filter")) { 12 | case "java": 13 | return ( 14 |
    15 |

    Java Playlist on Dr. Vipin Classes Youtube Channel

    16 |
      17 |
    1. Core Java
      2. 18 |
    2. Java File Handling
      3. 19 |
    3. Java Socket Programming
      4. 20 |
    4. Android with Java
      5. 21 |
    22 |
    23 | ); 24 | case "kotlin": 25 | return ( 26 |
    27 |

    Koltin Playlist on Dr. Vipin Classes Youtube Channel

    28 |
      29 |
    1. Kotlin Fundmental
      2. 30 |
    2. Android with Kotlin
      3. 31 |
    3. Jetpack Compose
      4. 32 |
    33 |
    34 | ); 35 | case "react": 36 | return ( 37 |
    38 |

    React Playlist on Dr. Vipin Classes Youtube Channel

    39 |
      40 |
    1. React Tutorial for Biginners
      2. 41 |
    2. React Hooks
      3. 42 |
    3. React Routers
      4. 43 |
    4. React Projects
      5. 44 |
    45 |
    46 | ); 47 | default: 48 | return ( 49 |

    Welcome to Dr. Vipin Classes for {filterCourse.get("filter")}

    50 | ); 51 | } 52 | }; 53 | return ( 54 |
    55 |

    {probs.title}

    56 | setCourse(event.target.value)} 60 | /> 61 | 62 | {filterCourse.get("filter") ? showCourse() : ""} 63 |
    64 | ); 65 | }; 66 | 67 | export default Home; 68 | -------------------------------------------------------------------------------- /changename/src/hooks/FetchGetRequest.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import axios from "axios"; 3 | const FetchGetRequest = (props) => { 4 | const [users, setUsers] = useState([]); 5 | useEffect(() => { 6 | axios 7 | .get("https://api.github.com/users") 8 | .then((response) => { 9 | setUsers(response.data); 10 | }) 11 | .catch((error) => { 12 | console.log(error); 13 | }); 14 | }, []); 15 | useEffect(() => { 16 | axios 17 | .get(`https://api.github.com/users/${props.userName}`) 18 | .then((response) => { 19 | setUsers(response.data); 20 | }) 21 | .catch((error) => { 22 | console.log(error); 23 | }); 24 | }, [props.userName]); 25 | 26 | return ( 27 |
    28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | {!Array.isArray(users) && ( 38 | 39 | 40 | 41 | 49 | 50 | )} 51 | {Array.isArray(users) && 52 | users.map((user) => { 53 | return ( 54 | 55 | 56 | 57 | 65 | 66 | ); 67 | })} 68 | 69 |
    User IDUser NameUser Photo
    {users.id}{users.login} 42 | Pic not found 48 |
    {user.id}{user.login} 58 | Pic not found 64 |
    70 |
    71 | ); 72 | }; 73 | 74 | export default FetchGetRequest; 75 | -------------------------------------------------------------------------------- /reactwithspring/src/springapi/PutStudent.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import axios from "axios"; 3 | class PutStudents extends Component { 4 | state = { 5 | sid: "", 6 | name: "", 7 | course: "", 8 | }; 9 | changeSID = (event) => { 10 | this.setState({ 11 | sid: event.target.value, 12 | }); 13 | }; 14 | changeName = (event) => { 15 | this.setState({ 16 | name: event.target.value, 17 | }); 18 | }; 19 | changeCourse = (event) => { 20 | this.setState({ 21 | course: event.target.value, 22 | }); 23 | }; 24 | submitValue = (event) => { 25 | const data = this.state; 26 | event.preventDefault(); 27 | axios 28 | .put("http://localhost:8080/students", data) 29 | .then((response) => { 30 | alert("Record Updated"); 31 | }) 32 | .catch((error) => { 33 | alert(error); 34 | }); 35 | }; 36 | render() { 37 | const { sid, name, course } = this.state; 38 | return ( 39 |
    40 |

    Enter Student Information

    41 |
    42 |
    43 | 44 |
    45 | 53 |
    54 |
    55 | 56 |
    57 | 64 |
    65 |
    66 | 67 |
    68 | 75 |
    76 |
    77 |
    78 | 84 |
    85 |
    86 |
    87 | ); 88 | } 89 | } 90 | 91 | export default PutStudents; 92 | -------------------------------------------------------------------------------- /firstapp/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /changename/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /errorboundary/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /qrcodeapp/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /qrgenerator/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /barcodegenerator/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /reactwithspring/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /reactwithspring/src/springapi/PostStudent.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import axios from "axios"; 3 | import { Alert } from "react-bootstrap"; 4 | 5 | class PostStudents extends Component { 6 | state = { 7 | sid: "", 8 | name: "", 9 | course: "", 10 | }; 11 | changeSID = (event) => { 12 | this.setState({ 13 | sid: event.target.value, 14 | }); 15 | }; 16 | changeName = (event) => { 17 | this.setState({ 18 | name: event.target.value, 19 | }); 20 | }; 21 | changeCourse = (event) => { 22 | this.setState({ 23 | course: event.target.value, 24 | }); 25 | }; 26 | submitValue = (event) => { 27 | const data = this.state; 28 | event.preventDefault(); 29 | axios 30 | .post("http://localhost:8080/students", data) 31 | .then((response) => { 32 | alert("Student Inserted"); 33 | }) 34 | .catch((error) => { 35 | 36 | Student not Inserted 37 | ; 38 | }); 39 | }; 40 | render() { 41 | const { sid, name, course } = this.state; 42 | return ( 43 |
    44 |

    Enter Student Information

    45 |
    46 |
    47 | 48 |
    49 | 57 |
    58 |
    59 | 60 |
    61 | 68 |
    69 |
    70 | 71 |
    72 | 79 |
    80 |
    81 |
    82 | 88 |
    89 |
    90 |
    91 | ); 92 | } 93 | } 94 | 95 | export default PostStudents; 96 | -------------------------------------------------------------------------------- /reactwithspring/src/reactspring/UpdateStudent.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import axios from "axios"; 3 | class UpdateStudent extends Component { 4 | state = { 5 | sid: "", 6 | name: "", 7 | course: "", 8 | }; 9 | changeSid = (event) => { 10 | this.setState({ 11 | sid: event.target.value, 12 | }); 13 | }; 14 | changeName = (event) => { 15 | this.setState({ 16 | name: event.target.value, 17 | }); 18 | }; 19 | changeCourse = (event) => { 20 | this.setState({ 21 | course: event.target.value, 22 | }); 23 | }; 24 | submitValue = (event) => { 25 | const data = this.state; 26 | event.preventDefault(); 27 | axios 28 | .put("http://localhost:8080/students", data) 29 | .then((response) => { 30 | alert("Record Updated"); 31 | }) 32 | .catch((error) => { 33 | alert(error); 34 | }); 35 | }; 36 | render() { 37 | const { sid, name, course } = this.state; 38 | return ( 39 |
    40 |

    Update Student Information

    41 |
    42 | 43 |
    44 | 51 |
    52 | 53 |
    54 | 61 |
    62 | 63 |
    64 | 71 |
    72 |
    73 | 79 | 85 |
    86 |
    87 |
    88 | ); 89 | } 90 | } 91 | 92 | export default UpdateStudent; 93 | -------------------------------------------------------------------------------- /changename/src/httpdata/PostAxios.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import axios from "axios"; 3 | import { ToastContainer, toast } from "react-toastify"; 4 | import "react-toastify/dist/ReactToastify.css"; 5 | class PostAxios extends Component { 6 | state = { 7 | sid: "", 8 | name: "", 9 | course: "", 10 | }; 11 | setSID = (event) => { 12 | this.setState({ 13 | sid: event.target.value, 14 | }); 15 | }; 16 | setName = (event) => { 17 | this.setState({ 18 | name: event.target.value, 19 | }); 20 | }; 21 | setCourse = (event) => { 22 | this.setState({ 23 | course: event.target.value, 24 | }); 25 | }; 26 | submitStudnetInfo = (event) => { 27 | event.preventDefault(); 28 | const data = this.state; 29 | axios 30 | .post("http://localhost:8080/students", data) 31 | .then((response) => { 32 | toast.success("Record Inserted", { 33 | position: "top-center", 34 | }); 35 | }) 36 | .catch((error) => { 37 | toast.error("Record not Inserted", { 38 | position: "top-center", 39 | }); 40 | }); 41 | }; 42 | render() { 43 | const { sid, name, course } = this.state; 44 | return ( 45 |
    46 |

    Insert Student Information

    47 |
    48 |
    49 |
    50 | 51 |
    52 | 59 |
    60 |
    61 |
    62 | 63 |
    64 | 65 | 72 |
    73 |
    74 |
    75 | 76 |
    77 | 84 |
    85 |
    86 | 89 |
    90 | 91 |
    92 | ); 93 | } 94 | } 95 | 96 | export default PostAxios; 97 | -------------------------------------------------------------------------------- /BGRemover/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 18 | 19 | 23 | 24 | 33 | BG Removal Tool by Serdar Budak 34 | 35 | 36 | 37 | 38 |
    39 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /reactwithspring/src/reactspring/InsertStudent.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import axios from "axios"; 3 | import { ToastContainer, toast } from "react-toastify"; 4 | import "react-toastify/dist/ReactToastify.css"; 5 | class InsertStudent extends Component { 6 | state = { 7 | sid: "", 8 | name: "", 9 | course: "", 10 | }; 11 | 12 | changeSid = (event) => { 13 | this.setState({ 14 | sid: event.target.value, 15 | }); 16 | }; 17 | changeName = (event) => { 18 | this.setState({ 19 | name: event.target.value, 20 | }); 21 | }; 22 | changeCourse = (event) => { 23 | this.setState({ 24 | course: event.target.value, 25 | }); 26 | }; 27 | submitValue = (event) => { 28 | const data = this.state; 29 | event.preventDefault(); 30 | axios 31 | .post("http://localhost:8080/students", data) 32 | .then((response) => { 33 | toast.success("Record Inserted", { 34 | position: "top-center", 35 | }); 36 | }) 37 | .catch((error) => { 38 | toast.error("Record not Inserted", { 39 | position: "bottom-center", 40 | }); 41 | }); 42 | }; 43 | render() { 44 | const { sid, name, course } = this.state; 45 | return ( 46 |
    47 |

    Insert Student Information

    48 |
    49 | 50 |
    51 | 58 |
    59 | 60 |
    61 | 68 |
    69 | 70 |
    71 | 78 |
    79 |
    80 | 86 | 92 | 93 |
    94 |
    95 |
    96 | ); 97 | } 98 | } 99 | 100 | export default InsertStudent; 101 | -------------------------------------------------------------------------------- /reactwithspring/src/springapi/RestHome.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import GetStudents from "./GetStudent"; 3 | import PostStudents from "./PostStudent"; 4 | import PutStudents from "./PutStudent"; 5 | import DeleteStudents from "./DeleteStudent"; 6 | import { Button, Modal } from "react-bootstrap"; 7 | class RestHome extends Component { 8 | state = { 9 | get: false, 10 | post: false, 11 | put: false, 12 | del: false, 13 | }; 14 | openGet = () => { 15 | this.setState({ 16 | get: true, 17 | }); 18 | }; 19 | closeGet = () => { 20 | this.setState({ 21 | get: false, 22 | }); 23 | }; 24 | openPost = () => { 25 | this.setState({ 26 | post: true, 27 | }); 28 | }; 29 | closePost = () => { 30 | this.setState({ 31 | post: false, 32 | }); 33 | }; 34 | openPut = () => { 35 | this.setState({ 36 | put: true, 37 | }); 38 | }; 39 | closePut = () => { 40 | this.setState({ 41 | put: false, 42 | }); 43 | }; 44 | openDel = () => { 45 | this.setState({ 46 | del: true, 47 | }); 48 | }; 49 | closeDel = () => { 50 | this.setState({ 51 | del: false, 52 | }); 53 | }; 54 | 55 | render() { 56 | const { get, post, put, del } = this.state; 57 | return ( 58 |
    59 |

    React for Spring Boot REST API

    60 |
    61 | 67 |
    68 | 69 | 70 | 71 | 72 | 73 | 79 |
    80 | 81 | 82 | 83 | 84 | 85 | 86 | 92 |
    93 | 94 | 95 | 96 | 97 | 98 | 104 |
    105 | 106 | 107 | 108 | 109 | 110 |
    111 | ); 112 | } 113 | } 114 | 115 | export default RestHome; 116 | -------------------------------------------------------------------------------- /reactwithspring/src/reactspring/ReactHome.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import GetStudentInfo from "./GetStudentInfo"; 3 | import InsertStudent from "./InsertStudent"; 4 | import UpdateStudent from "./UpdateStudent"; 5 | import DeleteStudent from "./DeleteStudent"; 6 | 7 | class ReactHome extends Component { 8 | state = { 9 | get: true, 10 | post: false, 11 | put: false, 12 | del: false, 13 | }; 14 | openGet = () => { 15 | this.setState({ 16 | get: true, 17 | post: false, 18 | put: false, 19 | del: false, 20 | }); 21 | }; 22 | closeGet = () => { 23 | this.setState({ 24 | get: true, 25 | post: false, 26 | put: false, 27 | del: false, 28 | }); 29 | }; 30 | openInsert = () => { 31 | this.setState({ 32 | get: false, 33 | post: true, 34 | put: false, 35 | del: false, 36 | }); 37 | }; 38 | closeInsert = () => { 39 | this.setState({ 40 | get: true, 41 | post: false, 42 | put: false, 43 | del: false, 44 | }); 45 | }; 46 | openUpdate = () => { 47 | this.setState({ 48 | get: false, 49 | post: false, 50 | put: true, 51 | del: false, 52 | }); 53 | }; 54 | closeUpdate = () => { 55 | this.setState({ 56 | get: true, 57 | post: false, 58 | put: false, 59 | del: false, 60 | }); 61 | }; 62 | openDelete = () => { 63 | this.setState({ 64 | get: false, 65 | post: false, 66 | put: false, 67 | del: true, 68 | }); 69 | }; 70 | closeDelete = () => { 71 | this.setState({ 72 | get: true, 73 | post: false, 74 | put: false, 75 | del: false, 76 | }); 77 | }; 78 | 79 | render() { 80 | const { get, post, put, del } = this.state; 81 | return ( 82 |
    83 |

    React as Frontend for Spring Boot REST API

    84 | {get && } 85 | {get &&
    } 86 | {post && } 87 | {post &&
    } 88 | {put && } 89 | {put &&
    } 90 | {del && } 91 | {del &&
    } 92 | 95 | 101 | 107 | 113 |
    114 | ); 115 | } 116 | } 117 | 118 | export default ReactHome; 119 | -------------------------------------------------------------------------------- /reactwithspring/src/reactspring/ReactHomeModal.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import GetStudentInfo from "./GetStudentInfo"; 3 | import InsertStudent from "./InsertStudent"; 4 | import UpdateStudent from "./UpdateStudent"; 5 | import DeleteStudent from "./DeleteStudent"; 6 | import { Modal } from "react-bootstrap"; 7 | class ReactHomeModal extends Component { 8 | state = { 9 | get: false, 10 | post: false, 11 | put: false, 12 | del: false, 13 | }; 14 | openGet = () => { 15 | this.setState({ 16 | get: true, 17 | }); 18 | }; 19 | closeGet = () => { 20 | this.setState({ 21 | get: false, 22 | }); 23 | }; 24 | openInsert = () => { 25 | this.setState({ 26 | post: true, 27 | }); 28 | }; 29 | closeInsert = () => { 30 | this.setState({ 31 | post: false, 32 | }); 33 | }; 34 | openUpdate = () => { 35 | this.setState({ 36 | put: true, 37 | }); 38 | }; 39 | closeUpdate = () => { 40 | this.setState({ 41 | put: false, 42 | }); 43 | }; 44 | openDelete = () => { 45 | this.setState({ 46 | del: true, 47 | }); 48 | }; 49 | closeDelete = () => { 50 | this.setState({ 51 | del: false, 52 | }); 53 | }; 54 | 55 | render() { 56 | const { get, post, put, del } = this.state; 57 | return ( 58 |
    59 |

    React as Frontend for Spring Boot REST API

    60 |
    61 | 67 |
    68 | 69 | 70 | 71 | 72 | 73 | 74 | 80 |
    81 | 82 | 83 | 84 | 85 | 86 | 87 | 93 |
    94 | 95 | 96 | 97 | 98 | 99 | 100 | 106 |
    107 | 108 | 109 | 110 | 111 | 112 |
    113 | ); 114 | } 115 | } 116 | 117 | export default ReactHomeModal; 118 | -------------------------------------------------------------------------------- /firstapp/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /changename/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /errorboundary/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /qrcodeapp/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /qrgenerator/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /barcodegenerator/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | --------------------------------------------------------------------------------