تصميم واجهة مستخدم تحاكي نظام Windows 11 باستخدام React هو مشروع مثير يمنحك فرصة لتعلم وتطبيق العديد من التقنيات الحديثة في تطوير الويب. يهدف هذا المشروع إلى إنشاء بيئة تفاعلية تشبه واجهة Windows 11، مع التركيز على تصميم شريط المهام، قائمة “Start”، أيقونات سطح المكتب، والنوافذ التفاعلية التي يمكن سحبها.
تصميم واجهه windows 11 باستخدام React
المتطلبات
تثبيت React
نقوم بانشاء مشروع جديد باسم windows11-ui باستخدام الكود التالي
npx create-react-app windows11-ui
بعد ذلك ندخل علي ملف المشروع باستخدام الامر التالي
cd windows11-ui
تثبيت tailwindcss
npm install tailwindcss
npx tailwindcss init
افتح ملف tailwind.config.js
وأضف الكود التالي:
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
ثم افتح ملف src/index.css وأضف الكود التالي:
@tailwind base;
@tailwind components;
@tailwind utilities;
تثبيت مكتبة FontAwesome
// تثبيت الكود التالي
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
// اضافة الكود التالي اعلي الصفحات المراد استدعاءها
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
تصميـــــــم واجهـــــــــــه windows 11 باستخـــــدام React انشاء المكونات الرئيسية
سوف نقوم بانشاء فولدر داخل js باسم Components والذي سيحتوي علي جميع ملفات البرنامج بداخلة
ملف Taskbar.js
صفحة تمثل شريط المهام، يحتوي على ايقونة search و ايقونة home بالاضافة الي زر “Start” الذي يفتح أو يغلق قائمة StartMenu
.
// src/components/Taskbar.js
import React, { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSearch, faHome } from '@fortawesome/free-solid-svg-icons';
import StartMenu from './StartMenu';
const Taskbar = () => {
const [isStartMenuOpen, setStartMenuOpen] = useState(false);
const toggleStartMenu = () => {
setStartMenuOpen(!isStartMenuOpen);
};
return (
);
};
export default Taskbar;
ملف Window.js
مكون نافذة منبثقة ثابتة يمكن استخدامها لعرض المحتوى.
// src/components/Window.js
import React from 'react';
const Window = ({ title, children }) => {
return (
{title}
{children}
);
};
export default Window;
ملف DesktopIcon.js
صفحة تمثل أيقونات سطح المكتب مع تأثير عند التمرير عليها.
// src/components/DesktopIcon.js
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
const DesktopIcon = ({ icon, label }) => {
return (
{label}
);
};
export default DesktopIcon;
ملف StartMenu.js
صفحة تمثل قائمة تظهر عند الضغط على زر “Start” في شريط المهام، ويحتوي على اختصارات برامج.
// src/components/StartMenu.js
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCode, faServer, faLaptopCode } from '@fortawesome/free-solid-svg-icons';
const StartMenu = ({ isOpen }) => {
return (
-
VSCode
-
XAMPP
-
Node.js
);
};
export default StartMenu;
تعديل ملف App.js
افتح الملف src/App.js
وقم بتعديل الكود بالاتي
// src/App.js
import React from 'react';
import Taskbar from './components/Taskbar';
import Window from './components/Window';
import DesktopIcon from './components/DesktopIcon';
import { faFolder, faFile, faTrashAlt, faCogs, faMusic, faCamera } from '@fortawesome/free-solid-svg-icons';
function App() {
return (
This is a window content area.
);
}
export default App;
لجعل النافذة قابلة للسحب والتحريك
تثبيت مكتبة react-draggable
npm install react-draggable
تعديل ملف window.js
// src/components/Window.js
import React from 'react';
import Draggable from 'react-draggable';
const Window = ({ title, children }) => {
return (
{title}
{children}
);
};
export default Window;
Resuilt
Sharing to