انت مشغل الـ AdBlock !!
ياريت تقفله لوسمحت 😊 😊
تنبيه هام ✋
إذا كانت الإعلانات مزعجة بالنسبة لك، فيُمكنك التبرع ب50$ وسيتم إيقاف الإعلانات لمدة شهر لجميع زوار الموقع 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك
⚠ تم إنشاء c4a.dev لمساعدتك على التركيز أثناء مُشاهدة الكورسات والإبتعاد عن إزعاج اليوتيوب
كيفية الشراء من الموقع
منطقة إعلانية
يُمكننا وضع إعلانك هنا 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك
سعر الإعلان 50$ فى الشهر
المشكلة ان الـ dark mode يتم تطبيقة فقط على الصفحة الحاليه فقط !!
الطريقة الشائعة هى عمل ملف يتم تخزين بداخله الـ data التى سوف تتغير فى المستقبل
context : عبارة عن ملف يتم تخزين بداخله مجموعة من الـ data ؛ وهذه الـ data سوف تتغير
👈 كمرحلة أولى: ظهور الـ data فى الموقع
import { createContext, useReducer } from "react";
const ThemeContexttt = createContext();
const initialData = { myName: "ali hassan" };
const reducer = () => {}
export function ThemeProvider({ children }) {
const [firstState, dispatch] = useReducer(reducer, initialData);
return (
<ThemeContexttt.Provider value={{ ...firstState}}>
{children}
</ThemeContexttt.Provider>
);
}
export default ThemeContexttt;
import {ThemeProvider} from "./context/ThemeContext";
<ThemeProvider>
<App />
</ThemeProvider>
import {useContext } from "react";
import ThemeContext from "../context/ThemeContext";
const Component = () => {
const {myName} = useContext(ThemeContext);
return (
<main>
<h2>{myName}</h2>
</main>
);
};
export default Component;
👈 كمرحلة ثانية: تغيير الـ data فى الصفحة
import { createContext, useReducer } from "react";
const ThemeContexttt = createContext();
const initialData = { myName: "ali hassan" };
const reducer = (firstState, action) => {
switch (action.type) {
case "CHANGE_NAME":
return { ...firstState, myName: action.newValue };
default:
return firstState;
}}
export function ThemeProvider({ children }) {
const [firstState, dispatch] = useReducer(reducer, initialData);
const changeName = (newName) => {
dispatch({ type: "CHANGE_NAME", newValue: newName });
};
return (
<ThemeContexttt.Provider value={{ ...firstState, changeName }}>
{children}
</ThemeContexttt.Provider>
);
}
export default ThemeContexttt;
import {ThemeProvider} from "./context/ThemeContext";
<ThemeProvider>
<App />
</ThemeProvider>
import {useContext } from "react";
import ThemeContext from "../context/ThemeContext";
const Component = () => {
const {myName} = useContext(ThemeContext);
return (
<main>
<h2>{myName}</h2>
<button
onClick={() => changeName("ELRAYEK")}
>
Change name
</button>
</main>
);
};
export default Component;
ياريت تقفله لوسمحت 😊 😊
تنبيه هام ✋
إذا كانت الإعلانات مزعجة بالنسبة لك، فيُمكنك التبرع ب50$ وسيتم إيقاف الإعلانات لمدة شهر لجميع زوار الموقع 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك