Rayden Storm

كيف يمكن تمرير handleSomething الى Post بدون أن أنقل الدالة handleSomething من المكون List import React from 'react'; function List(props) { const handleSomething = () => { ... } return ( <div> <h1>List</h1> {props.children} </div> ) } function Post(props) { return ( <div> <button onClick={props.handleSomething}>send</button> </div> ) } export default function Home() { return ( <div> <List> <Post></Post> </List> </div> ); }

لاحظت في بعض المكتبات أنهم أحيانا في توثيقاتهم يضعون props بدون قيمة لتفعيل خاصية ما مثلا <Button disabled>send</Button> هل وضع disabled بهذا الشكل يعني أنها تأخذ القيمة true؟

هل هناك مكتبات تستخدم لبناء واجهات المستخدم أحسن من bootstrap ويمكن تغيير ملامح الواجهة عبر المكتبة بسهولة ف bootstrap جيدة لكنها تبدو لي محدودة نوعا ما واذا أردت التعديل عل مكون من مكوناتها فيجب عليا كتابة تنسيقات كثيرة لتغيير ملامح المكون وهذا العناء قد يجعلني أصمم الموقع ب css بدلا من استخدام المكتبة بالمختصر أنا أبحث عن مكتبة تحتوي على مكونات كثيرة وتلك المكونات يمكن تغيير ملامحها جملة واحدة باستخدام props أعطيها لتلك المكونات

أنا أكتشف مكتبة react-share لمشاركة المحتوى ولدي موقع أريد تضمينها فيه لكن بطريقة أنه فعلا اذا قام المستخدم بنشر الموقع في facebook اطلق طلب للخادم لاعطاء المستخدم نقاط أو فتح مزايا import React from 'react'; import { FacebookShareButton, LinkedinShareButton, TelegramShareButton, TwitterShareButton, WhatsappShareButton, } from 'react-share'; export default function test() { return ( <div> <FacebookShareButton></FacebookShareButton> <LinkedinShareButton></LinkedinShareButton> <TelegramShareButton></TelegramShareButton> <TwitterShareButton></TwitterShareButton> <WhatsappShareButton></WhatsappShareButton> </div> ); } لكن عند الضغط على زر فايسبوك مثلا تنبثق نافذة المشاركة وسؤالي هو كيف يمكنني أن أتأكد أن المستخدم فعلا قام بمشاركة الموقع في حساب الفايسبوك الخاص به ؟

عند زيارة الصفحة التي تحتوي هذا المكون import React from 'react'; import axios from 'axios'; export default function test() { const [data, setData] = useState(null); useEffect(() => { axios .get(endpoint) .then((res) => { setData(res.data); }) .catch((err) => { console.log(err); }); }, [input]); return ( <div> {data && data.map((post) => ( <div> <img src={post.image} alt="" /> <h1>{post.title}</h1> </div> ))} </div> ); } ينطلق الطلب الى الخادم ويجلب ال posts بصورهم والصور عند الدخول الى ال network في أدوات الطور في المتصفح يكونون pending ثم يحملون واحدة تلو الأخرى المشكلة عندما أذهب الى صفحة أخرى تحتوي على طلب مماثل للخادم أجد ان الطلب السابق في ال network مازال يحمل الصور المتعلقة بالطلب السابق وهذا ينتج عنه ثقل في جلب المحتوي المتعلق بالصفحة الجديدة التي انتقلت لها وأحاول ايجاد طريقة بحيث عند استخدام react-router-dom للانتقال الى صفحة أخرى أقوم بتعطيل الطلب السابق للخادم.

لدي extension في vscode تمكنني من كتابة اختصارات ثم الضغط على زر tab فتنبثق الشيفرة مثلا عند كتابة rfc والضغط على زر tab تنبثق شيفرة مكون الدالة import React from 'react' export default function test() { return ( <div> </div> ) } هل يمكنني برمجة اختصارات خاصة بي بحيث مثلا أصنع اختصارات ل redux toolkit بحيث عند كتابة rrslice ينبثق المثال حول ال slice لأشرع في التعديل عليه مباشرة import { createSlice } from '@reduxjs/toolkit' export const counterSlice = createSlice({ name: 'counter', initialState: { value: 0, }, reducers: { increment: (state) => { // Redux Toolkit allows us to write "mutating" logic in reducers. It // doesn't actually mutate the state because it uses the Immer library, // which detects changes to a "draft state" and produces a brand new // immutable state based off those changes state.value += 1 }, decrement: (state) => { state.value -= 1 }, incrementByAmount: (state, action) => { state.value += action.payload }, }, }) // Action creators are generated for each case reducer function export const { increment, decrement, incrementByAmount } = counterSlice.actions export default counterSlice.reducer

كل الاستخدامات التي رأيتها حول react داءما ما تبين أن واجهات المواقع المبنية ب react تطور وحدها وليست ملازمة ل خادم في مجلد واحد وكل دروس الاستظافات المتوفرة في الانترنت توضح فقط كيف يتم استظافة موقع react لوحده وسؤالي هو هل يمكن تطوير موقع بواجهة react وخادم جنب الى جنب واستظافتهم في مكان واحد مع بعضهم ؟

مرحبا أنا أكتشف مكتبة react-i18next وقد قمت باتباع خطوات التثبيت حسب توثيق الموقع الرسمي ووصلت الى هذه الخطوة وكل شئ يعمل بسلاسة import React from 'react'; // the hook import { useTranslation } from 'react-i18next'; function MyComponent () { const { t, i18n } = useTranslation(); return <h1>{t('Welcome to React')}</h1> } وسؤالي هو ماذا ان أردت تغيير اللغة مثلا باضافة زر للتغيير مع العلم لدي لغتين en و ar import React from 'react'; // the hook import { useTranslation } from 'react-i18next'; function MyComponent() { const { t, i18n } = useTranslation(); const changeLanguage = () => { //تغيير اللغة } return ( <div> <button onClick={changeLang}>change</button> <h1>{t('Welcome to React')}</h1> </div> ); }

لماذا عند ايصال hook مصطنعة ب redux عن طريق connect تتوقف عن العمل وعند نزع التوصيل ترجع للعمل عادي ويمكنني استخدامها import { useState } from 'react'; import { connect } from 'react-redux'; function useForm() { const [state, setState] = useState(initialState); return [state, setState]; } const mapDispatchToProps = (dispatch) => { return { postForm: (state) => dispatch(formForm(state)) }; }; export default connect(null, mapDispatchToProps)(useForm);

في select العادي يمكننا استخراج قيمته كما نستخرجها من input عادي لكن ماذا ان كان لدينا select يقبل خيارات متعددة كيف يمكننا التعامل معه ووضع قيمه في ال state import React from 'react'; export default function Select() { const [state, setState] = useState() const handleChange = (e) => { setState(????) } return ( <div> <select name="select" multiple={true} onChange={handleChange}> <option value={1}>First option</option> <option value={2}>Second option</option> <option value={3}>Third option</option> </select> </div> ); }

كيف يمكنك تغيير عنوان url من / shop / Clothes / Dresses إلى / shop / Clothes / Dresses? color = blue في react-router بدون استخدام <Link>؟

يمكننا عمل loop على قائمة في react باستخدام map وذلك لانتاج مكونات تحمل بيانات القائمة لكن ماذا ان كان الرد من الخادم عبارة على object يحتوي objects كيف يمكننا عمل loop على ذلك ال object لتحقيق نفس النتيجة التي نحققها باستخدام loop على قائمة

في مكون React الخاص بي ، لدي زر مخصص لإرسال بعض البيانات عبر axios عند النقر فوقه. أحتاج إلى أن يحدث ذلك فقط في المرة الأولى ، أي تعطيل الزر بعد استخدامه لأول مرة. export default function Send() { const handleSubmit = () => { axios.post(...).then(res => {...}).catch(err => ...) } return ( <div> .... <button onClick={handleSubmit}>send</button> </div> ) }

لدي مكون شبيه بهذا import React from 'react' export default function test() { const changeColor = (color) => {...} return ( <div> <Post></Post> </div> ) } وأريد عند وضع الفأرة على المكون Post أن أستدعي الدالة changeColor

أنا أحاول استخدام React-Router وأواجه مشكلات ف حتى يكون أحد الروابط نشطًا. إذا قمت بالنقر فوق أي من علامات الارتباط ، فستبدأ العناصر النشطة في العمل. ومع ذلك ، أود أن يكون Home Link نشطًا بمجرد بدء التطبيق لأن هذا هو المكون الذي يتم تحميله في المسار /. هل هناك أي طريقة للقيام بذلك؟ const Router = () => ( <Router> <Switch> <Route path="/about"> <About /> </Route> <Route path="/users"> <Users /> </Route> <Route path="/"> <Home /> </Route> </Switch> </Router> )

أنا الأن أستظيف مشاريعي على netlify بما أنها مجانية وأريد ان أعرف ان كان هناك أماكن أخرى مجانية لاستظافة مشاريع react وأيضا أيضا أريد معرفة ما ان كانت الاستظافات المجانية ستؤثر على كفاءة عمل المشروع واذا كان الجواب نعم ما الحل هل يجب علي استظافة مشروعي في مكان أخر مدفوع ?

لقد قمت مسبقا ببرمجة مشاريع صغيرة react بحيث أترك الهيكلة الأولى للمجلدات أي مجلد component داخل src وأضيف مجلد أسميه pages وأكمل العمل وهذا لم يكن يزعجني الى حد ما الى أن بدات بتطوير مشروع خاص بي و زاد حجمه وخرج عن السيطرة واصبحت أعاني للبرمجة على المشروع وسبب لي ذلك التوتر و أصبح عمل يأخذ 5 دقئق أقوم به في 15 دقيقة لذا أنا أبحث عن هيكلة للمجلدات معمول بها تزيل كل هذا العناء حتى لا اقع في هذا مستقبلا .

لدي صفحة تواصل في مشروع react المفروض أقوم ببرمجتها لترسل ايميل لبريد الكتروني معين والموقع ليس مربوط بسيرفر وأنا أبحث عن مكتبة أو طريقة تمكنني من تحقيق الغرض .

لدي سيرفر برمجت عليه أليات الدخول والتسجيل وفي الحالتين يكون الرد من السيرفر ب token وذلك الtoken مبرمج لتنتهي صلاحيته في ساعة ولقد قمت بربط السيرفر بمشروع react وأقوم بالتسجيل أو الدخول و أجلب ال token وأقوم بتخزينه في ال localstorage وعلى أساسه أحدد ما اذا المستخدم مسجل للدخول أولا المشكل هنا كيف أعرف أن token انتهت صلاحيته لأقوم بحذفه من localstorage وتسجيل الخروج

السلام عليكم أريد استخدام redux tollkit في مشاريعي المستقبلية واريد خطوات مشروحة للتحويل من الشيفرة التقليدية الى شيفرة reduxtoolki وهذا مثال عن الشيفرة التقليدية index.js 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/store'; ReactDOM.render( <Provider store={store}> <React.StrictMode> <App /> </React.StrictMode> </Provider>, document.getElementById('root'), ); store.js import { createStore } from 'redux'; import rootReducer from './rootReducer'; const store = createStore(rootReducer); export default store; rootReducer.js import { combineReducers } from 'redux'; import counterReducer from './Counter/counter.reducer'; const rootReducer = combineReducers({ counter: counterReducer, }); export default rootReducer; counter.action.js import { INCREMENT, DECREMENT } from './counter.types'; export const increaseCounter = () => { return { type: INCREMENT, }; }; export const decreaseCounter = () => { return { type: DECREMENT, }; };

لقد نويت عدم استخدام ال classes في مكوناتي بعد الأن و نويت المهاجرة لاستخدام الدوال بدل ذلك وأيضا ال hooks واول شئ أحاول فهمه وتقبله هو الاختلافات في استخدام ال state بين مكون دالة ومكون class وأبحث عن نصيحة حول النقاط التي يجب التركيز عليها في عملية المهاجرة وشكرا

أنا اتساءل عن كيفية نشر حزمة npm تحتوي على مكونات react يمكن استيرادها من الحزمة فمثلا لدي مكون يحتوي على زر معدل import React from 'react'; export default function Button(props) { return <button style={{ backgroundColor: 'blue', color: 'white' }}>{props.children}</button>; } كيف أصنع منه حزمة أنشرها ليمكن للأخرين تثبيتها

مرحبا أنا اواجه مشكلة في استخدام switch statement في ال reducer داخل redux والمشكلة أنني احتاج تعيين متغير جديد داخل كل case لكن أريده بنفس الاسم لأنه لنفس الغرض لكن يجب ان يكون خاص لكل case على حدى const cartReducer = (state = initialState, action) => { switch (action.type) { case QNT_UP: let index; //..... break; case QNT_DOWN: let index; //..... break; default: return state; } }; الحل الذي توصلت له هو تعيين المتغيير خارج ال cartReducer وهكذا سيصبح عام ولكنني أريده كما في الكود في الاعلى لأغراض خاصة بتتمة الشيفرة. شيفرة الswitch في الاعلى كبيرة جدا لذا لم أرفق باقي الشيفرة ليسهل عليكم مساعدتي في معالجة المشكل

مرحبا عند توليد مشروع create-react-app أحصل على ملفات منهم App.css وهذا يوضح لنا أنه يمكننا استعمال تنسيقات من ملف خارجي لكن التنسيقات ستكون عامة للمشروع كاملا وقد سألت سابقا هنا وأجابني بعض الاخوة هنا بأنني أستطيع انشاء ملف css خاص فقط بمكون واحد وذلك عن طريق .module.css وسؤالي هنا هو هل يوجد طرق أحسن لاجراء التنسيقات في react أو هل يوجد مكتبات خارجية تسهل هذا الأمر ?

أنا أستخدم نفس المكون لثلاثة مسارات مختلفة: <Router> <Route path="/home" component={Page} /> <Route path="/post" component={Page} /> <Route path="/page" component={Page} /> </Router> هل هناك طريقة لدمجهم معا في route واحد?