حل مشكلة react

أرجو توضيح المشكلة وأيضًا رفع مجلد المشروع بالكامل.

يبدوا أن المشكلة هي بخصوص استعمال الوظيفة render في مكون وظيفي functional component وهي في هاته غير جائز استعمالها، لأنها تتفرع كتابع عن أي صنف يرث الصنف React.component أو بمعنى آخر، عن أي مكون class component. 

لا داعي لتصريح واستعمال render() ولذلك سيمكنك مباشرة استخدام السياق التالي:

import React from 'react'
export  function About() {

return (
        <div>About</div>
      )
}

لديك مشكلة في استعدعاء المكون About في ملف App.js.

سوف أشرح لك خطوات عمل المشروع من البداية حتي أستدعاء المكون About.

لإنشاء مشروع React جديد، يمكن اتباع الخطوات التالية:

1. استخدام create-react-app لإنشاء مشروع React:

npx create-react-app my-app
cd my-app
npm start

2. بعد تشغيل المشروع بنجاح ، يمكن إنشاء مكون جديد باستخدام React كـ About.js في مجلد src/components:

import React from 'react';

function About() {
  return <div>Hello</div>;
}

export default About;

3. تعديل App.js لإستدعاء مكون About في الصفحة الرئيسية:

import About from './components/About';

function App() {
  return (
    <div>
      <About />
    </div>
  );
}

export default App;

4. يتم تشغيل المشروع الآن باستخدام الأمر:

npm start

و يجب أن يتم طباعة "Hello" في الصفحة الرئيسية.

يرجى ملاحظة أنه سيتعين عليك التأكد من أن React و ReactDOM مثبتان بالفعل ، وإذا لم يكن كذلك ، فيمكن استخدام npm لتثبيتهما:

npm install react react-dom

بالإضافة إلى ما تم ذكره من قبل عدنان، هناك مشكلة في ملف App.js حيث أنك قمت بكتابة return كدالة وهو أمر غير صحيح وأيضًا قمت بتصدير المكون داخل دالة المكون نفسه وهو امر غير صحيح، لذلك عليك بتعديل الكود ليصبح بالشكل التالي:

import logo from './logo.svg';
import './App.css';
import About from './components/About/About.jsx';
import Home from './components/home.jsx';

function App() {
  return;
  {
    //ضع كود المكون هنا أو المكونات الأخرى
  }
}

export default App;

والأفضل هو بناء المشروع React من خلال تنفيذ السكريبت التالي:

npx create-react-app اسم مجلد المشروع

واستبدل اسم مجلد المشروع بالاسم الذي تريده للمجلد.

أو تستطيع استخدام vite وهو الأمر الذي أفضله لإنشاء وتجميع مشروع React من خلال الأمر التالي:

 npm create vite@latest

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