Rayden Storm

مرحبا أحاول جعل العناوين دينامكيا بهذا الشكل مثلا ارسل عبر props 1,2,3,4,5,6 لكن بطريقة دينامكيا import React from 'react' export default function Dynamic(props) { return ( <div> <h{props.head}></h{props.head}> </div> ) } لكن لم يعمل معي ذلك هل ممن حل ?

مرحبا مرحبا لدي نوع خط محلي في مشروع react ووضعته داخل مجلد /src/fonts/myfont.woff وأريد استخدامه في المشروع ما الطريقة لذلك ?

لدي مكون بسيط يحتوي inputs للتسجيل وأريد افراغهم بعد اكمال عملية التسجيل وفي هذه الحالة اريد فقط افراغهم عند الضغط على زر signup ولا أدري ما الحل لذلك import React, { useState } from 'react'; export default function signup() { const [state, setState] = useState({ username: '', email: '', password: '', confirm_password: '', }); const handleChange = (e) => { setState((prev) => ({ ...prev, [e.target.name]: e.target.vale })); }; const handleSubmit = () => { setState({ username: '', email: '', password: '', confirm_password:'' }); }; return ( <div> <input onChange={handleChange} type="text" name="username" /> <input onChange={handleChange} type="email" name="email" /> <input onChange={handleChange} type="password" name="password" /> <input onChange={handleChange} type="password" name="confirm_password" /> <button onClick={handleSubmit}>signup</button> </div> ); }

السلام عليكم لدي مشروع react تقريبا كامل وأريد استظافته الان ولكن مشروعي يحتوي على كود redux واستخدم redux devtools extension ولا اريد الكود الخاص بعمل devtool أن يعمل عند استظافة المشروع import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import { persistReducer } from 'redux-persist'; const { composeWithDevTools } = require('redux-devtools-extension'); import storage from 'redux-persist/lib/storage'; import rootReducer from './reducers/rootReducer'; const persistConfig = { key: 'root', storage, }; const persistedReducer = persistReducer(persistConfig, rootReducer); const bindMiddleware = (middleware) => { return composeWithDevTools(applyMiddleware(...middleware)); }; const store = createStore(persistedReducer, bindMiddleware([thunk])); export default store; أرجو المساعدة

لدي مكون بسيط فيه state ولدي زر لتحديثه والمشكلة هي أنه في تحديث واحد لل state المكون يشتغل مرتين import React, { useState } from 'react'; import './styles.css'; export default function App() { const [number, setNumber] = useState(0); function chaneNumber() { setNumber((state) => state + 1); } console.log('تشغيل'); return ( <div className="App"> <button onClick={chaneNumber}>تغيير الرقم</button> {number} </div> ); }

عند استخدام الارجاع الشرطي داخل المكون يحدث خطأ هل ممكن تفسير? return ( <div style="container"> if (state == 'news'){ return ( <p>data</p> ) } </div>

هل هناك طريقة أخرى لوضع عنوان الصفحة في المتصفح غير document.title import React from 'react'; export default function Blog() { useEffect(() => { document.title = 'المدونة'; }, []); return ( <div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quos veniam commodi at. Corporis consequuntur dolor odit natus adipisci enim provident iusto atque consequatur amet minima, velit id cupiditate incidunt. </div> ); }

لدي ملف يحتوي على كود css خاص بمكون ال navbar ويمكنني استيراده بسهولة و يعمل عادي import React from 'react'; import '../styles/navbar.css'; export default function Navbar() { return ( <div> <h1 className="brand">Logo</h1> <ul className="navlist"> <li className="navitem">link1</li> <li className="navitem">link2</li> <li className="navitem">link3</li> <li className="navitem">link4</li> </ul> </div> ); } لكن أظن هذه الطريقة لا تجلب الأصناف المتوفرة في navbar.css الى مكون ال navbar فقط وأنا ابحث عن طريقة لجعل كل مكون يحتوي فقط على ال css الخاص به

مرحبا لقد قمت بانشاء مشروع react عن طريق create-react-app واحتجت لأن أعدل الاعدادات في axios واضافة رابط قاعدي بهذا الشكل import axios from 'axios'; const instance = axios.create({ baseURL: 'http://localhost:4000/api/' }); export default instance; ثم أرد تغيير الرابط ليصبح متغير بيئة فأضفت ملفenv.local وأضفت السطر التالي devapi=http://localhost:4000/api وقمت بتغيير ملف اعدادات axios import axios from 'axios'; const instance = axios.create({ baseURL: process.env.devapi }); export default instance; ولكن لم يعمل معي ذلك فما المشكلة

أحيانا أرى استخدامات للرابط في axios مثلا بدل http://localhost:3000/api/posts يستعملون posts مباشرتا import React, { useState, useEffect } from 'react'; import axios from 'axios'; export default function Logo() { const [data, setData] = useState(); useEffect(() => { axio.get('/posts').then((res) => { setData(res.data); }); }, []); return ( <div> {data && data.map((d) => ( <div> <img src={data.image} alt="image" /> <h1>{data.tilte}</h1> <p>{data.body}</p> </div> ))} </div> ); } كيف يمكن تحقيق ذلك?

انا احاول عرض صورة وتأكدت أنها في مجلد images باسم logo.png والطريق للوصول للصورة صحيح لكنها لم تظهر import React from 'react' export default function Logo() { return ( <div> <img src="../images/logo.png" alt="logo"/> </div> ) }

مرحبا أنا مازلت أستخدم class components في react وبالتالي أستخدم componentDidMount componentDidUpdate componentWillUnmount وأريد الانتقال لاستخدام react useeffect لكن أنا لا أفهم كيفية عملها لتحقيق ال lifecycles الوارد ذكرهم فيما سبق

مرحبا أنا ابحث عن طريقة لاستخراج ال id من الرابط باستخدام react router <Link to="/account?id=1">Netflix</Link> الرابط سيكون مثلا http://localhost:3000/account?id=1 وأحتاج للوصول الى id لاستخدامها لجلب معلومات الحساب من السيرفر

مرحبا لدي مكون أب يحتوي على منطق بسيط ويحتوي أيضا على مكون ابن ومشكلتي هي أنه عندما يعاد تشغيل المكون الاب يعاد تشغيل المكون الابن أيضا رغم أنه لم يتغير شئ في المكون الابن المكون الاب import { useState, useEffect } from 'react'; import Child from './Child'; export default function ParentComponent() { const [lang, setLang] = useState(''); const [framework, setFramwoek] = useState(''); const whichFamousFramwork = () => { switch (lang) { case 'javascript': return setFramwoek('react'); case 'python': return setFramwoek('django'); case 'php': return setFramwoek('laravel'); default: // eslint-disable-next-line no-unused-expressions 'django'; } }; useEffect(() => { let mounted = true; if (mounted) { whichFamousFramwork(); } return () => (mounted = false); }, [lang]); return ( <div dir="rtl"> <h1>اختر لغة وسنخبرك بأفضل فرايموورك</h1> <div> <button onClick={() => setLang('javascript')}>{'javascript'}</button> <button onClick={() => setLang('python')}>{'python'}</button> <button onClick={() => setLang('php')}>{'php'}</button> </div> {lang && ( <p> بالنسبة ل <span>{framework}</span>, {lang} هو أفضل فرايموورك </p> )} <Child /> </div> ); } المكون الابن import { useRef } from 'react'; function Child() { const renderCount = useRef(0); return ( <div> <p> لم يتغير شئ داخل child لكن اعيد تشغيله <span>{renderCount.current++} مرة</span> </p> </div> ); } export default Child; هل من طريقة لمعالجة الامر?

أنا أتدرب على انشاء موقع والان أصبح فيه الكثير من الصفحات والان المكون الذي يحتوي routes أصبح مكتض جدا هل يمكن معالجة ذلك import React from 'react'; import { Switch, Route } from 'react-router-dom'; import nprogress from 'nprogress'; //?pages import Index from './pages/index'; import Questions from './pages/footer/questions'; import BuyRights from './pages/footer/buyrights'; import BuyBooks from './pages/footer/buybooks'; import Dist from './pages/footer/dist'; import Policy from './pages/footer/policy'; import TransAprovals from './pages/footer/transaprovals'; import Workwithus from './pages/footer/workwithus'; import Contact from './pages/footer/contact'; import ContactAuth from './pages/footer/contactauth'; import Terms from './pages/footer/terms'; import Four from './pages/404'; import Home from './pages/home'; import About from './pages/about'; import Blog from './pages/blog'; import Book from './pages/book'; import Books from './pages/books'; import Podcast from './pages/Podcast'; import Videos from './pages/videos'; import FeaturedBooks from './pages/FeaturedBooks'; import FurtherComing from './pages/FurtherComing'; import BooksByCategory from './pages/BooksByCategory'; import BooksSeries from './pages/BooksSeries'; import Events from './pages/events'; import InThePress from './pages/inThePress'; import SinglePost from './pages/singlePost'; import ArabCulture from './pages/ourProjects/arabCultureFestivalInMilan'; import DivineComedy from './pages/ourProjects/divineComedy'; import Stronger from './pages/ourProjects/literatureIsStronger'; import Translation from './pages/ourProjects/translationForum'; import PublishConditions from './pages/ourWriters/publishConditions'; import Writers from './pages/ourWriters/writers'; import Author from './pages/ourWriters/Author'; import Navbar from './components/layout/Navbar'; import TopNavbar from './components/layout/TopNavbar'; // import BooksFilter from './components/books/BooksFilter'; import Footer from './components/layout/Footer'; //?util import Up from './util/Up'; import SocialButtons from './util/SocialButtons'; import ScrollToTop from './util/ScrollToTop'; import theme from './util/theme'; function App(props) { React.useEffect(() => { nprogress.done(); return () => { nprogress.start(); }; }, []); return ( <> <TopNavbar></TopNavbar> {/* <BooksFilter></BooksFilter> */} <SocialButtons></SocialButtons> <ScrollToTop></ScrollToTop> <Navbar></Navbar> <Switch> <Route title="index" exact path="/"> <Index /> </Route> <Route title="policy" exact path="/policy"> <Policy /> </Route> <Route title="buyrights" exact path="/buyrights"> <BuyRights /> </Route> <Route title="buybooks" exact path="/buybooks"> <BuyBooks /> </Route> <Route title="dist" exact path="/dist"> <Dist /> </Route> <Route title="transaprovals" exact path="/transaprovals"> <TransAprovals /> </Route> <Route title="Terms" exact path="/terms"> <Terms /> </Route> <Route title="questions" exact path="/questions"> <Questions /> </Route> <Route title="contact" exact path="/contact"> <Contact /> </Route> <Route title="contact" exact path="/contactauth"> <ContactAuth /> </Route> <Route title="workwithus" exact path="/workwithus"> <Workwithus /> </Route> <Route title="podcast" exact path="/podcast"> <Podcast /> </Route> <Route title="videos" exact path="/videos"> <Videos /> </Route> <Route title="featured" exact path="/featured"> <FeaturedBooks /> </Route> <Route title="further" exact path="/furthercoming"> <FurtherComing /> </Route> <Route title="home" exact path="/home"> <Home /> </Route> <Route title="about" exact path="/about"> <About /> </Route> <Route title="blog" exact path="/blog"> <Blog /> </Route> <Route title="single-post" exact path="/singlePost"> <SinglePost /> </Route> <Route title="in the press" exact path="/inThePress"> <InThePress /> </Route> <Route title="book" exact path="/book/:id"> <Book /> </Route> <Route title="books" exact path="/books_by_category"> <BooksByCategory /> </Route> <Route title="books_by_series" exact path="/books_by_series"> <BooksSeries /> </Route> <Route title="books" exact path="/books"> <Books /> </Route> <Route title="author" exact path="/author/:id"> <Author /> </Route> <Route title="events" exact path="/events"> <Events /> </Route> <Route title="arab culture" exact path="/ourProjects/divineComedy"> <DivineComedy /> </Route> <Route title="Translation" exact path="/ourProjects/translationForum"> <Translation /> </Route> <Route title="events" exact path="/ourProjects/arabCultureFestivalInMilan"> <ArabCulture /> </Route> <Route title="Stronger" exact path="/ourProjects/literatureIsStronger"> <Stronger /> </Route> <Route title="publish conditions" exact path="/ourWriters/publishConditions"> <PublishConditions /> </Route> <Route title="writers" exact path="/ourWriters/writers"> <Writers /> </Route> <Route title="404"> <Four /> </Route> </Switch> <Up></Up> <Footer></Footer> </> ); } export default App;

هل يمكن لهذا الكود ان يعاد كتابته بطريقة تكون اكثر تنظيما import React, { useState, useEffect } from 'react'; import axios from 'axios'; export default function App() { const [data, setData] = useState(); useEffect(() => { function getData() { axios.get('http://localhost:5000/posts').then((res) => { setData(res.data); }); } getData(); }, []); return ( <div> {data && data.map((post) => ( <div key={post.id}> <h1>{post.title}</h1> <p>{post.description}</p> </div> ))} </div> ); }

مرحبا انا ابحث عن طريقة تمكنني من ان اكون في اعلى الصفحة عند التنقل من صفحة الى صفحة باستخدام react router import React from 'react'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import Navbar from './components/navbar'; import Footer from './components/footer'; import Home from './pages/home'; import About from './pages/about'; import Dashboard from './pages/dashboard'; export default function BasicExample() { return ( <Router> <div> <Navbar></Navbar> <Switch> <Route exact path="/"> <Home /> </Route> <Route path="/about"> <About /> </Route> <Route path="/dashboard"> <Dashboard /> </Route> </Switch> <Footer></Footer> </div> </Router> ); }

اذا كان ال state بسيط فيمكنني تغييره عن طريق setForm((prevForm) => ({ ...prevForm, [name]: value })); ماذا ان كان ال state معقد بهذا الشكل function App() { const [form, setForm] = useState({ info: { firstname: '', lastname: '', email: '', password: '', confirmPassword: '' }, address: { country: '', city: '', line1: '', line2: '' }, }); const handleChange = (e) => { const { name, value } = e.target; setForm((prevForm) => ({ ...prevForm, [name]: value })); }; console.log(form); return ( <div> <h2>signup</h2> <input type="text" placeholder="firstname" name="firstname" value={form.info.firstname} onChange={handleChange} /> <input type="text" placeholder="lastname" name="lastname" value={form.info.lastname} onChange={handleChange} /> <input type="email" placeholder="email" name="email" value={form.info.email} onChange={handleChange} /> <input type="password" placeholder="password" name="password" value={form.info.password} onChange={handleChange} /> <input type="password" placeholder="confirmPassword" name="confirmPassword" value={form.info.confirmPassword} onChange={ handleChange} /> <input type="text" placeholder="country" name="country" value={form.address.country} onChange={ handleChange} /> <input type="text" placeholder="city" name="city" value={form.address.city} onChange={ handleChange} /> <input type="text" placeholder="line1" name="line1" value={form.address.line1} onChange={ handleChange} /> <input type="text" placeholder="line2" name="line2" value={form.address.line2} onChange={ handleChange} /> </div> ); } export default App;

لماذا في كل مرة نحاول عرض قائمة من المكونات في react نتحصل على خطأ يخبرنا ان key attribute اجبارية?

لدي مشكلة في التعامل مع input في react import React, { useState, useEffect } from 'react'; export default function Login() { const [name, setName] = useState(); useEffect(() => { console.log(name); }, []); return ( <div> <input type="text" value={name} onChange={(e) => setName(e.target.value)} /> </div> ); } يحدث معي هذا الخطا warning:A component is changing an uncontrolled input of type undefined

لدي مشكلة في هذا الكود import React from 'react'; export default function Counter() { const [count, setCount] = useState(1); const increment = () => { setCount(count + 1); console.log(count); }; const decrement = () => { setCount(count + 1); console.log(count); }; return ( <div> <button onClick={decrement}>-</button> {count} <button onClick={increment}>+</button> </div> ); } مثلا اذا كان state يساوي 4 وقمت بالضغط على زر الزيادة يصبح 5 لكن في تلك الحظة console.log تعرض 4 عوض الرقم 5 ما المشكل?

لماذا احصل على هذا التحذير من react ./src/components/Posts.js Line 23: React Hook useEffect has a missing dependency: 'getPosts'. Either include it or remove the dependency array react-hooks/exhaustive-deps وهذا هو الكود import React from 'react'; import axios from 'axios'; export default function Users() { const getPosts = () => { axios .get('http://localhost:4000/posts') .then((res) => { console.log(res); }) .catch((err) => { console.log(err); }); }; useEffect(() => { getPosts(); }, []); return <div>posts</div>; }

مرحبا لدي مكون حيث اجلب قائمة المستخدمين من السيرفر واقوم بعرضها بهذا الشكل export default function Users() { const [res, setRes] = useState(); useEffect(() => { async function getData() { const res = await axios.get('http://localhost:3000/api/users'); if (res.status === 200) { setRes(res); } } getData(); }, []); return ( <div> {res.data.users.map((user) => ( <p key={user.id}>{user.name}</p> ))} </div> ); } ولكني احصل على هذا الخطا cannot get proprety data of undefined

كيف أضيف عنصر الى قائمة لتغيير reducer state ؟ import {ADD_ITEM} from '../Actions/UserActions' const initialUserState = { arr:[] } export default function userState(state = initialUserState, action) { console.log(arr); switch (action.type) { case ADD_ITEM: return { ...state, arr: state.arr.push([action.newItem]) } default: return state }

لقد بدأت في تعلم React بدافع الفضول وأردت معرفة الفرق بين React و React Native - على الرغم من أنني لم أجد إجابة مرضية باستخدام Google. يبدو أن React و React Native لهما نفس التنسيق. هل لديهم تركيب مختلف تمامًا؟