Vite + React

├── src ├── index.css ├── main.jsx ├── App.jsx ├── components │ └── Card.jsx └── Pages │ └── Meats.jsx ├── vite.config.js ├── .gitignore ├── index.html ├── package.json ├── README.md ├── eslint.config.js └── public └── vite.svg /src/index.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | import tailwindcss from '@tailwindcss/vite' 4 | 5 | // https://vite.dev/config/ 6 | export default defineConfig({ 7 | plugins: [react(), tailwindcss()], 8 | }) 9 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import { BrowserRouter, Route, Routes } from "react-router" 2 | import Card from "./components/Card" 3 | import Meats from "./Pages/Meats" 4 | 5 | function App() { 6 | 7 | return ( 8 | <> 9 | 10 | 11 | }/> 12 | 13 | 14 | 15 | ) 16 | } 17 | 18 | export default App 19 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/components/Card.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router' 3 | 4 | const Card = ({meals}) => { 5 | return ( 6 |

7 |

8 |

9 |

{meals?.strMeal}

10 |

{meals?.strInstructions.slice(0, 100)}...

11 | Read More 12 |

13 |

14 | ) 15 | } 16 | 17 | export default Card -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@tailwindcss/vite": "^4.1.11", 14 | "react": "^19.1.0", 15 | "react-dom": "^19.1.0", 16 | "react-router": "^7.7.1", 17 | "tailwindcss": "^4.1.11" 18 | }, 19 | "devDependencies": { 20 | "@eslint/js": "^9.30.1", 21 | "@types/react": "^19.1.8", 22 | "@types/react-dom": "^19.1.6", 23 | "@vitejs/plugin-react": "^4.6.0", 24 | "eslint": "^9.30.1", 25 | "eslint-plugin-react-hooks": "^5.2.0", 26 | "eslint-plugin-react-refresh": "^0.4.20", 27 | "globals": "^16.3.0", 28 | "vite": "^7.0.4" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /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) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. 13 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import { defineConfig, globalIgnores } from 'eslint/config' 6 | 7 | export default defineConfig([ 8 | globalIgnores(['dist']), 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | extends: [ 12 | js.configs.recommended, 13 | reactHooks.configs['recommended-latest'], 14 | reactRefresh.configs.vite, 15 | ], 16 | languageOptions: { 17 | ecmaVersion: 2020, 18 | globals: globals.browser, 19 | parserOptions: { 20 | ecmaVersion: 'latest', 21 | ecmaFeatures: { jsx: true }, 22 | sourceType: 'module', 23 | }, 24 | }, 25 | rules: { 26 | 'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }], 27 | }, 28 | }, 29 | ]) 30 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Pages/Meats.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | import Card from '../components/Card' 3 | import { Link } from 'react-router' 4 | 5 | const Meats = () => { 6 | const[meals, setMeals] = useState([]) 7 | const[loading, setLoading] = useState(true) 8 | const[error, setError] = useState(false) 9 | 10 | useEffect(()=> { 11 | fetch("https://www.themealdb.com/api/json/v1/1/search.php?s=") 12 | .then((response) => response.json()) 13 | .then((data) =>{ 14 | setMeals(data.meals || []); 15 | setLoading(false); 16 | }) 17 | .catch((err)=>{ 18 | setError(err.message) 19 | setLoading(false) 20 | }) 21 | },[]) 22 | 23 | console.log(meals); 24 | 25 | return ( 26 |

27 |

28 |

Data Fetching from the API

29 |

30 |

31 | { 32 | loading && 33 |

Loading.....

34 | } 35 | { 36 | error && 37 |

Something went wrong!

38 | } 39 |

40 | {meals.slice(0, 8).map((meals, index)=>( 41 | 42 | ))} 43 |

44 | Read More 45 |

46 |

47 | ) 48 | } 49 | 50 | export default Meats --------------------------------------------------------------------------------