Adam Ebrahim

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

import React from 'react';

export class Navbar extends React.Component {
    render(){
      return (
        <ul className="navbar navbar-full">
        ...
        </ul>
      );
    }
}

عندما أقوم بإستدعاء المكون السابق كالتالي يظهر لي خطأ:

import React from 'react';
import ReactDOM from 'react-dom';

import Navbar from './components/navbar.jsx';

export class App extends React.Component{
  render(){
    return(
        <Navbar />
        ...
    );
  }
}

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

رسالة الخطأ:

Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `App`.

ما أحاول فعله هو إستخدام webpack مع React و babel لتحويل كود  ES6، ما الخطأ الذي أفعله؟ كيف يمكنني إستيراد وتصدير المكون بشكل صحيح؟

لاحظت في بعض الفيديوهات يقوم المدرب بإستخدام onInput وليس onChange ولا أعرف الفرق بينهما، حتى بعد أن جربت تبديلهما لم أجد إختلاف، بحثت عن الإختلاف بينهما لكن أغلب الإجابات ليس لها علاقة بـ React نفسه، فما الفرق بينهما ومتى أستعمل كل واحد منهما؟

في مشروع React الخاص بي يحدث خطأ معين وأقوم بعمل catch لهذا الخطأ وتظهر رسالة خطأ من صنعي، ولكن بعد ثانية بالضبط تظهر صفحة الخطأ الخاصة بـ React مما يؤدي إلى إختفاء صفحة التطبيق نفسه حتى مع إستعمال Error Boundaries. لذلك أريد تعطيل ميزة error overlay في وضع التطوير Development mode حتى لا تظهر هذه الرسائل في كل مرة.

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

لذلك أريد أن أحصل على إصدار المكتبات المثبتة من خلال ملف package.json ولكن برمجيًا أي ليس من خلال فتح الملف وقراءته يدويًا بل من خلال دالة ما أو شيء من هذا القبيل. أعلم أن create-reacte-app يمنع إستدعاء الملفات من خارج مجلد src لذلك لا يخطر على بالي حل لهذه المشكلة.

أريد أن أشغل مشروع React محليُا لكن بإستخدام HTTPS ولا أعرف كيف، بحثت عن طريقة تثبيت شهادة SSL محليًا أو مع NPM ولكن لم أجد نتيجة أو شرح لكيفية فعل ذلك، هل يمكن فعل ذلك من الأساس أم يجب أن أقوم برفع التطبيق على إستض

لدي الكود التالي:

import React, { useState } from "react";
import ReactDOM from "react-dom";

function Settings() {
  const [username, setUsername] = useState();

  return (
    <input
      value={username}
      onChange={(e) => {
        setUsername(e.target.value);
        console.log(username);
      }}
    />
  );
}

الكود كما هو ظاهر بسيط للغاية ولكن المشكلة هي أن console.log لا تقوم بعرض القيمة الحالية بل القيمة القديمة!! بالرغم من أن حالة المكون يتم تحديثها بنجاح. ما السبب في ذلك؟ وكيف يمكنني تخطي هذه المشكلة؟

أتعلم حاليًا Redux لعمل state management لطبيق React وبالصدفة سمعت بـ Facebook Flux لكني لا أعرف الفرق بينهم ولا الأسباب التي تجعلني أتعلم Redux بدلًا من Facebook Flux بإستثناء أن الأغلبية تستعمل Redux - على حد علمي - فهل توجد فروقات جوهرية تجعلني أستخدم أحدًا منهما بدلًا عن الآخر؟ أم توجد حالات لإستخدام كلٍ منهما؟

أنا أستخدم React وReact-router لعمل SPA ولدي API يرجع لي ملف في شكل response، كيف أقوم بتحميل الملف لدى المستخدم بدون أن يتم فتح تبويب جديد لعرض الملف؟ أعلم أنه يجب أن يتم عمل endpoint يرجع response مع header مثل Content-Type و Content-Disposition لكن ليس لدي تحكم في الـ  API لذلك أريد أن أقوم بذلك من خلال React

هل توجد طريقة لعمل جملة if else  في داخل دالة render مثلًا بهذا الشكل:

render(){
    return (
        <div>
            if (this.props.found) {<h1>Some Content</h1>}
            else {<h1>Not Found<h1/>}
        </div>
    )
}

بالطبع الكود السابق لن يعمل، لكني أحاول عمل شيء كهذا بدلًا من عمل جملتين return واحدة في داخل if وواحدة في else بالشكل التالي:

render(){
  if (this.props.found) {
    return (
        <div>
            <h1>Some Content</h1>
        </div>
    )
  } else {
    return (
      <div>
      <h1>Not Found</h1>
      </div>
    )
  }
}

فهل هناك طريقة لفعل مثل الكود السابق ولكن من داخل جملة return نفسها لكي لا أكرر باقي الكود مرتين؟

لدي نموذج form به الكثير من المدخلات (عناصر input)، وكنت أتسأل إن كان هناك طريقة لجلب القيمة من عناصر input هذه في React، أعلم أنه يمكنني أن أستخدم useState مع عمل onChange event لكن كما قلت سابقًا أن النموذج يحتوي على الكثير من عناصر input ولا أريد أن أقوم بعمل state و handler لكل عنصر منهم، لذا هل توجد طريقة أخرى لعمل هذا الأمر بطريقة أسهل بدلًا من هذا التكرار المتعب؟

لدي الدالة التالية:

export function getPosts() {
    const response = axios.get(`${my_URL}`);
    return {
        type: GET_POSTS,
        payload: response
    }
}

كيف أقوم بعمل إختبار لمثل هذه الدالة؟ قرأت أن Jest يمكنه أن يقوم بعمل إختبار للدوال من نوع asynchronous من خلال إستخدام بيانات وهمية، لكن لا أعرف كيف أقوم بتمرير هذه البيانات الوهمية.

ما أريد فعله هو عمل مكون يأخذ props لتحدد ما إن كان العنصر سيكون من نوع h1 - h2 - h3 - h4 - h5 - h6 بالشكل التالي:

<h{this.props.num}>{this.props.content}</h{this.props.num}>

حاولت أن أستعمل المكون كالتالي:

<CustomTag num="1" content="Hello, World!" />

وتوقعت أن تكون النتيجة كالتالي:

<h2>Hello, World!</h2>

لكن يبدو أن الطريقة السابقة لا تعمل، هل هناك حل بدل من إستعمال جمل if متعددة لتحديد نوع العنصر؟

أواجه مشكلة في تغيير محتوى الصفحة في React عند إستعمال router. أريد فقط إظهار قائمة من المستخدمين، وعند الضغط على أحد المستخدمين يجب أن ينتقل إلى صفحة خاصة بتفاصيل المستخدم. هنا ملف router الخاص بي:

import React from "react";
import ReactDOM from "react-dom";
import { Router, Route } from "react-router";
import { BrowserRouter } from 'react-router-dom';

import People from "./components/People";
import Profile from "./components/Profile";

ReactDOM.render((
  <BrowserRouter>
        <Route path="/" component={People} />
        <Route path="/profile" component={Profile} />
  </BrowserRouter>
), document.getElementById('root'))

ما يحدث هو أني عندما أذهب إلى المسار /profile لا يتغير محتوى الصفحة بينما أي مسار آخر يعطي خطأ 404 لذا أعتقد أن react-router يعمل بشكل سليم، لكن لا أعلم سبب مشكلة عدم تغير محتوى الصفحة؟

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

<button onclick="function1(); function2();">click me</button>

لكن كيف أقوم بنفس الشيء في React بدون أن أستعمل دوال خارجية (أي دون أن أقوم بعمل دالة تستدعي الدالتين function1 - function2)؟ هل هذا ممكن في React؟

هل من الآمن تخزين JWT في localStorage باستخدام ReactJS؟ 

أقوم حاليًا ببناء تطبيق من صفحة واحدة SPA باستخدام ReactJS. قرأت أن أحد أسباب عدم استخدام localStorage هو بسبب ثغرات XSS. ونظرًا لأن React تتخطى escapes كل مدخلات المستخدم، فهل سيكون استخدام localStorage آمنًا الآن؟

في مكونات الصنف class components، تقوم this.setState بعمل batch إن كانت بداخل دالة لمعالجة حدث ما event handler، لكن ما الذي سيحدث إن تم تحديث حالة المكون من خارج event handler بإستخدام useState؟

function Component() {
  const [firstState, setFirstState] = useState('first');
  const [secondState, setSecondState] = useState('second');

  function handleClick() {
    Promise.resolve().then(() => {
      setfirstState('First State Changed');
      setsecondState('Second State Changed');
    });
  }

  return (
    <button onClick={handleClick}>
      {firstState}
      <br />
      {secondState}
    </button>
  )
}

ما الذي سيحدث في الكود السابق؟ هل سيتم تحديث الحالة وعرضها أيضًا في المتصفح؟

أنا أستخدم الإصدار الأخير من حزمة react-router ، المسمى react-router-dom. أريد معرفة كيفية إجراء إعادة التوجيه redirect بعد طلب POST. لقد كنت أقوم بعمل هذا الرمز ، ولكن بعد إتمام الطلب، لا يحدث شيء. راجعت الكود أكثر من مرة ومازلت لا أفهم سبب المشكلة.

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

import React, { PropTypes } from 'react';
import { Redirect } from 'react-router'
import axios from 'axios';

import AppForm from '../../components/Form';


class FormPage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      errors: {},
      user: {
        username: '',
        email: '',
        password: '',
        confirmPassword: ''
      }
    };

    this.handleForm = this.processForm.bind(this);
    this.changeUser = this.changeUser.bind(this);
  }

  changeUser(event) {
    const target = event.target;
    const field = target.name;
    const user = this.state.user;
    user[field] = target.value;

    this.setState({
      user.field: field
    });
  }

  async handleForm(event) {
    event.preventDefault();

    const username = this.state.user.username;
    const email = this.state.user.email;
    const password = this.state.user.password;
    const confirmPassword = this.state.user.confirmPassword;
    const formData = { username, email, password, confirmPassword };

    axios.post('/register', formData, { headers: {'Accept': 'application/json'} })
      .then((response) => {
        this.setState({
          errors: {}
        });

        // السطر التالي لا يفعل شيء
        <Redirect to="/" />
      }).catch((error) => {
        const errors = error.response.data.errors ? error.response.data.errors : {};
        errors.summary = error.response.data.message;

        this.setState({
          errors
        });
      });
  }

  render() {
    return (
      <>
        <div>
          <AppForm 
            onSubmit={this.handleForm}
            onChange={this.changeUser}
            errors={this.state.errors}
            user={this.state.user}
          />
        </div>
      </>
    );
  }
}

export default FormPage;

أريد أن أعرف كيف أقوم بتثبيت Tailwind CSS في React بدلًا من إستعمال CDN وبذلك يمكنني تخصيصه كما أريد. حاولت تثبيته بأكثر من طريقة ولكن تحدث مشكلات كثيرة ولا أعرف السبب.  من ضمن هذه المشكلات أنه لا يتم إضافة Prefix لخواص CSS التي تحتاج إلى ذلك. وعندما نجحت مرة في تثبيت Tailwind لم كان يجب علي أن أقوم بإعادة بناء build الملفات  كل مرة من خلال سطر الأوامر.

أرجو أن يساعدني أحد في شرح كيفية التثبيت بشكل منظم!

لدي مكون React وفي داخلة أحاول أن أخزن عنصر HTML في متغير بالشكل التالي:

var myElement = '<div>simple text and <strong>strong text</strong></div>';

ثم أحاول أن أعرض هذا العنصر المُخزن في المتغير بالشكل التالي:

render: function() {
    return (
        <div className="container">{myElement}</div>
    );
}

كيف يمكنني أن أعرض العنصر السابق في DOM، سمعت عن دالة dangerouslySetInnerHTML ولكن أعتقد أنها تسبب مشكلة من نوع ما، هل يجب أن أستعملها؟

لدي كائن محفوظ في حالة المكون component state، وأريد أن أعرف هل من الممكن أن أقوم بتحديث خصائص كائن في حالة المكون بهذه الطريقة:

this.state = {person: { name: 'Adam', age: 22 }}

حاولت أن أجرب بنفسي الأكواد التالية:

// هذا السطر يسبب syntax error 
this.setState({person.name: 'Ahmed'});

// بينما هذا السطر لا يفعل شيء البتة
this.setState({person: {name: 'Ahmed'}})

هل يمكن فعل ذلك من الأساس أم يجب أن أغير بنية الكائن نفسه؟

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

class ClassComponent extends React.Component{
  
  // دالة عادية يتم تنفيذها عند الضغط على العنصر p
  clickHandler(e){
    alert('Hello, World!');
  }
  
  render(){
    return <p onClick={clickHandler}>Content</p>
  }
}

ما لاحظته هو أنه يمكن إستخدام أكثر من طريقة في الجزء onClick={someEventHandler} كالتالي على سبيل المثال:

return <p onClick={this.clickHandler.bind(this)}>Content</p>

return <p onClick={(e) => { this.clickHandler(e) }>Content</p>

return <p onClick={this.clickHandler}>Content</p>

ما الفرق بين كل طريقة من الطرق السابقة؟ هل يجب أن ألتزم بطريقة واحدة منهم أم توجد حالات لإستعمال كل واحدة منهم؟ 

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

Uncaught TypeError: Cannot read property 'setState' of undefined

وهذا هو مكون React:

class Timer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {count : 1};
      
        // أضفت السطر التالي لكن المشكلة لم تحل
        this.increaseCounter.bind(this);
    }

    increaseCounter() {
        this.setState({
            count : this.state.count + 1
        });
    }

    render() {
        return (
            <div>
                <p>{this.state.count}</p>
                <button onClick={() => this.increaseCounter()}>Increase</button>
            </div>
        );
    }
}

حتى بعد عمل binding لدالة increaseTimer لازالت المشكلة موجودة.

أبحث عن طريقة لاكتشاف ما إذا كان حدث النقر click event قد حدث خارج أحد المكونات (أي ضغط المستخدم على مكون آخر)،في jQuery توجد الدالة closest لمعرفة ما إذا كان الهدف target  هو نفس عنصر DOM أو أحد العناصر الأباء له. فإن كان الهدف target ينتمي إلى أحد العناصر الفرعية (الأبناء)،  لا يعتبر خارج المكون.

لذا في المكون الخاص بي أريد كتابة دالة للقيام بمثل هذا الأمر (التأكد من أن حدث النقر قد تم خارج هذا المكون). أعتقد أنه عندما تعمل هذه الدالة، أحتاج إلى مقارنة الهدف target مع عناصر DOM التابعة للمكون الخاص بي. 

يحتوي حدث النقر على خصائص مثل "path" الذي يبدو أنه يحمل مسار DOM الذي سلكه الحدث. لست متأكدًا مما يجب أن أكتبه في هذه الدالة.

هل يقوم React بإعادة عرض re-render جميع المكونات (والمكونات الفرعية) في كل مرة يتم فيها استدعاء setState ()؟ إذا كان الأمر كذلك، لماذا؟ اعتقدت أن الفكرة كانت أن React يقوم بإعادة العرض بأقل قدر ممكن - عندما تتغير الحالة - لكي يكون الموقع أسرع.

في المثال البسيط التالي، يتم عرض كلا الصنفين مرة أخرى عند الضغط على النص، على الرغم من حقيقة أن الحالة لا تتغير عند النقرات التالية (النقرة الثانية وما بعدها)، حيث يقوم الحدث onClick دائمًا بتعيين الحالة إلى نفس القيمة:

var Child = React.createClass({
    render: function() {
        var timeNow = new Date().getTime();

        return (
            <p>Child Time: {timeNow}</p>
        );
    }
});

var App = React.createClass({
    handelClick: function() {
        this.setState({'test':'value'});
    },

    render: function() {
        // هذا السطر لا يجب أن يتغير حيث لا يتم تحديث الحالة بقيمة جديدة
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.handelClick}>
              <p>App Time: {currentTime}</p>
              <p>اضغط للتحديث</p>
              <Child/>
            </div>
        );
    }
});

ReactDOM.render(<App/>, document.body);

أحاول استخدام خطافات React الجديدة ولدي مكون لعرض ساعة مع عداد يفترض أن يزداد كل ثانية. ومع ذلك ، فإن القيمة لا تزيد عن واحد. وهنا الكود الخاص بي:

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);
    };
  }, []);

  return (
    <div>Seconds: {clock}</div>
  );
}

ReactDOM.render(<Time />, document.getElementById('app'));

تأكدت من أن useEffect ستعمل مرة واحدة من خلال إضافة مصوفة فارغة كعامل ثاني لهذا الخطاف، لكن يبدو أن هذا لا يحل المشكلة.