5 أخطاء ارتكبتها عند بدء مشروع رد الفعل الأول الخاص بي

أنت تعرف ما يشبه اختيار لغة أو إطار عمل جديد. في بعض الأحيان ، توجد وثائق رائعة لمساعدتك في العثور على طريقك من خلالها. لكن حتى أفضل الوثائق لا تغطي كل شيء على الإطلاق. وعندما تعمل بشيء جديد ، فأنت ملزم بإيجاد مشكلة ليس لها حل مكتوب.

هكذا كان الأمر بالنسبة لي في المرة الأولى التي أنشأت فيها مشروع React - و React هي واحدة من تلك الأطر ذات التوثيق الرائع ، خاصة الآن مع المستندات التجريبية. لكنني ما زلت أكافح في طريقي. لقد مر وقت طويل منذ ذلك المشروع ، لكن الدروس التي اكتسبتها منه لا تزال حديثة في ذهني. وعلى الرغم من وجود الكثير من البرامج التعليمية حول "الكيفية" في React ، فقد اعتقدت أنني سأشارك ما كنت أتمنى أن أعرفه عندما استخدمته لأول مرة.

إذن ، هذا ما هو هذا المقال - قائمة بالأخطاء المبكرة التي ارتكبتها. آمل أن يساعدوا في جعل تعلم React أكثر سلاسة بالنسبة لك.

استخدام تطبيق create-react-app لبدء مشروع

TL ؛ DR استخدم Vite أو الطرود.

إنشاء تطبيق React (CRA) هي أداة تساعدك على إعداد مشروع React جديد. إنه يخلق بيئة تطوير مع أفضل خيارات التكوين لمعظم مشاريع React. هذا يعني أنك لست مضطرًا لقضاء الوقت في تكوين أي شيء بنفسك.

كمبتدئ ، بدا هذا وكأنه طريقة رائعة لبدء عملي! لا يوجد تكوين! فقط ابدأ البرمجة!

تستخدم CRA حزمتين شائعتين لتحقيق ذلك ، webpack و Babel. webpack عبارة عن حزمة ويب تعمل على تحسين جميع الأصول في مشروعك ، مثل JavaScript و CSS والصور. Babel هي أداة تتيح لك استخدام ميزات JavaScript أحدث ، حتى إذا كانت بعض المتصفحات لا تدعمها.

كلاهما جيد ، ولكن هناك أدوات أحدث يمكنها القيام بالمهمة بشكل أفضل ، على وجه التحديد برغي و مترجم ويب سريع (SWC).

هذه البدائل الجديدة والمحسّنة أسرع وأسهل في التهيئة من webpack و Babel. هذا يجعل من السهل ضبط التكوين الذي يصعب القيام به في إنشاء التطبيق دون إخراج.

لاستخدامهما عند إعداد مشروع React جديد ، عليك التأكد من أنك تمتلكهما العقدة الإصدار 12 أو أعلى مثبتًا ، ثم قم بتشغيل الأمر التالي.

npm create vite

سيُطلب منك اختيار اسم لمشروعك. بمجرد القيام بذلك ، حدد React من قائمة الإطارات. بعد ذلك ، يمكنك تحديد أي منهما Javascript + SWC or Typescript + SWC

ثم سيكون عليك تغيير الدليل cd في مشروعك وقم بتشغيل الأمر التالي ؛

npm i && npm run dev

يجب أن يؤدي هذا إلى تشغيل خادم تطوير لموقعك باستخدام عنوان URL localhost:5173

وهي بهذه البساطة.

باستخدام defaultProps للقيم الافتراضية

TL ؛ DR استخدم معلمات الوظيفة الافتراضية بدلاً من ذلك.

يمكن تمرير البيانات إلى مكونات React من خلال شيء يسمى props. تتم إضافتها إلى مكون تمامًا مثل السمات الموجودة في عنصر HTML ويمكن استخدامها في تعريف المكون عن طريق أخذ القيم ذات الصلة من كائن الخاصية الذي تم تمريره كوسيطة.

// App.jsx
export default function App() { return <Card title="Hello" description="world" />
} // Card.jsx
function Card(props) { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> );
} export default Card;

إذا كانت القيمة الافتراضية مطلوبة من أي وقت مضى لـ propأطلقت حملة defaultProp يمكن استخدام الخاصية:

// Card.jsx
function Card(props) { // ...
} Card.defaultProps = { title: 'Default title', description: 'Desc',
}; export default Card;

باستخدام JavaScript الحديث ، من الممكن إتلاف ملف props الكائن وتعيين قيمة افتراضية له جميعًا في وسيطة الوظيفة.

// Card.jsx
function Card({title = "Default title", description= "Desc"}) { return ( <div> <h1>{title}</h1> <p>{description}</p> </div> )
} export default Card;

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

لسوء الحظ، defaultProps تتطلب بعض التحويل ليقرأه المتصفح نظرًا لأن JSX (JavaScript XML) غير مدعوم خارج الصندوق. قد يؤثر هذا على أداء التطبيق الذي يستخدم الكثير من ملفات defaultProps.

لا تستخدم propTypes

TL ؛ DR استخدم TypeScript.

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

بهذه الطريقة ، إذا تم تمرير نوع بيانات خاطئ لمكون أو إذا لم يتم توفير خاصية مطلوبة ، فإن React ستظهر خطأ.

// Card.jsx
import { PropTypes } from "prop-types"; function Card(props) { // ...
} Card.propTypes = { title: PropTypes.string.isRequired, description: PropTypes.string,
}; export default Card;

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

// Card.tsx
interface CardProps { title: string, description?: string,
} export default function Card(props: CardProps) { // ...
}

TypeScript هي لغة برمجة يتم إنشاؤها فوق JavaScript عن طريق إضافة فحص ثابت من النوع. يوفر TypeScript نظام كتابة أكثر قوة ، يمكنه اكتشاف المزيد من الأخطاء المحتملة وتحسين تجربة التطوير.

استخدام مكونات الفصل

TL ؛ DR: اكتب المكونات كوظائف

يتم إنشاء مكونات الصنف في React باستخدام فئات JavaScript. لديهم بنية أكثر توجهاً للكائنات بالإضافة إلى بعض الميزات الإضافية ، مثل القدرة على استخدام this طرق الكلمة الأساسية ودورة الحياة.

// Card.jsx
class Card extends React.Component { render() { return ( <div> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </div> ) }
} export default Card;

أنا أفضل كتابة المكونات ذات الفئات على الوظائف ، لكن فئات JavaScript أكثر صعوبة في الفهم والمعرفة للمبتدئين this يمكن أن تصبح مربكة للغاية. بدلاً من ذلك ، أوصي بكتابة المكونات كوظائف:

// Card.jsx
function Card(props) { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> )
} export default Card;

مكونات الوظيفة هي ببساطة وظائف JavaScript تقوم بإرجاع JSX. إنها أسهل في القراءة ، ولا تحتوي على ميزات إضافية مثل this الكلمات الرئيسية و طرق دورة الحياة مما يجعلها أكثر أداءً من مكونات الفصل.

تتمتع مكونات الوظيفة أيضًا بميزة استخدام الخطافات. رد فعل خطاف يسمح لك باستخدام ميزات الحالة وميزات React الأخرى دون كتابة مكون فئة ، مما يجعل شفرتك أكثر قابلية للقراءة وقابلة للصيانة وإعادة الاستخدام.

استيراد React دون داع

TL ؛ DR: ليست هناك حاجة للقيام بذلك ، إلا إذا كنت بحاجة إلى خطافات.

منذ إصدار React 17 في عام 2020 ، أصبح من غير الضروري الآن استيراد React في الجزء العلوي من ملفك كلما أنشأت مكونًا.

import React from 'react'; // Not needed!
export default function Card() {}

لكن كان علينا القيام بذلك قبل React 17 لأن محول JSX (الشيء الذي يحول JSX إلى JavaScript عادي) استخدم طريقة تسمى React.createElement لن يعمل هذا إلا عند استيراد React. منذ ذلك الحين ، تم إطلاق محول جديد يمكنه تحويل JSX بدون createElement الأسلوب.

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

import { useState } from 'react'; export default function Card() { const [count, setCount] = useState(0); // ...
}

كانت تلك أخطائي المبكرة!

ربما تكون كلمة "خطأ" قاسية جدًا لأن بعض الممارسات الأفضل ظهرت لاحقًا. ومع ذلك ، فإنني أرى الكثير من الحالات التي لا يزال يتم فيها استخدام الطريقة "القديمة" لفعل شيء ما بنشاط في المشاريع والبرامج التعليمية الأخرى.

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

إذا كنت تستخدم React منذ فترة ، فما هي بعض الأشياء التي كنت ترغب في معرفتها قبل أن تبدأ؟ سيكون من الرائع الحصول على مجموعة لمساعدة الآخرين على تجنب نفس الصعوبات.

• محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
• بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. الوصول هنا.
• المصدر https://css-tricks.com/5-mistakes-starting-react/