├── first-project ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.jsx │ ├── Country.jsx │ ├── Product.jsx │ ├── User.jsx │ ├── assets │ │ └── react.svg │ ├── index.css │ └── main.jsx └── vite.config.js ├── food.json ├── form-handling-useref ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.jsx │ ├── Compstate.jsx │ ├── assets │ │ └── react.svg │ ├── index.css │ └── main.jsx └── vite.config.js ├── nutrify-fresh ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.jsx │ ├── assets │ │ └── react.svg │ ├── components │ │ ├── Diet.jsx │ │ ├── Food.jsx │ │ ├── Header.jsx │ │ ├── Login.jsx │ │ ├── Notfound.jsx │ │ ├── Private.jsx │ │ ├── Register.jsx │ │ └── Track.jsx │ ├── contexts │ │ └── UserContext.jsx │ ├── index.css │ └── main.jsx └── vite.config.js ├── nutrify ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.jsx │ ├── assets │ │ └── react.svg │ ├── components │ │ ├── Login.jsx │ │ └── Register.jsx │ ├── index.css │ └── main.jsx └── vite.config.js ├── routing-useref ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.jsx │ ├── assets │ │ └── react.svg │ ├── components │ │ ├── About.jsx │ │ ├── Header.jsx │ │ ├── Home.jsx │ │ ├── Product.jsx │ │ ├── Refdemo.jsx │ │ ├── Service.jsx │ │ └── about │ │ │ ├── Image.jsx │ │ │ ├── Location.jsx │ │ │ └── Prices.jsx │ ├── index.css │ └── main.jsx └── vite.config.js ├── usecontext-classcomp ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.jsx │ ├── Category.jsx │ ├── Demo.jsx │ ├── Product.jsx │ ├── assets │ │ └── react.svg │ ├── index.css │ └── main.jsx └── vite.config.js └── useeffect-api ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public └── vite.svg ├── src ├── App.css ├── App.jsx ├── Products.jsx ├── assets │ └── react.svg ├── index.css └── main.jsx └── vite.config.js /first-project/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /first-project/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /first-project/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /first-project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /first-project/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "first-project", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.43", 18 | "@types/react-dom": "^18.2.17", 19 | "@vitejs/plugin-react": "^4.2.1", 20 | "eslint": "^8.55.0", 21 | "eslint-plugin-react": "^7.33.2", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.4.5", 24 | "vite": "^5.0.8" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /first-project/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /first-project/src/App.css: -------------------------------------------------------------------------------- 1 | .product 2 | { 3 | width: fit-content; 4 | padding: 20px; 5 | background-color: lightgray; 6 | margin: 10px; 7 | } 8 | 9 | .user 10 | { 11 | background-color: skyblue; 12 | padding: 20px; 13 | margin: 20px; 14 | width: fit-content; 15 | } 16 | 17 | .country 18 | { 19 | width: fit-content; 20 | padding: 20px; 21 | background-color: lightblue; 22 | margin: 10px; 23 | } -------------------------------------------------------------------------------- /first-project/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import './App.css' 3 | import Country from './Country' 4 | // import Product from './Product' 5 | // import User from './User' 6 | 7 | function App() { 8 | 9 | let [isLoggedIn,setIsLoggedIn] = useState(true) 10 | 11 | 12 | let [countries,setCountries] = useState( 13 | [ 14 | {name:"India",capital:"New Delhi",pop:"1.4B"}, 15 | {name:"Australia",capital:"Canberra",pop:"330M"}, 16 | {name:"France",capital:"Paris",pop:"67.5M"} 17 | ] 18 | ) 19 | 20 | function loadNewCountries() 21 | { 22 | setCountries( 23 | [ 24 | {name:"USA",capital:"Washington DC",pop:"1.4B"}, 25 | {name:"Sri Lanka",capital:"Colombo",pop:"330M"}, 26 | {name:"UAE",capital:"Dubai",pop:"67.5M"} 27 | ] 28 | ) 29 | } 30 | 31 | 32 | 33 | 34 | return ( 35 |
36 |

Main Component

37 | 38 | 39 | { 40 | 41 | isLoggedIn==false? 42 | (

Please Log IN

) 43 | : 44 | 45 | countries.map((country)=>{ 46 | 47 | return ( 48 | 49 | ) 50 | 51 | }) 52 | 53 | } 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | {/* { 62 | 63 | countries.map((country)=>{ 64 | 65 | return ( 66 | 67 | ) 68 | 69 | }) 70 | 71 | 72 | 73 | } */} 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 |
82 | ) 83 | 84 | } 85 | 86 | export default App 87 | -------------------------------------------------------------------------------- /first-project/src/Country.jsx: -------------------------------------------------------------------------------- 1 | function Country(props) 2 | { 3 | return ( 4 |
5 | 6 |

{props.name}

7 |

{props.capital}

8 |

{props.pop}

9 | 10 |
11 | ) 12 | } 13 | 14 | export default Country; -------------------------------------------------------------------------------- /first-project/src/Product.jsx: -------------------------------------------------------------------------------- 1 | function Product(props) 2 | { 3 | 4 | 5 | 6 | console.log(props); 7 | 8 | let {name,price,specs,category} = props; 9 | 10 | return ( 11 |
12 | 13 |

{name}

14 |

{price}

15 |

{specs.ram}

16 |

{category[1]}

17 | 18 |
19 | ) 20 | } 21 | 22 | 23 | export default Product; 24 | 25 | -------------------------------------------------------------------------------- /first-project/src/User.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | function User(props) 4 | { 5 | 6 | let [name,setName] = useState("Saurabh"); 7 | 8 | let [age,setAge] = useState(29); 9 | 10 | // let name = "Saurabh"; 11 | 12 | function changeName() 13 | { 14 | setName(props.name); 15 | 16 | } 17 | 18 | 19 | function changeAge() 20 | { 21 | setAge(props.age); 22 | } 23 | 24 | 25 | function doSomething(planet) 26 | { 27 | console.log("Hello "+planet); 28 | } 29 | 30 | 31 | return ( 32 |
33 |

{name}

34 |

{age}

35 | 36 | 37 | 38 | 39 | {/* */} 40 | 41 | 45 | 46 |
47 | ) 48 | } 49 | 50 | 51 | export default User; -------------------------------------------------------------------------------- /first-project/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /first-project/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgupta8limitless/react-frontend-dec-2023/5be03215cdf4ff1f9c85c2adb0c13131c7887969/first-project/src/index.css -------------------------------------------------------------------------------- /first-project/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /first-project/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /food.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Apple", 4 | "calories": 52, 5 | "protein": 0.3, 6 | "fat": 0.2, 7 | "fiber": 2.4, 8 | "carbohydrates": 14 9 | }, 10 | { 11 | "name": "Banana", 12 | "calories": 89, 13 | "protein": 1.1, 14 | "fat": 0.3, 15 | "fiber": 2.6, 16 | "carbohydrates": 23 17 | }, 18 | { 19 | "name": "Chicken Breast", 20 | "calories": 165, 21 | "protein": 31, 22 | "fat": 3.6, 23 | "fiber": 0, 24 | "carbohydrates": 0 25 | }, 26 | { 27 | "name": "Broccoli", 28 | "calories": 55, 29 | "protein": 3.7, 30 | "fat": 0.6, 31 | "fiber": 2.4, 32 | "carbohydrates": 11 33 | }, 34 | { 35 | "name": "Almonds", 36 | "calories": 579, 37 | "protein": 21, 38 | "fat": 49, 39 | "fiber": 12.5, 40 | "carbohydrates": 22 41 | }, 42 | { 43 | "name": "Salmon", 44 | "calories": 208, 45 | "protein": 20, 46 | "fat": 13, 47 | "fiber": 0, 48 | "carbohydrates": 0 49 | }, 50 | { 51 | "name": "Oats", 52 | "calories": 389, 53 | "protein": 16.9, 54 | "fat": 6.9, 55 | "fiber": 10.6, 56 | "carbohydrates": 66.3 57 | }, 58 | { 59 | "name": "Egg", 60 | "calories": 155, 61 | "protein": 13, 62 | "fat": 11, 63 | "fiber": 0, 64 | "carbohydrates": 1.1 65 | }, 66 | { 67 | "name": "Spinach", 68 | "calories": 23, 69 | "protein": 2.9, 70 | "fat": 0.4, 71 | "fiber": 2.2, 72 | "carbohydrates": 3.6 73 | }, 74 | { 75 | "name": "Sweet Potato", 76 | "calories": 86, 77 | "protein": 1.6, 78 | "fat": 0.1, 79 | "fiber": 3, 80 | "carbohydrates": 20 81 | } 82 | ] 83 | -------------------------------------------------------------------------------- /form-handling-useref/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /form-handling-useref/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /form-handling-useref/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /form-handling-useref/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /form-handling-useref/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "form-handling-useref", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.43", 18 | "@types/react-dom": "^18.2.17", 19 | "@vitejs/plugin-react": "^4.2.1", 20 | "eslint": "^8.55.0", 21 | "eslint-plugin-react": "^7.33.2", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.4.5", 24 | "vite": "^5.0.8" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /form-handling-useref/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /form-handling-useref/src/App.css: -------------------------------------------------------------------------------- 1 | .data-form 2 | { 3 | background-color: lightgray; 4 | padding: 20px; 5 | width: fit-content; 6 | } -------------------------------------------------------------------------------- /form-handling-useref/src/App.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { useState } from 'react'; 3 | import './App.css' 4 | // import Compstate from './Compstate' 5 | 6 | 7 | 8 | function App() { 9 | 10 | let [details,setDetails] = useState({ 11 | name:"", 12 | email:"" 13 | }); 14 | 15 | function handleInput(event) 16 | { 17 | 18 | setDetails((prevObj)=>{ 19 | return {...prevObj,[event.target.name]:event.target.value} 20 | }) 21 | 22 | 23 | } 24 | 25 | function handleSubmit() 26 | { 27 | console.log(details); 28 | } 29 | 30 | return ( 31 | <> 32 | 33 | 34 | 35 |
36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 |
46 | 47 | 48 | ) 49 | } 50 | 51 | export default App 52 | -------------------------------------------------------------------------------- /form-handling-useref/src/Compstate.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | function Compstate() 4 | { 5 | 6 | let [name,setName] = useState("Saurabh"); 7 | 8 | let [animals,setAnimals] = useState(["Lion","Cheetah","Hyena"]) 9 | 10 | 11 | 12 | function addAnimal() 13 | { 14 | 15 | setAnimals((prevArr)=>{ 16 | return [...prevArr,'Deer'] 17 | }) 18 | 19 | } 20 | 21 | 22 | function changeName() 23 | { 24 | setName((val)=>{ 25 | return val+"thor"; 26 | }) 27 | } 28 | 29 | return ( 30 | <> 31 |

Hello Chat

32 |

{name}

33 | 34 | 37 | 38 | { 39 | animals.map((animal,index)=>{ 40 | return ( 41 |

{animal}

42 | ) 43 | }) 44 | } 45 | 46 | 47 | 48 | ) 49 | 50 | } 51 | 52 | 53 | export default Compstate; -------------------------------------------------------------------------------- /form-handling-useref/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /form-handling-useref/src/index.css: -------------------------------------------------------------------------------- 1 | * 2 | { 3 | margin: 0px; 4 | padding: 0px; 5 | box-sizing: border-box; 6 | font-family: segoe UI; 7 | } -------------------------------------------------------------------------------- /form-handling-useref/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /form-handling-useref/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server:{ 8 | port:3000 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /nutrify-fresh/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /nutrify-fresh/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /nutrify-fresh/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /nutrify-fresh/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /nutrify-fresh/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nutrify-fresh", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "react-router-dom": "^6.21.2" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.2.43", 19 | "@types/react-dom": "^18.2.17", 20 | "@vitejs/plugin-react": "^4.2.1", 21 | "eslint": "^8.55.0", 22 | "eslint-plugin-react": "^7.33.2", 23 | "eslint-plugin-react-hooks": "^4.6.0", 24 | "eslint-plugin-react-refresh": "^0.4.5", 25 | "vite": "^5.0.8" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /nutrify-fresh/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /nutrify-fresh/src/App.css: -------------------------------------------------------------------------------- 1 | .container 2 | { 3 | height: 100vh; 4 | width: 100%; 5 | background-color: #161616; 6 | color: white; 7 | padding: 30px; 8 | display: flex; 9 | align-items: center; 10 | } 11 | 12 | .form 13 | { 14 | /* background-color: red; */ 15 | width: 100%; 16 | display: flex; 17 | flex-direction: column; 18 | row-gap: 15px; 19 | align-items: flex-start; 20 | } 21 | 22 | .inp 23 | { 24 | width: 100%; 25 | height: 45px; 26 | border-radius: 5px; 27 | text-indent: 20px; 28 | outline: none; 29 | border: 1px solid gray; 30 | } 31 | 32 | .btn 33 | { 34 | padding: 10px 50px; 35 | border-radius: 5px; 36 | background-color: #167ce0; 37 | color: white; 38 | text-transform: uppercase; 39 | font-weight: bold; 40 | border: 1px solid #167ce0; 41 | cursor: pointer; 42 | } 43 | 44 | .btn:hover 45 | { 46 | background-color: #5395d7; 47 | } 48 | 49 | a 50 | { 51 | color: #167ce0; 52 | text-decoration: none; 53 | } 54 | 55 | 56 | .not-found 57 | { 58 | width: 100%; 59 | text-align: center; 60 | 61 | } 62 | 63 | 64 | .success 65 | { 66 | background-color: lightgreen; 67 | color: green; 68 | width: 100%; 69 | padding: 10px; 70 | border-radius: 5px; 71 | opacity: 1; 72 | } 73 | 74 | .error 75 | { 76 | background-color: lightpink; 77 | color: red; 78 | width: 100%; 79 | padding: 10px; 80 | border-radius: 5px; 81 | opacity: 1; 82 | } 83 | 84 | .invisible-msg 85 | { 86 | 87 | width: 100%; 88 | padding: 10px; 89 | border-radius: 5px; 90 | opacity: 0; 91 | } 92 | 93 | 94 | /* track page css */ 95 | 96 | 97 | .search 98 | { 99 | width: 100%; 100 | padding: 10px 0px; 101 | /* background-color: gray; */ 102 | /* border-radius: 5px; */ 103 | } 104 | 105 | .track-container 106 | { 107 | align-items: flex-start; 108 | flex-direction: column; 109 | } 110 | 111 | .search-inp 112 | { 113 | width: 100%; 114 | height: 45px; 115 | text-indent: 10px; 116 | outline: none; 117 | border-radius: 5px; 118 | border: 1px solid gray; 119 | font-size: 18px; 120 | } 121 | 122 | .search 123 | { 124 | position: relative; 125 | } 126 | 127 | .search-results 128 | { 129 | width: 100%; 130 | padding: 10px 5px; 131 | background-color: gray; 132 | margin-top: 10px; 133 | position:absolute; 134 | } 135 | 136 | .food 137 | { 138 | width: 100%; 139 | padding: 30px 0px; 140 | /* background-color: red; */ 141 | display: flex; 142 | flex-wrap: wrap; 143 | row-gap: 10px; 144 | } 145 | 146 | .food-img 147 | { 148 | width: 100%; 149 | height: auto; 150 | /* background-color: blue; */ 151 | 152 | border-radius: 5px; 153 | } 154 | 155 | .food-image 156 | { 157 | width: 100%; 158 | } 159 | 160 | .nutrient{ 161 | width: 50%; 162 | padding: 10px 0px; 163 | /* background-color: green; */ 164 | } 165 | 166 | .track-control 167 | { 168 | display: flex; 169 | width: 100%; 170 | column-gap: 2%; 171 | } 172 | 173 | .track-control > .inp 174 | { 175 | width: 68%; 176 | } 177 | 178 | .track-control > .btn 179 | { 180 | width: 30%; 181 | padding:10px 0px; 182 | } 183 | 184 | 185 | .diet-container 186 | { 187 | align-items: flex-start; 188 | row-gap: 20px; 189 | flex-direction: column; 190 | } 191 | 192 | .item 193 | { 194 | width: 100%; 195 | padding: 20px; 196 | background-color: #2f2f2f; 197 | } 198 | -------------------------------------------------------------------------------- /nutrify-fresh/src/App.jsx: -------------------------------------------------------------------------------- 1 | import './App.css' 2 | import { BrowserRouter, Routes, Route } from 'react-router-dom' 3 | import Register from './components/Register' 4 | import Login from './components/Login' 5 | import Notfound from './components/Notfound' 6 | import Track from './components/Track' 7 | 8 | import Private from './components/Private' 9 | 10 | import { UserContext } from './contexts/UserContext' 11 | import { useEffect, useState } from 'react' 12 | import Diet from './components/Diet' 13 | 14 | 15 | 16 | function App() { 17 | 18 | const [loggedUser,setLoggedUser] 19 | = useState(JSON.parse(localStorage.getItem("nutrify-user"))); 20 | 21 | 22 | 23 | return ( 24 | <> 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | }/> 34 | }/> 35 | }/> 36 | }/> 37 | }/> 38 | 39 | }/> 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | ) 51 | } 52 | 53 | export default App 54 | -------------------------------------------------------------------------------- /nutrify-fresh/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /nutrify-fresh/src/components/Diet.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef, useState } from "react" 2 | import { UserContext } from "../contexts/UserContext" 3 | import { useContext } from "react" 4 | import Header from './Header' 5 | 6 | export default function Diet() 7 | { 8 | 9 | let loggedData = useContext(UserContext) 10 | const [items,setItems] = useState([]); 11 | 12 | const [date,setDate] = useState(new Date()) 13 | 14 | let [total,setTotal] = useState({ 15 | totalCaloreis:0, 16 | totalProtein:0, 17 | totalCarbs:0, 18 | totalFats:0, 19 | totalFiber:0 20 | }) 21 | 22 | 23 | useEffect(()=>{ 24 | 25 | fetch(`http://localhost:8000/track/${loggedData.loggedUser.userid}/${date.getMonth()+1}-${date.getDate()}-${date.getFullYear()}`,{ 26 | method:"GET", 27 | headers:{ 28 | "Authorization":`Bearer ${loggedData.loggedUser.token}` 29 | } 30 | }) 31 | .then((response)=>response.json()) 32 | .then((data)=>{ 33 | console.log(data); 34 | setItems(data); 35 | }) 36 | .catch((err)=>{ 37 | console.log(err); 38 | }) 39 | 40 | },[date]) 41 | 42 | 43 | useEffect(()=>{ 44 | calculateTotal(); 45 | },[items]) 46 | 47 | 48 | function calculateTotal() 49 | { 50 | 51 | 52 | 53 | let totalCopy = { 54 | totalCaloreis:0, 55 | totalProtein:0, 56 | totalCarbs:0, 57 | totalFats:0, 58 | totalFiber:0 59 | }; 60 | 61 | items.forEach((item)=>{ 62 | totalCopy.totalCaloreis += item.details.calories; 63 | totalCopy.totalProtein += item.details.protein; 64 | totalCopy.totalCarbs += item.details.carbohydrates; 65 | totalCopy.totalFats += item.details.fat; 66 | totalCopy.totalFiber += item.details.fiber; 67 | 68 | }) 69 | 70 | setTotal(totalCopy); 71 | 72 | 73 | } 74 | 75 | return ( 76 |
77 | 78 |
79 | 80 | 81 | { 82 | setDate(new Date(event.target.value)); 83 | }}/> 84 | 85 | 86 | 87 | { 88 | items.map((item)=>{ 89 | 90 | 91 | return ( 92 |
93 | 94 |

{item.foodId.name} ( {item.details.calories} Kcal for {item.quantity}g )

95 | 96 |

Protein {item.details.protein}g, Carbs {item.details.carbohydrates}g, Fats {item.details.fat}g, Fiber {item.details.fiber}g

97 | 98 |
99 | ) 100 | }) 101 | } 102 | 103 | 104 |
105 | 106 |

{total.totalCaloreis} Kcal

107 | 108 |

Protein {total.totalProtein}g, Carbs {total.totalCarbs}g, Fats {total.totalFats}g, Fiber {total.totalFiber}g

109 | 110 |
111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 |
120 | ) 121 | 122 | } -------------------------------------------------------------------------------- /nutrify-fresh/src/components/Food.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react" 2 | import { UserContext } from "../contexts/UserContext"; 3 | import { useContext } from "react"; 4 | 5 | export default function Food(props) 6 | { 7 | 8 | const [eatenQuantity,setEatenQuantity] = useState(100); 9 | const [food,setFood] = useState({}); 10 | const [foodInitial,setFoodInital] = useState({}); 11 | let loggedData = useContext(UserContext); 12 | 13 | 14 | 15 | 16 | useEffect(()=>{ 17 | setFood(props.food); 18 | setFoodInital(props.food); 19 | 20 | console.log(loggedData); 21 | 22 | },[props.food]) 23 | 24 | 25 | function calculateMacros(event) 26 | { 27 | 28 | 29 | if(event.target.value.length!=0) 30 | { 31 | let quantity = Number(event.target.value); 32 | setEatenQuantity(quantity); 33 | 34 | let copyFood = {...food}; 35 | 36 | copyFood.protein = (foodInitial.protein*quantity)/100; 37 | copyFood.carbohydrates = (foodInitial.carbohydrates*quantity)/100; 38 | copyFood.fat = (foodInitial.fat*quantity)/100; 39 | copyFood.fiber = (foodInitial.fiber*quantity)/100; 40 | copyFood.calories = (foodInitial.calories*quantity)/100; 41 | 42 | setFood(copyFood); 43 | } 44 | 45 | 46 | 47 | 48 | } 49 | 50 | 51 | function trackFoodItem() 52 | { 53 | let trackedItem = { 54 | userId:loggedData.loggedUser.userid, 55 | foodId:food._id, 56 | details:{ 57 | protein:food.protein, 58 | carbohydrates:food.carbohydrates, 59 | fat:food.fat, 60 | fiber:food.fiber, 61 | calories:food.calories 62 | }, 63 | quantity:eatenQuantity 64 | } 65 | 66 | 67 | console.log(trackedItem); 68 | 69 | fetch("http://localhost:8000/track",{ 70 | method:"POST", 71 | body:JSON.stringify(trackedItem), 72 | headers:{ 73 | "Authorization":`Bearer ${loggedData.loggedUser.token}`, 74 | "Content-Type":"application/json" 75 | } 76 | }) 77 | .then((response)=>response.json()) 78 | .then((data)=>{ 79 | console.log(data); 80 | }) 81 | .catch((err)=>{ 82 | console.log(err); 83 | }) 84 | 85 | 86 | } 87 | 88 | return ( 89 |
90 | 91 |
92 | 93 |
94 | 95 |

{food.name} ({food.calories} Kcal for {eatenQuantity}G)

96 | 97 |
98 |

Protein

99 |

{food.protein}g

100 |
101 | 102 |
103 |

Carbs

104 |

{food.carbohydrates}g

105 |
106 | 107 |
108 |

Fat

109 |

{food.fat}g

110 |
111 | 112 |
113 |

Fibre

114 |

{food.fiber}g

115 |
116 | 117 | 118 |
119 | 120 | 122 | 123 | 124 | 125 | 126 |
127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 |
136 | ) 137 | } -------------------------------------------------------------------------------- /nutrify-fresh/src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import { UserContext } from "../contexts/UserContext"; 2 | import { useContext } from "react"; 3 | import { useNavigate,Link } from "react-router-dom"; 4 | export default function Header() 5 | { 6 | 7 | const loggedData = useContext(UserContext); 8 | const navigate = useNavigate(); 9 | 10 | function logout() 11 | { 12 | localStorage.removeItem("nutrify-user"); 13 | loggedData.setLoggedUser(null); 14 | navigate("/login"); 15 | 16 | } 17 | 18 | return ( 19 |
20 | 21 | 26 | 27 | 28 |
29 | ) 30 | } -------------------------------------------------------------------------------- /nutrify-fresh/src/components/Login.jsx: -------------------------------------------------------------------------------- 1 | import { useState,useContext, useEffect } from "react" 2 | import { UserContext } from "../contexts/UserContext"; 3 | import { Link,useNavigate } from "react-router-dom" 4 | export default function Login() 5 | { 6 | 7 | 8 | const loggedData = useContext(UserContext); 9 | 10 | 11 | 12 | 13 | const navigate = useNavigate(); 14 | 15 | const [userCreds,setUserCreds] = useState({ 16 | email:"", 17 | password:"" 18 | }) 19 | 20 | const [message,setMessage] = useState({ 21 | type:"invisible-msg", 22 | text:"Dummy Msg" 23 | }) 24 | 25 | 26 | 27 | function handleInput(event) 28 | { 29 | setUserCreds((prevState)=>{ 30 | return {...prevState,[event.target.name]:event.target.value}; 31 | }) 32 | } 33 | 34 | function handleSubmit(event) 35 | { 36 | event.preventDefault(); 37 | console.log(userCreds); 38 | 39 | fetch("http://localhost:8000/login",{ 40 | method:"POST", 41 | body:JSON.stringify(userCreds), 42 | headers:{ 43 | "Content-Type":"application/json" 44 | } 45 | }) 46 | .then((response)=>{ 47 | 48 | if(response.status===404) 49 | { 50 | setMessage({type:"error",text:"Username or Email Doesnt Exist"}); 51 | } 52 | else if(response.status===403) { 53 | setMessage({type:"error",text:"Incorrect Password"}); 54 | } 55 | 56 | 57 | setTimeout(()=>{ 58 | setMessage({type:"invisible-msg",text:"Dummy Msg"}) 59 | },5000) 60 | 61 | return response.json(); 62 | 63 | 64 | }) 65 | .then((data)=>{ 66 | 67 | 68 | 69 | if(data.token!==undefined) 70 | { 71 | localStorage.setItem("nutrify-user",JSON.stringify(data)); 72 | 73 | loggedData.setLoggedUser(data); 74 | 75 | navigate("/track"); 76 | } 77 | 78 | }) 79 | .catch((err)=>{ 80 | console.log(err); 81 | }) 82 | 83 | 84 | } 85 | 86 | 87 | return ( 88 |
89 | 90 |
91 | 92 |

Login To Fitness

93 | 94 | 96 | 97 | 99 | 100 | 101 | 102 | 103 |

Dont Have a Account ? Register Now

104 | 105 |

{message.text}

106 | 107 |
108 | 109 |
110 | ) 111 | } -------------------------------------------------------------------------------- /nutrify-fresh/src/components/Notfound.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom" 2 | export default function Notfound() 3 | { 4 | return( 5 |
6 |
7 |

404 | Not Found

8 |

Register Now to Use

9 |
10 |
11 | ) 12 | } -------------------------------------------------------------------------------- /nutrify-fresh/src/components/Private.jsx: -------------------------------------------------------------------------------- 1 | import { Navigate } from "react-router-dom"; 2 | import { UserContext } from "../contexts/UserContext"; 3 | import { useContext } from "react"; 4 | export default function Private(props) 5 | { 6 | 7 | const loggedData = useContext(UserContext); 8 | 9 | 10 | 11 | return ( 12 | 13 | loggedData.loggedUser!==null? 14 | 15 | : 16 | 17 | 18 | ) 19 | 20 | } -------------------------------------------------------------------------------- /nutrify-fresh/src/components/Register.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | export default function Register() 5 | { 6 | const [userDetails,setUserDetails] = useState({ 7 | name:"", 8 | email:"", 9 | password:"", 10 | age:"" 11 | }) 12 | 13 | const [message,setMessage] = useState({ 14 | type:"invisible-msg", 15 | text:"Dummy Msg" 16 | }) 17 | 18 | 19 | 20 | 21 | function handleInput(event) 22 | { 23 | 24 | setUserDetails((prevState)=>{ 25 | 26 | return {...prevState,[event.target.name]:event.target.value}; 27 | 28 | }) 29 | 30 | } 31 | 32 | function handleSubmit(event) 33 | { 34 | event.preventDefault(); 35 | // console.log(userDetails); 36 | 37 | fetch("http://localhost:8000/register",{ 38 | method:"POST", 39 | body:JSON.stringify(userDetails), 40 | headers:{ 41 | "Content-Type":"application/json" 42 | } 43 | }) 44 | .then((response)=>response.json()) 45 | .then((data)=>{ 46 | 47 | setMessage({type:"success",text:data.message}); 48 | 49 | setUserDetails({ 50 | name:"", 51 | email:"", 52 | password:"", 53 | age:"" 54 | }) 55 | 56 | setTimeout(()=>{ 57 | setMessage({type:"invisible-msg",text:"Dummy sg"}); 58 | },5000) 59 | 60 | 61 | 62 | 63 | 64 | }) 65 | .catch((err)=>{ 66 | console.log(err); 67 | }) 68 | 69 | 70 | 71 | 72 | } 73 | 74 | 75 | return ( 76 |
77 | 78 |
79 | 80 |

Start Your Fitness

81 | 82 | 84 | 85 | 87 | 88 | 90 | 91 | 93 | 94 | 95 | 96 | 97 | 98 |

Already Registered ? Login

99 | 100 |

{message.text}

101 | 102 |
103 | 104 | 105 | 106 | 107 | 108 | 109 |
110 | ) 111 | } -------------------------------------------------------------------------------- /nutrify-fresh/src/components/Track.jsx: -------------------------------------------------------------------------------- 1 | import { UserContext } from "../contexts/UserContext" 2 | import { useContext, useEffect, useState } from "react" 3 | import Food from "./Food"; 4 | import Header from './Header' 5 | export default function Track() 6 | { 7 | 8 | const loggedData = useContext(UserContext); 9 | 10 | const [foodItems,setFoodItems] = useState([]); 11 | 12 | const [food,setFood] = useState(null); 13 | 14 | 15 | 16 | function searchFood(event) 17 | { 18 | if(event.target.value.length!==0) 19 | { 20 | 21 | fetch(`http://localhost:8000/foods/${event.target.value}`,{ 22 | method:"GET", 23 | headers:{ 24 | "Authorization":`Bearer ${loggedData.loggedUser.token}` 25 | } 26 | 27 | }) 28 | .then((response)=>response.json()) 29 | .then((data)=>{ 30 | 31 | console.log(data); 32 | if(data.message===undefined) 33 | { 34 | setFoodItems(data); 35 | } 36 | else 37 | { 38 | setFoodItems([]); 39 | } 40 | 41 | }) 42 | .catch((err)=>{ 43 | console.log(err); 44 | }) 45 | } 46 | else 47 | { 48 | setFoodItems([]); 49 | } 50 | 51 | 52 | } 53 | 54 | 55 | 56 | return ( 57 | <> 58 | 59 |
60 | 61 |
62 | 63 |
64 | 65 | 67 | 68 | { 69 | foodItems.length!==0?( 70 |
71 | 72 | { 73 | foodItems.map((item)=>{ 74 | return ( 75 |

{ 76 | setFood(item); 77 | }} key={item._id}>{item.name}

78 | ) 79 | }) 80 | } 81 | 82 |
83 | ):null 84 | } 85 | 86 | 87 | 88 |
89 | 90 | { 91 | food!==null?( 92 | 93 | ):null 94 | } 95 | 96 | 97 | 98 | 99 |
100 | 101 | 102 | ) 103 | } -------------------------------------------------------------------------------- /nutrify-fresh/src/contexts/UserContext.jsx: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | export const UserContext = createContext(); -------------------------------------------------------------------------------- /nutrify-fresh/src/index.css: -------------------------------------------------------------------------------- 1 | *{ 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | margin: 0px; 5 | padding: 0px; 6 | box-sizing: border-box; 7 | 8 | } 9 | 10 | -------------------------------------------------------------------------------- /nutrify-fresh/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | 7 | ReactDOM.createRoot(document.getElementById('root')).render( 8 | 9 | 10 | 11 | 12 | , 13 | ) 14 | -------------------------------------------------------------------------------- /nutrify-fresh/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /nutrify/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /nutrify/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /nutrify/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /nutrify/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /nutrify/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nutrify", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "react-router-dom": "^6.21.1" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.2.43", 19 | "@types/react-dom": "^18.2.17", 20 | "@vitejs/plugin-react": "^4.2.1", 21 | "eslint": "^8.55.0", 22 | "eslint-plugin-react": "^7.33.2", 23 | "eslint-plugin-react-hooks": "^4.6.0", 24 | "eslint-plugin-react-refresh": "^0.4.5", 25 | "vite": "^5.0.8" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /nutrify/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /nutrify/src/App.css: -------------------------------------------------------------------------------- 1 | .form-box 2 | { 3 | width: 100%; 4 | height: 100vh; 5 | padding: 30px; 6 | background-color: #2c2c2c; 7 | display: flex; 8 | align-items: center; 9 | color: white; 10 | } 11 | 12 | .form{ 13 | width: 100%; 14 | /* background-color: red; */ 15 | display: flex; 16 | flex-direction: column; 17 | row-gap: 20px; 18 | align-items: flex-start; 19 | } 20 | 21 | .inp 22 | { 23 | height: 45px; 24 | width: 100%; 25 | border: 1px solid gray; 26 | outline:none; 27 | font-size: 15px; 28 | text-indent: 20px; 29 | border-radius: 10px; 30 | 31 | } 32 | 33 | .btn 34 | { 35 | padding: 14px 40px; 36 | border-radius: 10px; 37 | background-color: #ec5f13; 38 | color: white; 39 | border: none; 40 | text-transform: uppercase; 41 | cursor: pointer; 42 | transition: .3s; 43 | } 44 | 45 | .btn:hover 46 | { 47 | background-color: #e9773a; 48 | } 49 | 50 | .link 51 | { 52 | color: #ec5f13; 53 | } -------------------------------------------------------------------------------- /nutrify/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { BrowserRouter, Routes, Route } from 'react-router-dom' 2 | import './App.css' 3 | import Login from './components/Login' 4 | import Register from './components/Register' 5 | 6 | function App() { 7 | 8 | 9 | return ( 10 | <> 11 | 12 | 13 | 14 | 15 | }/> 16 | }/> 17 | }/> 18 | 19 | 20 | 21 | 22 | 23 | ) 24 | } 25 | 26 | export default App 27 | -------------------------------------------------------------------------------- /nutrify/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /nutrify/src/components/Login.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom" 2 | export default function Login() 3 | { 4 | return ( 5 |
6 |
7 |

Login To Become The Best Version

8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

Not Registered ? Create Account

17 | 18 | 19 | 20 |
21 |
22 | ) 23 | } -------------------------------------------------------------------------------- /nutrify/src/components/Register.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react" 2 | import { Link } from "react-router-dom" 3 | export default function Register() 4 | { 5 | 6 | const [user,setUser] = useState({ 7 | name:"", 8 | email:"", 9 | password:"", 10 | age:"" 11 | }) 12 | 13 | 14 | function handleInput(event) 15 | { 16 | //collecting data from form feilds 17 | setUser((prevDetails)=>{ 18 | return {...prevDetails,[event.target.name]:event.target.value} 19 | }) 20 | } 21 | 22 | function handleSubmit(event) 23 | { 24 | //preventing refresh 25 | event.preventDefault(); 26 | 27 | //calling the api for registration 28 | 29 | fetch("") 30 | 31 | } 32 | 33 | 34 | 35 | return ( 36 |
37 |
38 |

Join Us For Fitness

39 | 40 | 42 | 43 | 45 | 46 | 48 | 49 | 51 | 52 | 53 | 54 |

Already Registered ? Login

55 | 56 | 57 |
58 |
59 | ) 60 | } -------------------------------------------------------------------------------- /nutrify/src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | margin: 0px; 4 | padding: 0px; 5 | box-sizing: border-box; 6 | } 7 | 8 | -------------------------------------------------------------------------------- /nutrify/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /nutrify/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /routing-useref/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /routing-useref/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /routing-useref/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /routing-useref/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /routing-useref/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "routing-useref", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "react-router-dom": "^6.21.1" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.2.43", 19 | "@types/react-dom": "^18.2.17", 20 | "@vitejs/plugin-react": "^4.2.1", 21 | "eslint": "^8.55.0", 22 | "eslint-plugin-react": "^7.33.2", 23 | "eslint-plugin-react-hooks": "^4.6.0", 24 | "eslint-plugin-react-refresh": "^0.4.5", 25 | "vite": "^5.0.8" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /routing-useref/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /routing-useref/src/App.css: -------------------------------------------------------------------------------- 1 | .nav 2 | { 3 | width: 100%; 4 | padding: 20px; 5 | background-color: darkgray; 6 | } 7 | 8 | .nav>ul{ 9 | display: flex; 10 | column-gap: 10px; 11 | list-style-type: none; 12 | } 13 | 14 | .link 15 | { 16 | text-decoration: none; 17 | } 18 | 19 | .about 20 | { 21 | padding: 10px; 22 | background-color: skyblue; 23 | } 24 | 25 | .product 26 | { 27 | padding: 20px; 28 | width: 100%; 29 | background-color: lightgray; 30 | display: flex; 31 | column-gap: 2%; 32 | } 33 | 34 | .prod 35 | { 36 | width: 20%; 37 | height: 300px; 38 | background-color: red; 39 | font-size: 30px; 40 | /* padding: 10px; */ 41 | } 42 | 43 | .service 44 | { 45 | padding: 20px; 46 | width: 100%; 47 | background-color: lightgray; 48 | display: flex; 49 | column-gap: 2%; 50 | } 51 | 52 | .serv 53 | { 54 | width: 20%; 55 | height: 300px; 56 | background-color: yellowgreen; 57 | font-size: 30px; 58 | /* padding: 10px; */ 59 | } 60 | 61 | .refdemo 62 | { 63 | padding: 40px; 64 | background-color: lightgreen; 65 | } -------------------------------------------------------------------------------- /routing-useref/src/App.jsx: -------------------------------------------------------------------------------- 1 | import './App.css' 2 | import {BrowserRouter,Routes,Route} from 'react-router-dom' 3 | import About from './components/About' 4 | import Product from './components/Product' 5 | 6 | import Service from './components/Service' 7 | import Home from './components/Home' 8 | import Header from './components/Header' 9 | 10 | import Image from './components/about/Image' 11 | import Prices from './components/about/Prices' 12 | import Location from './components/about/Location' 13 | import Refdemo from './components/Refdemo' 14 | 15 | function App() { 16 | 17 | 18 | return ( 19 | <> 20 | 21 | 22 | 23 | 24 | 25 | 26 | {/* 27 | 28 |
29 | 30 | 31 | 32 | 33 | }/> 34 | }> 35 | }> 36 | }> 37 | }> 38 | 39 | }/> 40 | }/> 41 | 42 | 43 | 44 | 45 | 46 | */} 47 | 48 | 49 | ) 50 | } 51 | 52 | export default App 53 | -------------------------------------------------------------------------------- /routing-useref/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /routing-useref/src/components/About.jsx: -------------------------------------------------------------------------------- 1 | import { Link, Outlet } from "react-router-dom"; 2 | 3 | 4 | function About() 5 | { 6 | return ( 7 |
8 |

About Us

9 |

10 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur similique rem amet quia labore ea tempora fuga sequi natus suscipit! Qui nesciunt tempore maiores quod explicabo quos delectus earum beatae? 11 |

12 | 13 |
    14 |
  • 15 | Images 16 |
    • 17 |
  • 18 | Prices 19 |
    • 20 |
  • 21 | Location 22 |
    • 23 |
24 | 25 | 26 | 27 | 28 |
29 | ) 30 | } 31 | 32 | export default About; -------------------------------------------------------------------------------- /routing-useref/src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import {Link} from 'react-router-dom' 2 | 3 | function Header() 4 | { 5 | return ( 6 | 22 | ) 23 | } 24 | 25 | export default Header; -------------------------------------------------------------------------------- /routing-useref/src/components/Home.jsx: -------------------------------------------------------------------------------- 1 | function Home() 2 | { 3 | return ( 4 |

Welcome Everyone

5 | ) 6 | } 7 | 8 | export default Home; -------------------------------------------------------------------------------- /routing-useref/src/components/Product.jsx: -------------------------------------------------------------------------------- 1 | function Product() 2 | { 3 | return ( 4 |
5 | 6 |
Product 1
7 |
Product 2
8 |
Product 3
9 |
Product 4
10 | 11 |
12 | ) 13 | } 14 | 15 | export default Product; -------------------------------------------------------------------------------- /routing-useref/src/components/Refdemo.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState,useRef } from "react"; 2 | 3 | function Refdemo() 4 | { 5 | 6 | let [name,setName] = useState("Saurabh") 7 | let nVar = 0; 8 | let rVar = useRef(10); 9 | 10 | let pTag = useRef(); 11 | 12 | 13 | 14 | 15 | 16 | useEffect(()=>{ 17 | console.log(name); 18 | console.log(nVar); 19 | 20 | console.log(rVar); 21 | 22 | console.log(pTag); 23 | }) 24 | 25 | return ( 26 |
27 |

UseRef Demo

28 |

{name}

29 |

{nVar}

30 |

{rVar.current}

31 | 36 | 37 |

Hello Everyone

38 | 39 | 42 | 43 |
44 | ) 45 | } 46 | 47 | 48 | export default Refdemo; -------------------------------------------------------------------------------- /routing-useref/src/components/Service.jsx: -------------------------------------------------------------------------------- 1 | function Service() 2 | { 3 | return ( 4 |
5 | 6 |
Service 1
7 |
Service 2
8 |
Service 3
9 |
Service 4
10 | 11 |
12 | ) 13 | } 14 | 15 | export default Service; -------------------------------------------------------------------------------- /routing-useref/src/components/about/Image.jsx: -------------------------------------------------------------------------------- 1 | function Image() 2 | { 3 | return ( 4 |

Image Component

5 | ) 6 | } 7 | 8 | export default Image; -------------------------------------------------------------------------------- /routing-useref/src/components/about/Location.jsx: -------------------------------------------------------------------------------- 1 | function Location() 2 | { 3 | return ( 4 |

I am Location Component

5 | ) 6 | } 7 | 8 | export default Location; -------------------------------------------------------------------------------- /routing-useref/src/components/about/Prices.jsx: -------------------------------------------------------------------------------- 1 | function Prices() 2 | { 3 | return ( 4 |

Prices Component

5 | ) 6 | } 7 | 8 | export default Prices; -------------------------------------------------------------------------------- /routing-useref/src/index.css: -------------------------------------------------------------------------------- 1 | * 2 | { 3 | margin: 0px; 4 | padding: 0px; 5 | box-sizing: border-box; 6 | } -------------------------------------------------------------------------------- /routing-useref/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | // 8 | 9 | // , 10 | ) 11 | -------------------------------------------------------------------------------- /routing-useref/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /usecontext-classcomp/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /usecontext-classcomp/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /usecontext-classcomp/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /usecontext-classcomp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /usecontext-classcomp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "usecontext-usereducer", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.43", 18 | "@types/react-dom": "^18.2.17", 19 | "@vitejs/plugin-react": "^4.2.1", 20 | "eslint": "^8.55.0", 21 | "eslint-plugin-react": "^7.33.2", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.4.5", 24 | "vite": "^5.0.8" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /usecontext-classcomp/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /usecontext-classcomp/src/App.css: -------------------------------------------------------------------------------- 1 | .product 2 | { 3 | padding: 20px; 4 | width: fit-content; 5 | background-color: darkgray; 6 | } 7 | 8 | .category 9 | { 10 | padding: 20px; 11 | width: fit-content; 12 | background-color: lightyellow; 13 | } 14 | 15 | .demo 16 | { 17 | background-color: yellow; 18 | padding: 30px; 19 | } -------------------------------------------------------------------------------- /usecontext-classcomp/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState,createContext } from 'react' 2 | import './App.css' 3 | import Product from './Product'; 4 | import Demo from './Demo'; 5 | 6 | 7 | export const TheContext = createContext() 8 | 9 | function App() { 10 | 11 | 12 | const [username,setUsername] = useState("Saurabh"); 13 | const [token,setToken] = useState("sa123") 14 | 15 | return ( 16 | <> 17 | 18 | 19 |

App Component {username}

20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | ) 31 | } 32 | 33 | export default App 34 | -------------------------------------------------------------------------------- /usecontext-classcomp/src/Category.jsx: -------------------------------------------------------------------------------- 1 | import { TheContext } from "./App" 2 | import { useContext } from "react" 3 | 4 | export default function Category(){ 5 | 6 | let u = useContext(TheContext); 7 | 8 | return ( 9 |
10 | Category Comp {u.username} {u.token} 11 | 12 | 15 |
16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /usecontext-classcomp/src/Demo.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | class Demo extends React.Component 4 | { 5 | constructor(props) 6 | { 7 | super(props); 8 | 9 | 10 | this.state={ 11 | country:"India", 12 | capital:"New Delhi" 13 | } 14 | 15 | 16 | 17 | 18 | } 19 | 20 | 21 | render(){ 22 | return ( 23 |
24 |

I am a class component

25 |

{this.props.name}

26 |

{this.state.country}

27 | 28 | 31 | 32 | 33 |
34 | ) 35 | } 36 | } 37 | 38 | 39 | 40 | export default Demo; -------------------------------------------------------------------------------- /usecontext-classcomp/src/Product.jsx: -------------------------------------------------------------------------------- 1 | import Category from "./Category"; 2 | 3 | export default function Product() 4 | { 5 | 6 | return ( 7 |
8 |

Product Comp

9 | 10 |
11 | ) 12 | } 13 | 14 | // export default Product; -------------------------------------------------------------------------------- /usecontext-classcomp/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /usecontext-classcomp/src/index.css: -------------------------------------------------------------------------------- 1 | * 2 | { 3 | margin: 0px; 4 | padding: 0px; 5 | box-sizing: border-box; 6 | } -------------------------------------------------------------------------------- /usecontext-classcomp/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /usecontext-classcomp/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /useeffect-api/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /useeffect-api/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /useeffect-api/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /useeffect-api/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /useeffect-api/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "useeffect-api", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.43", 18 | "@types/react-dom": "^18.2.17", 19 | "@vitejs/plugin-react": "^4.2.1", 20 | "eslint": "^8.55.0", 21 | "eslint-plugin-react": "^7.33.2", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.4.5", 24 | "vite": "^5.0.8" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /useeffect-api/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /useeffect-api/src/App.css: -------------------------------------------------------------------------------- 1 | 2 | .main 3 | { 4 | background-color: rgb(240, 240, 240); 5 | padding: 20px 100px; 6 | } 7 | 8 | .products 9 | { 10 | width: 100%; 11 | padding: 20px 0px; 12 | 13 | display: flex; 14 | column-gap: calc(25%/4); 15 | row-gap: 30px; 16 | flex-wrap: wrap; 17 | 18 | } 19 | 20 | .product 21 | { 22 | width: 15%; 23 | padding: 10px; 24 | background-color: white; 25 | display: flex; 26 | flex-direction: column; 27 | row-gap: 10px; 28 | border-radius: 10px; 29 | 30 | } 31 | 32 | .image-wrapper 33 | { 34 | width: 100%; 35 | height: 300px; 36 | display: flex; 37 | align-items: center; 38 | overflow: hidden; 39 | } 40 | 41 | .p-title 42 | { 43 | font-size: 18px; 44 | } 45 | 46 | .p-image 47 | { 48 | width: 100%; 49 | } 50 | 51 | @media screen and (max-width:400px) { 52 | 53 | .main 54 | { 55 | padding: 20px 30px; 56 | } 57 | 58 | .product 59 | { 60 | width: 100%; 61 | 62 | } 63 | 64 | } -------------------------------------------------------------------------------- /useeffect-api/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import './App.css' 3 | import Products from './Products' 4 | 5 | function App() { 6 | 7 | let [showProduct,setShowProduct] = useState(true); 8 | 9 | return ( 10 |
11 |

All Products

12 | 13 | {/* 16 | 17 | */} 20 | 21 | { 22 | 23 | showProduct===true? 24 | ( 25 | 26 | ): 27 | ( 28 |

Product Not Available

29 | ) 30 | 31 | } 32 | 33 |
34 | ) 35 | } 36 | 37 | export default App 38 | -------------------------------------------------------------------------------- /useeffect-api/src/Products.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react" 2 | 3 | 4 | function Products(){ 5 | 6 | 7 | 8 | //1. By Default useEffect is called for every render and rerender 9 | //2. if you pass a second param as a blank array it will be only called for first render 10 | //3. if you pass variables in dependency array - 11 | //useeffect will still be called for first render- 12 | // it will also be called if the value of the variable in the dependency array changes changes 13 | //4. You can have multiple useEffects in a single component 14 | 15 | // useEffect(()=>{ 16 | // console.log("Component Mounted"); 17 | 18 | // return ()=>{ 19 | // console.log("Component gone"); 20 | // } 21 | 22 | // },[price]) 23 | 24 | let [products,setProducts] = useState([]); 25 | 26 | useEffect(()=>{ 27 | 28 | fetch('https://fakestoreapi.com/products') 29 | .then((response)=>response.json()) 30 | .then((data)=>{ 31 | console.log(data); 32 | setProducts(data); 33 | }) 34 | .catch((err)=>{ 35 | console.log(err); 36 | }) 37 | 38 | },[]) 39 | 40 | 41 | 42 | return ( 43 |
44 | 45 | { 46 | products.map((product,index)=>{ 47 | 48 | return ( 49 |
50 |
51 | product 52 |
53 |

{product.title}

54 |

{product.price}

55 |
56 | ) 57 | 58 | }) 59 | } 60 | 61 |
62 | ) 63 | } 64 | 65 | export default Products 66 | -------------------------------------------------------------------------------- /useeffect-api/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /useeffect-api/src/index.css: -------------------------------------------------------------------------------- 1 | * 2 | { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | :root { 9 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 10 | } 11 | 12 | 13 | -------------------------------------------------------------------------------- /useeffect-api/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | // 8 | 9 | // , 10 | ) 11 | -------------------------------------------------------------------------------- /useeffect-api/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server:{ 8 | port:3000 9 | } 10 | }) 11 | --------------------------------------------------------------------------------