مشاريع في اطار عمل رياكت
السلام عليكم ..
طاب مسائكم ،
انا مطور واجهات امامية بإطار عمل رياكت،
قمت بتعلم اساسيات رياكت من اكثر من دورة وقمت بالكثير من التطبيقات العملية غير المتكاملة ،
لكنني أبحث عن مشروع او مشروعين كبيران بعض الشيء ليضمو مفاهيم رياكت ويقومو بمحاكاة سوق العمل حتى أتمكن من اضافتهما في ملفاتي الشخصية في مواقع العمل الحر ، وحبذا لو احدهما ecommerce.
لكن جميع المحتوى الموجود على يوتيوب يأتي بالاضافة الى واجهات خلفية, او من الوارد انني لم احسن البحث.
هل من نصيحة او تجربة شخصية يمكنني الأستفادة منها .
التعليقات
وعليكم السلام، أهلا بك،
أولا، هل تريد أن تصبح مطور تطبيقات كاملة (Full-stack) أم مطور واجهات أمامية (Front-end) فقط؟ لأن React هو مكتبة لتطوير الواجهات الأمامية فقط وليس موجها لتطوير الواجهات الخلفية.
ومع ذلك، مع التحديثات الجديدة ومع استخدام إطار عمل متكامل مثل NextJS، فسيصبح بالإمكان استخدام معرفتك في React لتطوير واجهات خلفية بسرعة أيضا، لأن NextJS يعتمد بشكل أساسي على React .
و إذا كنت تحسن Node JS و إطار العمل Express، فيمكنك إنشاء واجهات خلفية بها بالطريقة التقليدية. ويمكن أيضا إنشاء واجهات خلفية بلغات برمجة وأطر عمل مختلفة إذا لم ترد استخدام JavaScript على الخادم.
وبما أنك تريد استهداف سوق العمل الحر، وتريد إنشاء مواقع E-commerce لوحدك، فهنا لا يمكن أن تكون مطور واجهات أمامية (Front-end developer) فقط، بل يجب أن تكون مطورا كاملا ( Full-stack developer)، لأنك ستكون المسؤول عن كل شيء في المشروع. ففي معظم المشاريع، العميل يطلب منك إنشاء كل شيء وقد لا يفهم العميل أصلا الفرق بين الواجهات الأمامية والخلفية، فالعميل يريد المنتج جاهزا للاستخدام ولا تهمه هذه المصطلحات.
لذلك، لست أفهم سبب اعتراضك على المحتوى الذي وجدته يدرس الواجهات الخلفية، فأنت في حاجة إلى دراستها على أية حال لكي تستطيع إنشاء تطبيقات متكاملة.
حاليًا لتصبح مطور React عليك تعلم Next.js وأيضًا تعلم Typescript فتلك هي المهارات المطلوبة في سوق العمل، لا يكفي أن تتعلم React فقط حاليًا.
ومن خلال Next.js التي تعتمد على React ستجد أن عملية إنشاء الواجهة الخلفية سهلة ويتم إدارتها من قبل Next.js حيث يتم إنشاء الـ API's والربط مع قاعدة البيانات والأمر ليس بالصعب، تعلم الأساسيات التي تكفيك فقط بخصوص الواجهة الخلفية.
ولا تقلق في الشركات في حال قمت بالتخصص في الواجهة الأمامية فقط وليس Full-stack فهناك مطور واجهة خلفية سيتكفل بذلك، وستتكفل أنت بالواجهة الأمامية وربط Next.js بالـ API فقط.
أما في حال أردت سوق العمل الحر عليك أن تصبح مطور Full-stack
عامًة تستطيع الإعتماد على Firebase كواجهة خلفية في حال لا تريد تعلم Next.js.
شكرا لكم على هذا التفاعل .
هدفي حاليا هو ليس ان اكون full stack ، اريد اولا ان استوفي جميع ما يمكنه فعله ال frontend بشكل تام ، سواء من جهة react او next ,
وخاصة ما يترتب عليه في الشركات ،
وفي وقت الوصول الى هذه المرحلة سوف ابدأ بالتعامل مع قواعد البيانات والواجهات الخلفية ،
انا فعليا مشترك بدورة اكادمية حسوب الخاصة بالجافا سكريبت لكنني اعتقد ان المشاريع التي توجد فيها تنتقل بين تطبيقات الموبايل وبين الواجهات الخلفية وتطبيقات الكومبيوتر . لذلك اعتقد ان المشاريع التي توجد فيها والدراسة هذه ليست هذا الوقت المناسب لها ، فأنا صراحة من الممكن ان يطلبني احد اقربائي قريبا للعمل في بلد اخر ، والوقت هو مشكلتي الوحيدة ، فهو ليس من صالحي وليس بامكاني التحكم حاليا فيه ، ولكن ان تكلمنا عن الهدف فأنا من اهدافي ان اكون مطور ويب متكامل من الجهتين الأمامية والخلفية ،
ولكنني اريد انني عندما اتواصل مع احد ما واقول له انني frontend react ان اكون فعلا كذلك.
وبالنسبة ل typescript و next js
انا فعليا امتلك جميع الاساسيات . ولكنني لا اعلم كيف اوظفهم واعمل بهم من دون الخلط مع الواجهات الخلفية او بالأحرى لم احصل او ارى هكذا مشاريع .
حسنا إذا كنت تريد استخدام React حصرا بدون الحاجة إلى دمجها مع Next.js أو أي شيء له علاقة بالواجهة الخلفية، فيمكنك استخدام طريقة CDN (Content Delivery Network) التقليدية التي كان يستخدمها الجميع (ومازال كثير، ومنهم أنا) قبل اختراع Node.js و NPM.
الطريقة ببساطة هي تقوم بإنشاء صفحة HTML عادية، ثم تضيف إليها وسوم script التالية قبل كتابة أي شفرة تستخدم React:
<script src="https://unpkg.com/react@18/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
هذان السطران يقومان بدمج React و React DOM بصفحتك، يعني أنهما مكافئان للأمر:
npm install react react-dom
ولكن كما ترى هنا لم نستخدم Node.js.
بعد ذلك، من أجل كتابة شفرة تستخدم JSX، تحتاج إلى تضمين Babel أيضا، لأن المتصفح لا يفهم JSX، لذلك نضيف سطرا ثالثا هكذا:
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
والآن يمكننا كتابة أية شفرة React بهذه الطريقة:
<script type="text/jsx">
const app = document.getElementById('app');
const root = ReactDOM.createRoot(app);
root.render(<h1>حسوب I/O</h1>);
</script>
لاحظ كيف أن نوع عنصر script هنا هو text/jsx. وضع هذا النوع بهذه الطريقة هو أمر ضروري حتى يعرف Babel أنه يجب تحويل محتوى هذا العنصر إلى محتوى يفهمه المتصفح (أي تحويله إلى text/javascript).
للمزيد من المعلومات حول هذه الطريقة يمكنك قراءة هذا الدرس:
و عليكم السلام
اذا كنت تبحث عن فكرة مشروع لتقوم بتطبيقها و تزيد من خبرتك فيمكنك تصفح مواقع العمل الحر و رؤية المشاريع التي يطلبها الزبائن و اختار منها مايناسبك و طبقه , يوجد الكثير من المشاريع التي من الممكن أن تزيد خبرتك.
أما اذا كنت تبحث عن مشاريع مفتوحة المصدر لتتعلم منها فستجد منها الكثير فقط قم بالبحث عنها (react open source project) أو (react templates) و قم بتنزيلها و ابدأ بها ,
أما اذا كانت مشكلتك هي في الواجهات الخلفية فيمكنك الاستغناء عنها حاليا و قم بانشاء داتا محلية في مشروع الفرونت لديك و اعرضها , أو يمكنك استخدام firebase, أو يمكنك أن تتعاون مع أحد المهتمين بتعلم الواجهات الخلفية إن وجدت أحد يرغب بالتدرب و التعلم ذلك بحيث يقوم هو بإنشاء ال api و تقوم أنت بتطوير الواجهات الأمامية و بهذه الطريقة تتدربان كليكما