React Food Ordering App الجزء الأول

منذ 3 أشهر imadbelasri Reactjs
RS

فهاد ال projet الجديد ب React 18 غادي نقادو React Food Ordering App لي هي واحد ل app لي كتمكن المستخدم من أنه يطلب أكلات منبعد كيتزادو فسلة المنتجات ولي من بعد ممكن يعدل أو يحذف منها.

المستخدم ممكن يختار الأكلات على حسب الصنف ديال كل وحدة.


نظرة سريعة بالفيديو


1- إضافة les packages لي غادي نحتاجو

أول حاجة زيد react project setup ب 

npx create-react-app  project_name

من بعد فل package.json زيد les packages لي معندكش ودير 

npm install 

يمكنلك أيضا ت copier وت coller ل contenu عندك فنفس ل fichier ودير 

npm install 

الكود ديال الملف هو :

                                                    
                                                        //
{
  "name": "resto-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@popperjs/core": "^2.11.5",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.2.0-beta1",
    "bootstrap-icons": "^1.8.3",
    "popper.js": "^1.16.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "6",
    "react-scripts": "5.0.1",
    "sweetalert2": "^11.4.18",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
                                                    
                                                

2- إضافة Bootstrap 5 & Bootstrap 5 Icons و React Router V6

فل fichier index.js غادي نزيد Bootstrap 5 ول Icons و React Router V6 ل App.

الكود ديال الملف بعد التعديل :

                                                        
                                                            //
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import 'bootstrap-icons/font/bootstrap-icons.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
                                                        
                                                    

3- إضافة معلومات عشوائية

داخل ل src غادي تزيد dossier data وفيه زيد fichier food.js لي فيه الكود التالي :

                                                        
                                                            //
export const foods = [
    {
        id: 1,
        food_name: "Hamburger",
        food_desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
        food_image: "https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246__480.jpg",
        food_price: "28",
        category_id: 1
    },
    {
        id: 2,
        food_name: "Pizza",
        food_desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
        food_image: "https://cdn.pixabay.com/photo/2017/12/10/14/47/pizza-3010062__480.jpg",
        food_price: "24",
        category_id: 2
    },
    {
        id: 3,
        food_name: "Salade",
        food_desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
        food_image: "https://cdn.pixabay.com/photo/2021/01/10/04/37/salad-5904093__480.jpg",
        food_price: "4",
        category_id: 3
    },
    {
        id: 4,
        food_name: "Fish",
        food_desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
        food_image: "https://cdn.pixabay.com/photo/2014/11/05/15/57/salmon-518032__480.jpg",
        food_price: "10",
        category_id: 4
    },
    {
        id: 5,
        food_name: "Tajine",
        food_desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
        food_image: "https://cdn.pixabay.com/photo/2018/05/05/00/41/food-3375436__480.jpg",
        food_price: "20",
        category_id: 5
    }
];

export const categories = [
    {
        id: 1,
        name: "Hamburgers"
    },
    {
        id: 2,
        name: "Pizzas"
    },
    {
        id: 3,
        name: "Salades"
    },
    {
        id: 4,
        name: "Fishs"
    },
    {
        id: 5,
        name: "Tajines"
    }
];
                                                        
                                                    

4- إضافة Navbar Component

ف src دائما غادي تزيد dossier components وفيه زيد fichier Navbar.js لي فيه الكود التالي :

                                                        
                                                            //
import React from 'react'
import { Link } from 'react-router-dom'

export default function Navbar({cartItems}) {
  return (
    <nav className="navbar navbar-expand-lg bg-danger navbar-dark rounded">
      <div className="container-fluid">
        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarSupportedContent">
          <ul className="navbar-nav mx-auto mb-2 mb-lg-0">
            <li className="nav-item">
              <Link to='/' className="nav-link active" aria-current="page">
                <i className="bi bi-house"></i> Home
              </Link>
            </li>
            <li className="nav-item">
              <Link to='/cart' className="nav-link active" aria-current="page">
                <i className="bi bi-cart"></i> Cart ({cartItems.length})
              </Link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  )
}
                                                        
                                                    

5- إضافة Home Component

من بعد فنفس dossier components زيد fichier Home.js لي فيه غادي تكون la liste ديال المنتجات و لي فيه غادي يكون الكود التالي :

                                                        
                                                            //
import React, { useContext, useState } from 'react';
import FoodItem from './FoodItem';
import { ShoppingContext } from "./context/ShoppingContext";
import { Link } from 'react-router-dom';


export default function Home() {
    const { foods, categories } = useContext(ShoppingContext);
    const [foodList,setFoodList] = useState(foods);

    const filterFoods = (category_id) => {
        setFoodList(foodList => foods.filter(food => food.category_id === category_id));
    }

    return (
        <div className="card rounded-0">
            <div className="card-header bg-white d-flex justify-content-center align-items-center">
                <Link to="#!" onClick={() => setFoodList(foodList => foods)} className="mx-4 text-decoration-none text-black">
                    All
                </Link>
                {
                    categories.map(category => (
                        <Link to="#!" onClick={() => filterFoods(category.id)} key={category.id} className="mx-4 text-decoration-none text-black">
                            {
                                category.name
                            }
                        </Link>
                    ))
                }
            </div>
            <div className="card-body">
                <div className="row">
                    {
                        foodList.map(food => (
                            <FoodItem  key={food.id} food={food}/>
                        ))
                    }
                </div>
            </div>
        </div>
    )
}