Abdullah Muhammad

خطوات بسيطه وسهله بإذن الله 1- قم بإنشاء مشروع ريأكت باستخدام create-react-app 2- قم بتثبيت tailwind npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 3- قم بتثبيت CRACO من خلاله يمكنك التعديل على الاعدادات الخاصه ب PostCSS npm install @craco/craco 4- بعد تثبيت CRACO قم بالتوجه الى فايل package.json و عدل الجزء الخاص بال scripts حتى يكون كالتالي: "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject" } 5- بعد ذلك في المسار الرئيسي (root path) لمشروعك قم بإنشاء فايل بإسم craco.config.js وأضف إليه الكود التالي: module.exports = { style: { postcss: { plugins: [ require('tailwindcss'), require('autoprefixer'), ], }, }, } 6- قم بتشغيل الامر التالي لانشاء الملف المسئول عن إعدادات tailwind npx tailwindcss init 7- بعد تشغيل الامر السابق قم بفتح الملف tailwind.config.js وعدل قيمة ال purge الى التالي: purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], 8- بعد ذلك قم بفتح ملف index.css الموجود داخل فولدر src الذي يتم إنشاءه تلقائيا باستخدام create-react-app وأضف إليه الكود التالي: @tailwind base; @tailwind components; @tailwind utilities; 9- الخطوة الأخيره تأكد من عمل import لملف index.css داخل ملف ال index.js الموجود أيضا داخل فولدر src والذي يتم إنشاءه تلقائيا أيضا import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; // هذا الملف الذي عدلناه مسبقا import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); وبهذا يمكنك إستخدام tailwind مع React وإذا أردت إنشاء ملفات css دون إستخدام tailwind لبعض التخصيص الغير متاح في tailwind يمكنك إنشاء الملف بطريقة عاديه ومن ثم عمل import له في ملف ال index.css بعد ال @tailwind utilites

هناك عدة طرق لذلك منها التالي بالنسبه لل action و ال reducer يمكنك التحويل للاتي import createAction from '@reduxjs/toolkit' const increaseCounter = createAction('INCREMENT'); const decreaseCounter = createAction('DECREMENT'); بعد ذلك يمكنك نداء الفانكشن عند الحاجه لتنفيذ الاكشن والاكشن هنا عند النداء عليه يأخذ argument واحد ويكون عباره عن ال payload increaseCounter(); decreaseCounter(payload); import { createReducer } from '@reduxjs/toolkit'; const counterReducer = createReducer( [], { INCREMENT: (state, action) => {وهنا اللوجيك المسئول عن عملية ال Increment}, DECREMENT: (state, action) => {وهنا اللوجيك المسئول عن عملية ال decrement} }); ويمكنك دمج الخطوتين السابقتين في ملف واحد وهناك طريقة أخرى ايضا يمكنك من خلالها الدمج بين ال reducer وال actions وذلك باستخدام createSlice كالاتي : import { createSlice } from '@reduxjs/toolkit'; const counterStoreSlice = createSlice({ name: 'storeName', initialState: [], reducers: { increaseCounter: (state, action) => {وهنا اللوجيك الخاص بعملية ال Increment}, increaseCounter: (state, action) => {وهنا اللوجيك الخاص بعملية ال Decrement} } }); وللحصول على الاكشن const { increaseCounter } = counterStoreSlice.actions; ولاستخدام الاكشن increaseCounter(); وللحصول ال reducer const counterReducer = counterStoreSlice.reducer; بعد ذلك نحتاج الى أن نعطي هذا ال reducer الى ال store عن طريق الكود التالي import { configureStore } from '@treactjs/toolkit'; const store = configureStore({ reducer: { counter: counterReducer } }); وبعد ذلك يمكنك إستخدام ال store الذي تم إنشاءه كالتالي : import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; // REDUX import { Provider } from 'react-redux'; import store from 'المسار الذي قمت فيه بإنشاء الستور باستخدام ال redux toolkit '; ReactDOM.render( <Provider store={store}> <React.StrictMode> <App /> </React.StrictMode> </Provider>, document.getElementById('root'), );

لعملية نشر حزمة خاصه بك على npm لابد من خطوتين 1- انشاء الحزمه 2- نشر الحزمه على npm عن طريق الخطوات التاليه: 1- أن تقوم بإنشاء حساب على npmjs 2- من خلال الطرفيه (Terminal) لابد من تسجيل الدخول بالحساب عن طريق الأمر التالي: npm login بعد ذلك تقوم بإدخال البيانات username password Email 3- بعد ذلك قم بالذهاب الى الفولدر الذي يحتوي على الملفات التي تريد تحويلها الى حزمه باستخدام الأمر التالي cd Folder/packageFolder مع مراعاة كتابة اسم المجلد الموجود فيه الملفات الخاصه بك 4- استخدام الأمر التالي: npm init هذا الأمر سوف يقوم بإنشاء ملف package.json قم بإدخال البيانات الخاصه بالحزمه الخاصه بك والخطوه الأخيره لنشر الحزمه استخدم الأمر التالي: npm publish ومبارك عليك تم نشر الحزمه الخاصه بك. لابد أن تأخذ في الحسبان أن إسم الحزمه فريد وغير موجود قبل ذلك على npm.

يجب عليك أولا أن تتعلم كل مايخص ال hooks وماهي شروط استخدامها وأن تركز بشكل مبدأي علي ال hooks الخاصه ب state مثل useState بالاضافة الى ان تتقن ال useEffect وهو هووك تستخدمه لادارة ال دورة حياة المكون والتخلي عن componentDidMount وغيرها. بالتوفيق إن شاء الله.

ينقصك خطوة أخيره كي تحصل على البيانات وهي كالأتي: const getLatest = userId => { const url = API + '/user-content/' + userId; // .أحصل على نتائج قديمة فقط return fetch(url).then(response => response.json()).then(data => data); // هنا تحصل على الداتا وتستطيع استخدامها بعد ذلك };

جميل جدا أستخدامك لل useEffect هنا كما أنك راعيت عملية ال clean عند ازالة الكمبوننت باستعمالك clearInterval الكود داخل ال useEffect يعمل في أول مرة فقط لانك حددت قوسين المصفوفه ومعناه أن تعمل مرة واحدة فقط وبالتالي سوف يتغير الرقم من 0 الى 1 وبعد ذلك لن يعمل الكود مرة أخرى. ولكنك تريد للكود داخل ال useEffect ان يتم تنفيذه في كل مرة تتغير قيمة المتغير clock حتى يعمل عداد الساعه وبالتالي لابد من اضافة المتغير clock داخل قوسي المصفوفه ففائدة القوسين هنا أن نخبر ال useEffect ان ينفذ مابداخلها طالما مابداخل القوسين يتغيران فيصبح الكود في النهايه كالاتي import React from 'react' function Time() { // القيمة هنا لا تزيد عن 1 const [clock, setClock] = React.useState(0); React.useEffect(() => { const timer = window.setInterval(() => { // أعتقد أن هنا يوجد خطأ ما setClock(clock + 1); }, 1000); return () => { window.clearInterval(timer); }; }, [clock]); return ( <div>Seconds: {clock}</div> ); } ReactDOM.render(<Time />, document.getElementById('app')); ولكن هذا الحل يضر بالاداء الخاص بالتطبيق كوننا نقوم بإنشاء timer جديد في كل مره ولذا ف الحل الامثل ان نستخدم ال functional setClock فيصير الكود كالاتي import React from 'react' function Time() { // القيمة هنا لا تزيد عن 1 const [clock, setClock] = React.useState(0); React.useEffect(() => { const timer = window.setInterval(() => { // أعتقد أن هنا يوجد خطأ ما setClock(clock => clock + 1); }, 1000); return () => { window.clearInterval(timer); }; }, [clock]); return ( <div>Seconds: {clock}</div> ); } ReactDOM.render(<Time />, document.getElementById('app'));

دعنا نحلل الامر ببساطه نود أن نقوم بحماية مكون معين من أن يتم عرضه على غير المسجلين فلذا نحتاج الى أمر يساعدنا بعملية فحص هل هذا اليورز مسجل أم لا في حالة كان مسجل تعرض له وإلا فيتم تحويله الى صفحة تسجيل الدخول ولتنفيذ ذلك: في البدايه نحتاج الى ان شاء private route component حتى يسهل علينا العمل وظيفة هذا المكون ان يقوم بعملية تأكيد هل هذا اليوزر مسجل ويفحص هل هناك توكن مسجل في localStorage ام لا إذا وجده يعرض له الكومبوننت والا فيقوم بتحويله الى مسار أخر تحدده وهنا هو صفحة تسجيل الدخول. function PrivateRoute({ children, ...rest }) { const auth = // هنا فانكشن تقوم بفحص هل اليوز مسجل ام لا بفحصل اللوكال ستورج والتأكد من أن التوكن صحيح return ( <Route {...rest} render={(props) => auth ? (children) : (<Redirect to={{ pathname: '/login', state: { from: props.location } }} />) } /> ) } بعد ذلك يمكنك استخدامه داخل ال Router كالاتي <PrivateRoute path='/protected'> <Protected/> //هنا الكمبوننت التى تتطلب تسجل الدخول </PrivateRoute> بدلا من <Route path="/protected" component={Protected}/> وبهذا يمكنك استخدام المكون PrivateRoute مع اي مسار تود حمايته.

هذا خطأ قاتل أن تستخدم ال setTimeout داخل ال render لماذا؟ دعنا نحلل الكود بشكل بسيط في اول عملية render للكود سوف تسير الامور بالشكل المتوقع وبعد ثلاث ثوان سوف يتم بالفعل تغير قيمة ال ready في ال State ومن ثم ....؟ هنا تكمن المشكله بعد أي عملية تعديل على ال state يتم تنفيذ render مرة أخرى ولكن في هذه المره سوف تكون قيمة ready بالفعل هي true وستتكرر العمليه وسيظهر لك الخطأ في الكونسول وبعد فتره سوف يقف المتصفح الخاص بك عن العمل لانك ادخلته في حلقة لانهائيه من تنفيذ ال render. وبالتالي ف الحل ان تستخدم ال setTimeout داخل ال componentDidMount componentDidMount() { setTimeout(function () { this.setState({ ready: true }); }, 3000); } وهنا تكمل فائدة componentDidMount حيث سيتم تنفيذ الكود بداخلها مرة واحده فقط بعد تمام عملية ال render للمرة الاولى فإذا ماحللنا الكود بعد التعديل في المرة الاولى سوف تسير الامور بالشكل المتوقع وبعد ثلاث ثوان سوف يتم تغير قيمة ال ready داخل ال State وبالتالي يتم تنفيذ عملية ال render مرة أخرى وتظهر أيضا النتيجه المتوقعه ومن ثم لايحدث شئ ولا يتم تنفيذ ال setTimeout مرة أخرى

اذا ما نظرنا الى الطريقة الاولى سنجد الاتي: نحن نقوم بتخزين النتائج القادمه من ال API مباشرة الى friends وكل النتائج السابقه ستحذف أما الطريقة الثانيه فنحن نضيف النتائج الجديده الى القديمه ولكن مال الفرق الجوهري حقا بين الاسلوبين الاسلوب الثاني اذا مالاحظت فإنه يكون لديك وصول كامل الى ال state الحاليه قبل ان تقوم بأي تعديل علىيها فيمكنك هنا ان تفحص مثلا اذا كان هناك اسم مكرر في قائمة الاصدقاء ف تحذفه أو تقوم بأي عمليات أخرى على الاستيت القديمه والقيمه الجديده ومن ثم تخزن القيم النهائيه في ال state وكل ذلك عكس الطريقة الاولى حيث لا يمكنك عمل ذلك. وهناك سبب أخر لوجود مثل هذا التكنيك رقم 2 وهو أن ريأكت تقوم بعمل مايسمى ب batching لل setState بمعنى اذا تم استدعاء setState أكثر من مره على التوالي كالاتي مثلا: state = { count: 0 } updateCount = () => { this.setState({ count: this.state.count + 1}); this.setState({ count: this.state.count + 1}); this.setState({ count: this.state.count + 1}); this.setState({ count: this.state.count + 1}); } سوف يتم تنفيذ الأخيرة فقط بمعنى ان ال count في النهايه سوف يزيد بمقدار واحد فقط وتصبح قيمة ال count تساوي واحد وللتغلب على هذا نستخدم الاسلوب الثاني حيث يكون لدينا الوصول على ال state قبل التعديل عليها ونضيف عليها واحد كالاتي: updateCount = () => { this.setState(prevstate => ({ count: prevstate.count + 1})); this.setState(prevstate => ({ count: prevstate.count + 1})); this.setState(prevstate => ({ count: prevstate.count + 1})); this.setState(prevstate => ({ count: prevstate.count + 1})); } فتصبح قيمة ال count في النهايه تساوي 4.