Adam Ebrahim

21 مارس 2021

لدي الكود البسيط التالي:

import React from "react";

function App() {
  const [number, setNumber] = React.useState(0);

  function updateNumber() {
    setNumber(state => state + 1);
  }

  console.log("this log is showing twice");
  return (
    <div className="App">
      {number}
      <button onClick={updateNumber}>Increase Number</button>
    </div>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

في كل مرة اضغط فيها على الزر ، أحصل على سجلين في الـ console مما يشير إلى أن المكون يتم عرضه مرتين renders twice، لماذا يحدث هذا الأمر؟ هل هناك خطأ ما في الكود؟

21 مارس 2021

أقوم بإستخدام lint في مشروع react ويظهر لي الخطأ التالي:

error    JSX props should not use arrow functions        react/jsx-no-bind

وأعتقد أن هنا سبب المشكلة (في onClick):

{this.state.people.map(tile => (
  <span key={tile.img}>
    <Checkbox onCheck={() => this.selectPerson(tile)} />
                       
    <GridTile actionIcon={<IconButton onClick={() => this.handleDelete(tile)}><Delete color="red"/></IconButton>}>
      <img onClick={() => this.handleOpen(tile.img)} src={tile.img} />
    </GridTile>
  </span>
))}

هل من الخطأ أن أستخدم inline arrow functions في JSX props؟ وإن كان كذلك ما هي الطريقة الأفضل لأمر كهذا؟

21 مارس 2021

لقد تعلمت React خلال الأيام القليلة الماضية، وألقيت نظرة على بعض البرامج التعليمية والتفسيرات المتعلقة بالطرق المختلفة التي يمكنك من خلالها كتابة عناصر مختلفة. ومع ذلك، هناك واحد لم أفهمها بشكل جيد - وظيفة setState لتحديث حالة مكون React.

على سبيل المثال ، لنفترض أن لدي صنف كما يلي، ويقوم هذا الصنف بإستخدام API لجلب الأسماء من السيرفر بإستخدام fetch:

class Person extends React.Component {
    constructor() {
        super()
        state = {
            firends: []
        }
    }

   componentDidMount() {
      // هنا ستكون fetch و setState
   }

    render() {
       return {
          <div className="container">
             {this.state.firends}
          </div>
       }
    }
}

نظرًا لأنني أجريت عملية الجلب والتعيين وreturn لهذه الدالة - سأقوم بعد ذلك بتحديث friends: [] بالنتائج القادمة من الـ API. سؤالي حول الطرق المختلفة التي رأيتها فيما يتعلق بكيفية تحديث حالة المكون friends، حيث رأيت طريقتين مختلفتين لعمل نفس الشيء:

الطريقة الأولى سهلة للغاية وواضحة أيضًا
```
this.setState({firends: names})
```
أما الطريقة الأخرى فتبدو أكثر تعقيدًا بدون سبب ويتم وصفها بأنها أكثر أمانًا:
```
this.setState(prevState => ({
   friends: prevState.friends.concat(names)
}))
```
هل يمكن لشخص ما أن يشرح مزايا استخدام كل طريقة منهما؟ وما عيوب كلًا منهما؟

21 مارس 2021

مرحبًا

أحاول أن أستعمل firebase في تطبيق react ومن المفترض أن أحصل على parameter من URL بالشكل التالي:

http://localhost:8000/#/signin?_k=d2suqb&__firebase_request_key=somethingHere

سؤالي هو كيف يمكنني تحديد مسار في ملف routes.jsx الخاص بي لالتقاط قيمة الـ parameter هذا __firebase_request_key

أستخدم React Router الإصدار الخامس.

20 مارس 2021

لدي مصفوفة في state خاصة بمكون react، وهذه المصوفة تحتوي على كائنات objects بالشكل التالي:

var DescriptionBox = React.createClass({
  getInitialState: function() {
    return {data: [
      { id: 1, text: "foo" },
      { id: 2, text: "bar" }
    ]};
  },
  handleDescriptionEdit: function(id, text) {
    var oldDescription = this.state.data.filter({ function(c) { c.id == id; }).first();
    var updatedDescriptions = ??; // كيف أقوم بتحديث الكائن السابق من هنا

    this.setState({data: updatedDescriptions});
  }
}

20 مارس 2021

لدي REST API في Backend يعمل بـ Laravel وأريد أن أقوم بجلب البيانات في شكل JSON من خلال Fetch call في React، وكل شيء يعمل بشكل سليم إلا أن هناك خطب ما في النتيجة. هنا كود دالة fetch

function getFriends() {
  fetch('http://localhost:8000/friends', {
      method: 'POST',
      mode: 'no-cors',
      credentials: 'same-origin',
      headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
      })
  }).then(function (response) {
      console.log(response);
      // يبدو أن هناك خطأ هنا
      return response.json();

  });
}

لكن النتيجة تظهر بهذا الشكل:

[
  {
    "0x1": {
      "users": [],
      "owner": "0x2",
      "title": "Ahmed Ali",
      "description": "",
      "id": "id_00001"
    },
    "0x2": {
      "username": "ahmed232",
      "solutions": [],
      "exercises": [],
      "roles": [
        "0x3",
        "0x4",
        "0x5"
      ],
      "id": "user_00001"
    },
    "0x3": {
      "roleName": "ROLE_ADMIN",
      "objectClass": "role",
      "id": "role_00001"
    }
  }
]

فحصت الكود السابق بأستخدام jsonlint ويبدو أنه كود json صحيح، لكن لا أعرف لماذا تظهر رموز مثل 0x1 و 0x2 إلخ؟

18 مارس 2021

لدي بعض المكونات داخل بعضها البعض بالإضافة إلى مكون آخر منفصل عنهم، بنيه المكونات كما بالشكل التالي:

- Component 1  
 -|- Component 2
 ----|- Component 3
 -------|- Component 4 

- Component 5

كما تلاحظ المكون الأول يحتوي مكون بداخله وهذا الأخير يحتوي على مكون آخر Compnent 3 وهكذا ، الآن أريد أن يعرض المكون 5 بعض البيانات اعتمادًا على حالة state الخاصة بالمكون 4. نظرًا لأن الخاصيات props غير قابلة للتغيير immutable، لا يمكنني ببساطة حفظ حالتها في المكون 1 وإعادة توجيهها للمكون 5.

18 مارس 2021

تطبيقي هو في الأساس قائمة بفلاتر filters وزر لتغيير التخطيط. في الوقت الحالي ، أستخدم ثلاثة مكونات: <list /> و <Filters /> و <TopBar /> ، عندما أقوم بتغيير الإعدادات في <Filters /> أريد تشغيل بعض الدوال الموجودة في <list /> لتحديث الواجهة، كيف يمكنني عمل ذلك؟ كيف يمكنني جعل هذه المكونات الثلاثة تتفاعل مع بعضها البعض، أو هل أحتاج إلى نوع من إدارة الحالة state management في المكون الأب لهذه المكونات الثلاثة؟

17 مارس 2021

أحاول أن أضع كود HTML أقوم بجلبة بإستخدام Ajax لكني عند عرض هذا الكود يظهر في شكل نص وليس كود يتم تطبيقه في المتصغح، هنا كود Ajax الذي أستخدمه:

$.ajax({
   url: 'https://example.com/posts/,
   dataType: "json",
   success: function(data) {
      this.setState({
           posts: data.posts
      })
   }.bind(this)
});

ثم أقوم بعرض كود HTML بالشكل التالي:

<div>
  {this.state.posts}
</div>

في النهاية أحصل على الكود الصحيح، لكن المشكلة تكمن في طريقة عرضه في المتصفح حيث يظهر كنص وليس كود كما وضحت سابقًا.

17 مارس 2021

كيف يمكنني أن أقوم بتمرير قيمة لدالة يتم إستدعائها في onClick event في مكون React، حاولت إستخدام الكواد التالي:

var ClickableButton = React.createClass({
  handleClick:  function(value) {
    console.log(value);
  },
  
  render: function () {
    var that = this;
    return(
	<button onClick={that.handleClick} >Content</button>

    );
  }
});

لكن بدلًا من ذلك ظهر لي كائن من نوع SyntheticMouseEvent في الـ console بالشكل التالي:

SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target

كيف يمكنني تمرير قيمة إلى دالة handleClick حيث يمكنني طباعتها في الـ Console؟

17 مارس 2021

مرحبًا جميعًا

أحصل على هذا الخطأ عند تشغيل مشروع React:

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

هذا هو الكود الخاص بي:

const React = require('react')
const ReactDOM =  require('react-dom')
const Router = require('react-router')
const Route = Router.Route
const Link = Router.Link

var App = React.createClass({
  render() {
    return (
      <div>
        <h1>Home Page</h1>
        <Link to="/another">Another</Link>
      </div>
    )
  }
})

var About = require('./components/Main')
ReactDOM.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="another" component={Another} />
    </Route>
  </Router>
), document.body)

وهنا ملف Main.jsx:

var React = require('react');

var Main = React.createClass({
  render:function() {
    return (
	<p>Some Content</p>
    );
  },
});

module.exports = Main;

يبدو أن المشكلة من الجزء التالي في الملف الأول:

var About = require('./components/Main')
ReactDOM.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="another" component={Another} />
    </Route>
  </Router>
), document.body)

17 مارس 2021

أحاول تحويل مشروع React إلى ES6، ولدي مكونان: مكون أب ومكون ابن، لكن يظهر لي الخطأ التالي عند إستخدام this.state في الكود:

Uncaught TypeError: Cannot read property 'state or props' of undefined

هنا المكون الأب Parent component:

export default class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {code: ''};
    }

    setCodeChange(code) {
        this.setState({code: code});
    }


    login() {
      // هنا تحدث المشكلة نتيجة لخطأ this.state is undefined
        if (this.state.code == "") {}
    }

    render() {
        return (
            <div>
                <Child onCodeChange={this.setCodeChange} onLogin={this.login} />
            </div>
        );
    }
}

المكون الابن child component:

export default class Child extends Component {
    constructor(props) {
        super(props);
    }

    handleCodeChange(e) {
        this.props.onCodeChange(e.target.value);
    }

    login() {
        this.props.onLogin();
    }

    render() {
        return (
          <>
            <input name="code" onChange={this.handleCodeChange.bind(this)}/>
            <button id="login" onClick={this.login.bind(this)}>
          </>
        );
    }
}

Child.propTypes = {
    onCodeChange: React.PropTypes.func,
    onLogin: React.PropTypes.func
};

المشكلة تحدث عند الضغط على الزر #login

17 مارس 2021

كيف يمكنني أن أستخدم document.getElementById في مكونات React حيث يظهر لي الخطأ التالي عند إستعمالها:

TypeError: document.getElementById(...) is null

هذا هو الكود الخاص بي:

var Progressbar = React.createClass({
    getInitialState: function () {
        return { finished: this.props.finished };
    },
  
    addPrecent: function (value) {
        this.props.finished += value;
        this.setState({ finished: this.props.finished });
    },

    render: function () {
        var finished = this.props.finished;
        if (finished < 0) { finished = 0 };
      
      // هنا يتم عمل مكون Progress bar ولم أقم بإرفاق الكود لعدم أهميته في المشكلة
        return (...);
    }

// المكون الرئيسي / الأب
var App = React.createClass({      
    handleClick: function (e) {
      // هذا هو السطر الذي يسبب المشكلة السابقة
        document.getElementById('Progress').addPrecent(10);
    },
    render: function () {
        return (
            <div class="center">
            	<Progressbar completed={25} id="Progress" />
            	<input type="button" onClick={this.handleClick} value="+10" />
            </div>
        )
    }
});

17 مارس 2021

كيف أقوم بتمرير parameter في عنصر link بحيث يمكنني إستخدام هذه الخواص في الصفحة الأخرى بإستخدام React Router؟

15 مارس 2021

مرحبًا

أحاول إستخدام حزمة react-i18next لإضافة أكثر من لغة في تطبيق React لكني أحصل على الخطأ التالي:

Attempted import error: 'initReactI18next' is not exported from 'react-i18next'

قمت بإنشاء ملف i18n.js وهنا ما يحتويه من كود:

import { initReactI18next } from 'react-i18next';
import i18n from 'i18next';
import Backend from 'i18next-http-backend';

i18n.use(Backend)
  .use(initReactI18next)
  .init({
    // الكود التالي من وثائق الخزمة نقسها
    // https://react.i18next.com/getting-started
    fallbackLng: 'en',
    debug: true,	// لإظهار الأخطاء في console

    interpolation: {
      escapeValue: false,
    }
  });


export default i18n;

وهنا محتويات ملف package.json كامل:

{
   "name": "ٌreact",
   "version": "0.1.0",
   "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
   },
   "dependencies": {
      "axios": "^0.21.1",
      "i18next": "^19.9.2",
      "i18next-browser-languagedetector": "^6.0.1",
      "i18next-http-backend": "^1.1.1",
      "i18next-xhr-backend": "^3.2.2",
      "prop-types": "^15.7.2",
      "proptypes": "^1.1.0",
      "react": "^17.0.1",
      "react-alice-carousel": "^1.17.2",
      "react-dom": "^17.0.1",
      "react-i18next": "^11.8.10",
      "react-loader-spinner": "^4.0.0",
      "react-native-gesture-handler": "^1.5.2",
      "react-navigation": "^4.0.10",
      "react-navigation-stack": "^1.10.3",
      "react-router-dom": "^5.1.2",
      "react-scripts": "^4.0.3"
   },
   "devDependencies": {
      "@babel/plugin-proposal-export-default-from": "^7.8.3",
      "css-loader": "^3.4.2"
   }
}

15 مارس 2021

أحاول تشغيل تطبيق React مكتوب بـ TypeScript، وواجهت بعض الأخطاء.

حتى عند محاولة تحويل الملف نفسه من TypeScript إلى جافاسكريبت أحصل على الخطأ التالي، حاولت البحث عن حل للمشكلة لكن لم أجد أي حل مفيد.

TS2304: Cannot find name 'require'

هذا هو محتوى الملف هنا:

'use strict';

const mongoose = require('mongoose'),
mongooseSchema = mongoose.Schema;

// The rest of the code

الكود بسيط للغاية لكن رغم ذلك يظهر الخطأ السابق بدون سبب مفهوم.

13 مارس 2021

أتابع دورة React ويقوم المدرب في بعض الأحيان بتمرير props إلى دالة super داخل التابع constructor في مكون من نوع class component بهذا الشكل:

// أحيانًا بهذه الطريقة
class TestComponent extends React.Component {
  constructor(props) {
    super();
  }
}

// وأحبانًا أخرى بالطريقة التالية
class TestComponent extends React.Component {
  constructor(props) {
    super(props);
  }
}

ما الفرق بين الطريقتين؟ وهل ستسبب مشكلة إن إستخدمت طريقة مكان الأخرى؟

13 مارس 2021

مرحبًا، أحاول عمل مكون HOC في React بإستخدام typescript لكي أتحكم في نظام Authentication لكن عند تنفيذ الكود يظهر لي الخطأ التالي:

auth.ts:12:3 - error TS1005: '>' expected.
12     return <WrappedComponent {...this.props} />;

هنا الكود الخالص بي والذي يظهر هذا الخطأ في ملف auth.ts:

import * as React from 'react';
import { context } from 'next';

export const withAuthSync = (WrappedComponent: ComponentExtra) => class extends React.Component {
  static async getInitialProps(ctx: context) {
    const authToken = auth(ctx);
    const allProps = WrappedComponent.getInitialProps && (await WrappedComponent.getInitialProps(ctx));
    return { ...allProps, authToken };
  }

  render() {
    // السطر التالي هو ما يسبب الخطأ على ما أظن
    return <WrappedComponent {...this.props} />;
  }
};

لا أعلم لماذا يتم إظهار كود JSX على أنه خطأ

12 مارس 2021

عند تشغيل الكود التالي:

const Route = ({ component: Component, ...rest }) => (
  <div {...rest} render={props => (
    <Component {...props}/>
  )}/></div>
)

يظهر الخطأ التالي:

Uncaught Error: Cannot find module "./Login"
    at webpackMissingModule (router.js:9)
    at Object.<anonymous> (router.js:9)
    at __webpack_require__ (bootstrap 18b9132…:555)
    at fn (bootstrap 18b9132…:86)
    at Object.<anonymous> (index.js:22)
    at __webpack_require__ (bootstrap 18b9132…:555)
    at fn (bootstrap 18b9132…:86)
    at Object.<anonymous> (bootstrap 18b9132…:578)
    at __webpack_require__ (bootstrap 18b9132…:555)
    at bootstrap 18b9132…:578
webpackMissingModule @ router.js:9
(anonymous) @ router.js:9
__webpack_require__ @ bootstrap 18b9132…:555
fn @ bootstrap 18b9132…:86
(anonymous) @ index.js:22
__webpack_require__ @ bootstrap 18b9132…:555
fn @ bootstrap 18b9132…:86
(anonymous) @ bootstrap 18b9132…:578
__webpack_require__ @ bootstrap 18b9132…:555
(anonymous) @ bootstrap 18b9132…:578
(anonymous) @ bootstrap 18b9132…:578
webpackHotDevClient.js:233 Error in ./src/Login.js
Syntax error: Unexpected token (13:43)

  11 | 
  12 | 
> 13 | const PrivateRoute = ({ component: Component, ...rest }) => (
     |                                               ^
  14 | <div {...rest} render={props => (
  15 |     <Component {...props}/>

فحصت الكود عدة مرات ولم أجد سبب المشكلة، حاولت البحث عن حل للمكشلة لكن دون جدوى.

10 مارس 2021

لدي مكونان components كالتالي:

مكون أب parent component
مكون ابن child component

كيف يمكنني أن أستدعي دالة من المكون الابن داخل المكون الأب، لقد جربت الكود التالي لكن لم يفلح الأمر معي:

// هنا المكون الابن ويحتوي على الدالة
// getLog() التي أحتاج إلى تنفيذها من خلال المكون الأب
class Child extends Component {
  getLog() {
    console.log('Called from child');
  }
 
  render() {
    return (
      <h1 ref="hello">Hello</h1>
    );
  }
}

// هذا هو المكون الأب  الذي يتم إستدعاء المكون الابن فيه
// أحتاج إلى أستدعاء الدالة getLog من المكون الابن هنا
class Parent extends Component {
  render() {
    return (
      <Child>
        <button onClick={Child.getLog()}>Get Log</button>
      </Child>
      );
    }
  }

هل توجد طريقة لتشغيل الدالة getLog من داخل المكون الأب؟

10 مارس 2021

قمت بإنشاء مشروع جديد بإستخدام create-react-app ولكن عند تشغيل المشروع يتم تنفيذ الكود مع الكثير من التحذيرات بالإضافة إلى الخطأ التالي:

./node_modules/rc-picker/node_modules/moment/src/lib/locale/locales.js
Module not found: Can't resolve './locale' in '/Users/PC/Desktop/react_projects/node_modules/rc-picker/node_modules/moment/src/lib/locale'

وهذا ما يحتويه المشروع من مكتبات في ملف package.json:

 "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "antd": "^4.2.0",
    "axios": "^0.19.2",
    "formik": "^2.1.4",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-icons": "^3.10.0",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "redux": "^4.0.5",
    "moment": "2.25.1",
    "yup": "^0.28.5"
  },

8 مارس 2021

حاولت أن أقوم ببناء مشروع React من الصفر، ولكن يظهر لي الخطأ التالي:

./src/App.js

Line 4:
React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks

وهذا هو الكود الذي كتبته:

import React from 'react'; 

const app = props => {
  const [friendState, setFriendSate] = useState({ firend_ids:[ 1, 2, 3 ], }); 
    return (
        <div className="App"> 
            <h1>Hello, World!</h1>
        </div> ); 
    };
export default app;

بالرغم من أن الكود السابق بسيط للغاية إلا أن رسالة الخطأ غير مفهومة ولا تساعد البته.

7 مارس 2021

أريد أن أستخدم صورة موجودة لدي في مجلد public داخل المشروع الرئيسي وليست موجودة داخل مجلد src وعند محاولة إستدعاء هذه الصورة يحدث الخطأ التالي:

./src/components/website_index.js Module not found: You attempted to import ../../public/logo.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

وهذا هو الكود الذي كتبته:

import logo from '../../public/logo.png';
<img alt="My Brand" src={logo}/>

هل توجد طريقة لفعل ذلك؟

6 مارس 2021

بدأت أتعلم redux بالأمس فقط وعند محاولة التطبيق يظهر لي الخطأ التالي عندما أحاول تشغيل مشروع React كنت أعمل عليه:

./src/components/App/App.js
Attempted import error: 'combineReducers' is not exported from '../../store/reducers/'.

وأعتقد أن سبب الخطأ هو هذا السطر في ملف App.js

import { combineReducers } from '../../store/reducers';

بالرغم من أني قمت بعمل export بشكل صحيح في ملف store/reducers:

export default combineReducers({followerReducers, friendsReducers});

6 مارس 2021

لدي مصوفة من المكونات موجودة في state وكنت أريد أن أضيف مكون جديد، لذلك بدأت استخدم الكود التالي:

this.state.friends.push(person);
this.setState({ friends: this.state.friends });

هل هذه الطريقة صحيحة أم لا؟ أنا أرى أن عمل مصفوفة جديدة ثم إستخدامها للتعديل على state يستهلك أكثر من المطلوب.

ريادة الأعمال

البرمجة

التصميم

DevOps

التسويق والمبيعات

العمل الحر

البرامج والتطبيقات

آخر التحديثات

قصص نجاح

أسئلة وأجوبة

كتب

دورات

أجوبة بواسطة Adam Ebrahim