عبدالهادي

Members
  • عدد منشوراتي

    5
  • تاريخ الإنضمام

  • تاريخ اخر زياره

السمعه بالموقع

6 Neutral

عن العضو عبدالهادي

  • الرتبه
    مبدع جديد

اخر الزوار

49 زياره للملف الشخصي
  1. بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته أهلا و سهلا بكم اخواني الأعزاء، في هذه المقالة سنتطرق الى أسلوب ماتع في طريقة التحقق من نوع البيانات (PropTypes) في مكتبة React و React Native، اذا كنت جديداً معنا أنصحك بالعودة الى دروس سابقة لنمشي بخطوات مبسطة لنكمل المسيرة مع بعض و تكون فاهماً لهذه المقالة بحول الله. المقالات السابقة: عند بداية بنائك لتطبيقك أيا كان نوعه تطبيق ويب أو تطبيق موبايل، عادة ما نرسل بيانات معينة عبر (props) أو نطلب من المستخدم ادخال بعض المعلومات، تواجهنا بعض المشاكل و تكثر لدينا (Bugs) في تطبيقنا بسبب أننا لا نتحقق من نوع المعلومات المدخلة، فمثلاً: لو طلبنا من مستخدمنا ادخال رقم الهاتف و أخطأ أو تعمّد ادخال أحرف لاتينية/عربية! خطا فادح في برمجيتك ان كنت لا تتحق من صحة المعلومات : هل هي نصيّة؟ أم رقميّة؟ هل هو كائن؟ هل المعلومة مطلوبة؟ فما بالك بانشاء مشاريع كبيرة جداً كل مهمّاتها معلومات المستخدمين و وثائقهم و تحتفظ في قاعدة بيانات ضخمة! . لا يخفى على أحد أن جميع لغات البرمجة تحوي دوال التحقق و هذا ما يجب أن يكون فعلاً، كذلك مكتبة React تحوي مكتبة جزئية خاصة فقط بالتحققات و ستدعيها كلما دعت الحاجة لذلك. تسمى هذه المكتبة و الوظيفة في نفس الوقت بـ PropTypes . دعونا عبر مثال تطبيقي نطبّق خاصية التحقق من نوع البيانات بعدها نشرح كل جزئية على حدى: لنستفيد من مكتبة التحقق علينا استدعاؤها في تطبيقنا كالتالي: import PropTypes from 'prop-types'; // for reactjs web apps - import { PropTypes } from 'react'; //for react native نبني مثال بسيط تطبيق ويب يعرض جميلة بتنسيق H1 فيها كملة أهلاً، ثم يُرفق معها اسم معين عبر (props). نحن الآن هدفنا أن نتحقق من البيانات التي يود أن يدخلها المستخدم. import PropTypes from 'prop-types'; class Greeting extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); } } Greeting.propTypes = { name: PropTypes.string }; لاحظ أننا أضفنا التحقق بأسفل الكلاس و خارج قوسيه المعكوفتين، (ينبغي أن تعرف أننا نكتب بصيغة ES6 لا ES5 القديم). Greeting.propTypes = { name: PropTypes.string }; اذا، يجب علينا ارفاق اسم الكلاس (Class) تتبعه كلمة (.propTypes) بعدها نفتح قوسين معكوفتين: ندخل اسم المتغير الذي يحمل البيانات - في مثالنا هذا : name. نرفق بعده نوع الصيغة التي تودها، في مثالنا هذا .. البيانات نصيّة لا غير PropTypes.string و string تعني نصيّة. يمكننا أن نخبر أن برنامجنا أن هذه المعلومة مطلوبة (Required) و يجب حتما ادخالها و لاتبقى فارغة عبر الوظيفة isRequired لتصبح كالتالي: Greeting.propTypes = { name: PropTypes.string.isRequired }; و هناك أنوع كثيرة من صيغ التحقق كـ: • PropTypes.array // مصفوفة • PropTypes.bool // منطقية • PropTypes.func // وظيفة • PropTypes.number // رقم • PropTypes.object // كائن • PropTypes.string // نص نصل الى نهاية درس اليوم، أي استفسار أو جملة مبهمة لا يردكم الكيبورد نحن متواجون باذن الله للرد على استفساراتكم. دعواتكم لنا.
  2. بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته أهلا و سهلا بكم اخواني الأعزاء، في هذه المقالة سنتطرق الى انشاء عارضة القوائم (ListView) في تطبيقات React Native، اذا كنت جديداً معنا أنصحك بالعودة الى دروس سابقة لنمشي بخطوات مبسطة لنكمل المسيرة مع بعض و تكون فاهماً لهذه المقالة بحول الله. المقالات السابقة: لو تفحصت في توثيقات React Native على موقعهم الرسمي تجد مكوناً أساسيا (core component) يسمى بـ ListView ، هذا الأخير يمكّنك من انشاء قائمة تمرير عمودية تظهر بها معلوماتك التي تجلبها من قاعدة البيانات أو معلوماتك معينة في مصفوفة (Arrays). معلومة: هذا المكونّ ليس وحده ضمن اطار React Native بل توجد مكونات أخرى تؤدي تقريباً نفس العمل كـ FlatList أو SectionList كلاهما يحمل أسلوباً مختلفا في كتابته لانشاء هذا العنصر يتوجب علينا برمجة (data source) أو مصدر بيانات و ملئِه بمصفوفة من الخصائص؛ لتكون مصدرا لبياناتها التي سنعرضها بعد قليل و نمررها بدالة أخرى تعرف بـ renderRow الى JSX. class List extends Component { constructor (props) { super (props); const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); this.state = { dataSource: ds.cloneWithRows(['row 1', 'row 2']) }; } render () { return ( <ListView dataSource = { this.state.dataSource } renderRow = { (rowData) => <Text> { rowData } </Text> } /> ); } } لنرى بقرب ماذا كتبنا: أنشأنا دالة بناء (constructor) و عرّفنا معها super كما أخبرتكم سابقاً أنها إلزامية جداً في صيغ (ES6). و ضمن دالة البناء أنشأنا نموذجاً : عارض مصدر بيانات القائمة (ListViewDataSource) و هذا العارض يحمل محددات (parameter) و أسس (argument) هي أربع: getRowData(dataBlob, sectionID, rowID) getSectionHeaderData(dataBlob, sectionID) rowHasChanged(previousRowData, nextRowData) sectionHeaderHasChanged(previousSectionData, nextSectionData) 1 - المحدد الأول (getRowData) : وظيفة تقوم بجلب البيانات المطلوبة (data required) لتعيدها الى الصف (Row). بامكانك تخصيصها لتعيد و تمرر ما تشاء الى العارض (ListViewDataSource) و لا يهم ان كتبتها في شفرتك أو لا .. لأنها تكون معرفة افتراضياً اذا كنت لا تحتاجها. 2 - المحدد الثاني (getSectionHeaderData) : وظيفة تقبل كذلك نقطة بيانات (blob of data) و قسمها الخاص (section ID) لتعيد فقط البيانات المطلوبة الى (section header). و لا يهم ان كتبتها في شفرتك أو لا .. لأنها تكون معرفة افتراضياً اذا كنت لا تحتاجها. 3 - المحدد الثالث (rowHasChanged) : هي وظيفة بمثابة تحسين الأداء، مصممة فقط لتعيد التقديم (re-render) الى الصفوف التي تم تغيير بيانات مصدرها. مختلفة عن المحددات السابقة (getRowData) و (getSectionHeaderData). مهمة للغاية و يجب عليك كتابتها ضمن العارض. 4 - المحدد الرابع (sectionHeaderHasChanged) : وظيفة اختيارية، تقارن (section headers) التي تحتاج الى اعادة تقديم (re-render). اذاً، أنشأنا حالة (State) أسميناها (dataSource) و استدعينا cloneWithRows الذي يحمل متغيرين - (dataBlob) : المعلومات التي تود تمريرها للعارض و (rowIdentities): هي اختيارية. لا تنسى (dataSource) الحاملة للمعلومات غير قابلة للتغيير. نعود مرة أخرى للمكوّن نفسه (ListView) و نمرر له البيانات التي أنشأناها مسبقاً: عبر (renderRow) التي تأخذ المعلومات من (dataSource) الأولية و تمررها الى (dataSource) الثانية في JSX. ما رأيك الآن، جميلة صح! طريقة سهلة و بسيطة لعرض قوائمك بسهولة. ان شاء الله تكون استمتعت بالدرس، أي استفسار أو جملة مبهمة لا يردكم الكيبورد نحن متواجون باذن الله للرد على استفساراتكم. دعواتكم لنا.
  3. السلام عليكم و رحمة الله، اليوم معنا درس جديد في سلسلة أسميتها (React Native .. تعلمها معنا في عالم البرمجة)، و كما أشرت سابقاً قد كتبت مقالين حول مكتبة رياكت أشرح فيها الأساسيات المهمة لكل مبتدئ .. ننتقل الآن لنبدأ درسنا في رياكت نيتف باللغة العربية، مع أول شرح في بعنوان ( ورقة الأنماط StyleSheet ) لنبدأ على بركة الله: تقبل مكونات الواجهة في React Native استدعاء خاصية تسمى بـ الأنماط (style) تحوي اسما (name) وقيمة (value) تشبه الى حد ورقة الأنماط في ترميز CSS StyleSheets مع استثناء واحد هو أنها أسماء تعريفها لا تحوي وجود مسافات أو علامات ترقيم أو علامة (-) كتضمين Css في شفرات الجافاسكربت . فمثلاً، في خصائص CSS نجد تسمية : border-radius لكن اذا ما نقلناها الى رياكت نيتف تصبح: borderRadius مع ملاحظة الحرف الكبير لكلمة Radius. لاستخدام و قراءة الأنماط في رياكت نيتف، يجب عليك تضمين مكون StyleSheet في رأس الملف الذي تحرره ليكون بامكانك التعامل معه بكل اريحية بأسلوب (render) . import { AppRegistry, StyleSheet, Text, View } from 'react-native'; دعونا نلقي نظرة حول أنواع تضمين ملفات الأنماط مع/ و خاج ملفات الجافسكربت: (هذه الشفرات الصغيرة هي للشرح فقط، نفسها نفس حال كتابتها في مشاريعك البرمجية) الأنماط المضمنة (Inline styles) النمط المضمن هو أسلوب يتم تعريفه ضمن شفراتك البرمجية الخاصة بك مباشرة داخل نفس المكوّن (Component) كإدراجك للنمط داخل تعليمات HTML. class Tasks extends Component { render () { return ( <View style = {{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF' }}> <Text style = {{ fontSize: 20, textAlign: 'center', margin: 10 }}> Welcome to React Native! </Text> </View> ) } } كما ترى في في الشفرة السابقة، اضفنا التنسيقات لكن شفرتنا أصبحت غير واضحة تماماً و صعب قراءتها بسهولة و تحليلها. ماذا لو قمنا تضمين تنسيقات كبيرة و متعددة! هل سيصبح بامكانك تعديلها بسرعة! اذا دعونا لنستعمل أسلوبا مختلفاً في تحرير الأنماط خارج المكونات الرئيسة و شفراتك البرمجية داخل نفس الملف. أسلوب (StyleSheet)، في نفس الملف class Tasks extends Component { render () { return ( <View style = { styles.container }> <Text style = { styles.welcome }> Welcome to React Native! </Text> </View> ) } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF' }, welcome: { fontSize: 20, textAlign: 'center', margin: 10 } )}; ماذا تلاحظ الآن، هذا أفضل بكثير من سابقه. قمنا بنقل أنماط المكون بعيدا عن شفراتك البرمجية و صنعنا له مرجعاً (reference) يقوم بتعريف تنسيقه دون الحاجة إلى إعادة كتابة نفس الأنماط المضمنة مراراً وتكراراً. و مع ذلك، فإن المشكلة التي نواجهها هو ملف طويل للغاية من تنسيقات قد تطول و تكبر كلما أضفنا مكونات أكبر و أكبر؛ هل سنضطر الى النزول للأسفل دائما لنعيد صياغة التنسيقات! لا طبعاً يمكننا استخدام أسلوب ثانٍ لنجعل تطبيقنا سهل التعديل و الاضافة عن طريق استيراد الملف لوحده. الأنماط (StyleSheet) كملف مستورد! قم بانشاء ملف .JS خاص و سمّه كما تشاء (styles.js): const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF' }, welcome: { fontSize: 20, textAlign: 'center', margin: 10 } )}; export default styles; و استدعه في ملفك الرئيسي الخاص بالتطبيق كالآتي: import styles from './styles.js'; class Tasks extends Component { render(){ return ( <View style = { styles.container }> <Text style = { styles.welcome }> Welcome to React Native! </Text> </View> ) } } هذا أفضل بكثير من سابقيه. صح! جعلنا هذا التطبيق سهلا و بسيطا يقرؤه أي شخص و يفهمه دون الحاجة لتضييع الوقت. بعض النصائح: هناك بعض الأساليب لا يعرفها البعض في جعل مكونك الخاص يقبل عدة تنسيقات بنفس النمط، كأن مثلا تعرف text1 و text2 بحجمين مختلفين لكن لهما نفس اللون عن طريق المصفوفات (Array) export default class Tasks extends Component { render() { return ( <View> <Text style={styles.red}>just red</Text> <Text style={styles.bigblue}>just bigblue</Text> <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text> <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text> </View> ); } } const styles = StyleSheet.create({ bigblue: { color: 'blue', fontWeight: 'bold', fontSize: 30, }, red: { color: 'red', }, }); دائماً اجعل متغيراتك معرّفة باسم واضح سهلة القراءة. لا تضيع وقتك و أنت تائه بين الأسماء ان لم تكتبها بشكل جيد. نصل الى نهاية مقال اليوم، أي استفسار أو جملة مبهمة لا يردكم الكيبورد نحن متواجون باذن الله للرد على استفساراتكم. دعواتكم لنا.
  4. السلام عليكم ورحمة الله، عدنا لكم من جديد بعد سلسلة بدأنا كتابتها حول تعلم و فهم مكتبة React، اذا كنت جديداً معنا يمكنك العودة للمقال السابق الذي افتتحنا به مجلسنا يتحدث حول مفهوم JSX: درس اليوم هام و جديد كلياً ، قلّما تجد الدورات الأجنبية تركّز عليه و تبسّطه للمتعلمين، لأنه بصراحة يحتاج الى شخص لديه تجربة سابقة بـالجافاسكربت و OOP و ES6، اذا كنت غير دارس لأحد أهمّ هذه المحطات الثلاث فلا أنصحك باكمال قراءة المقال لأنه سيكون مبهماً غير واضح. لنبدأ: أنواع المكونات (Component) الفرق يا أخي العزيز أنه في مكتبة الرياكت يوجد صنفين لكتابة المكونات (Components) - هم غير موجودين بالأساس لكن المبتدأ لازم يفهم - النوع الأول يسمى : مكونات رياكت مبسّطة (Simple React components) مكونات رياكت مركّبة (Complex React components) - في مكونات رياكت البسيطة [1] يمكنك من : ادخال معلومات مباشرة (hardcoded) أو ثابتة (static) على شكل صيغة HTML. استرجاع معلومات حيوية بسيطة مسترجعة من قاعدة بيانات محلية في شكل جيسون (JSON data) يمكنك دمجها في عدة مكونات أخرى و تركيبها في بعضها البعض. - في مكونات رياكت مركّبة [2] : هذه المكونات تكون أكثر تعقيداً مما سبق لأنها ستحوي جميع العمليات المنطقية و الدوال البرمجية المتعلقة بادخال و اخراج و تنظيم المعلومات، لكن في الأخير ستعود بصيغة HTML. حيث يمكنك: استعمال العمليات المنطقية و الدوال البرمجية المتعلقة بادخال و اخراج و تنظيم المعلومات. استعمال الدالة الخاصة بتغير الحالات (State). اضافة أساليب دورة الحياة (lifecycle). اضافة أساليبك الخاصة (custom methods) التي تود تشغيلها حيثما أردت أنت مثلاً، كالضغط على الأيقونة اظهار واجهة ما ..الخ. هذا كل ما تحتاجه لمعرفة المكونات، و الآن أصبحت لديك نظرة شاملة حول مفهومها و دواعي استعمالها. لننتقل الى خطوة أكبر 🙂 صيغة بنية المكوّن (Component Syntax) غريبة هذه الجملة صح! يا عبدالهادي ما هذه الترجمة اللفظية غير واضحة ؛ بنية و صيغة و مكوّن! ايش الفرق يعني .. 😄 - في مكونات رياكت البسيطة و الأصح تدعى بتسميتها الصحيحة بـ المشردة (stateless) : // Simple (stateless) React component const Headline = () => { return <h1>React Cheat Sheet</h1> } في هذه الشفرة المبسطة، كما أخبرتكم أنها تعود بصيغة HTML فقط! لاحظ أنها تعود بجملة ذات عنوان عريض (H1). كما يمكنك ادخال عدة مكونات بسيطة تلو بعضها كـ : // Component must only return ONE element (eg. DIV) const Intro = () => { return <div> <Headline /> <p>Welcome to the React world!</p> </div> } const Intro = () => { return ( <div> <Headline /> <p>Welcome to the React world!</p> </div> ) } const Intro = () => ( <div> <Headline /> <p>Welcome to the React world!</p> </div> ) ماذا تلاحظ في المثال السابق! المثال الأول/الثاني و الثالث مختلف عن بعضه، الفرق أننا استعملنا نهاية الأول و الثاني بقوسين معكوفتين {} و الأخير بقوسين () و كلاهما يؤديان نفس الغرض. فقط الاختلاف أننا نسهل من قراءة الشفرة البرمجية و نكتفي بعدم استعمال دالة العودة (return). - في مكونات رياكت المركبة (المتقدمة) تدعى بــ (ES6 classes) و تسمى أيضاً بـ الذكية. class App extends React.Component { render() { return ( <h1>React Cheat Sheet</h1> ) } } الشفرة السابقة شفرة بسيطة تؤدي نفس غرض المكوّن البسيط (stateless) لكن لا حاجة لنا بهذا، نود استعمال تعليمات منطقية أكبر، و من ضمنها دالة البناء (constructor) و دالة الحالة (State) لنتقدم أكثر و أكثر .. class App extends React.Component { // fires before component is mounted constructor(props) { // makes this refer to this component super(props); // set local state this.state = { date: new Date() }; } render() { return ( <h1> It is {this.state.date.toLocaleTimeString()}. </h1> ) } } تعقدت الشفرة قليلاً، لا عليك كل ما في الأمر أننا استعملنا مكوّن يعطينا الوقت الحالي كل لحظة بالوقت الحقيقي (Real Time). حيث: أضفنا البناء (constructor) معها super() لنجعل كل حدث يشير إلى هذا المكون و يجب حتما استعماله في صيغة ES6. قمنا بتعريف الحالات المتغيرة (local state) و قيمتها المبدئية : دالة التاريخ. أعدنا في دالة العودة (return) بارجاع قيمة التاريخ المتغيرة كل حين بدالة this.state مرفقة باسم المتغير Date و خاصيته toLocaleTimeString() . وصلنا لنهاية موضوع اليوم، في المقال القادم انتظرنا بحول الله سنتعمق في دالة الحالة (State) المتغيرة و دالة (Props) و كيف أنها ستفيدنا في كتابة المشاريع البرمجية و تطبيقات SPA. أتمنى أن تكون المعلومة قد وصلت، كان معكم أخوكم عبدالهادي من الجزائر. (المقال هذا نُقلت أجزائه و شفراته البرمجية بتصرفي من مقال أجنبي سمح لي صاحبه بأخذه جَعله تحت رخصة مجانية).
  5. بسم الله الرحمن الرحيم السلام عليكم ورحمة الله، كيف حال الجميع؟ عساكم بألف خير و عافية. سأحاول باذن الله البدأ في سلسلة جديدة حول تعلم أساسيات رياكت (React) و (RN = React Native) كما تعلمون هي مكتبة عرض (View) أطلقتها شركة الفيسبوك لبناء واجهاتك البرمجية (User Interfaces) بطريقة سلسة و سهلة مبنية على نظام (Virtual DOM). و أول نسخة رسمية منها بتاريخ مارس 2013. و لما نقول أنها مكتبة عرض ليست اطار عمل (MVC) ركّز هنا جيّداً أخي القارئ؛ حيث تمثل هي حرف (V) فقط لا تقدم خدمة المتحكم (Controller) و لا (Model). بداية تعلمك React يصادفك شئ جديد عند كتابة أول مكوّن (Component's) حيث أنها تعود (returning) بصيغة تشبه صيغة HTML! ربما لم تلاحظها في مكتبات أو أطر عمل أخرى. تسمى بالـ JSX فما هي يا ترى JSX ؟ JSX عبارة عن صيغة (syntax) أقول أُخترعت لمكتبة React التي تبدو مشابهة جداً لـ xHTML التي تمكنك من انشاء عناصر واجهتك البرمجية (Create Elements) بسهولة و يسر عن طريقها بدلاً من استعمال وضائف (functions) تستدعيها يدوياً لتنفذ مهمة معيّنة. ربما هذه نقطة مبهمة للبعض لكن ستفهمها بعد قليل باذن الله. من المهم أن تعلم أن جميع مكونات React المبنية بصيغة JSX تترجم من شفرة لشفرة (transpiler) الى تعليمات جافاسكربت حقيقية (Real JavaScript) باستخدام مكتبة تدعى بابل (Babel) تقوم بتحويل الرياكت الى شفرة ES5 القديمة لتشتغل على جميع المتصفحات (حتى القديمة منها). لنكتب مثالا بسيطاً بالـ JSX : return <span> أهلا بعالم البرمجة! </span>; هل لاحظت سهولة كتابة جملة، و ارجاعها للظهور في المصتفح بكل سهولة مرفقة بكلمة (Return). تخيّل لو كتبناها بصيغة ES5 القديمة؟! return React.createElement( 'span', {}, 'أهلا بعالم البرمجة!'); كم سطراً كتبناه لنعيد الجملة للظهور باستخدام جافاسكربت طبيعية! في هذا المثال استعملنا وظيفة (function) تسمى بـ React.createElement صيغتها كالتالي: React.createElement( string|element, [propsObject], [children...]) ماذا لو أردنا كتابة عدة جمل متفرقة بداخل الشفرة البرمجية! ستكون هكذا بلا شك! React.createElement('div', {}, React.createElement('div', {}, 'text1'), React.createElement('div', {}, 'text2', ) ); لكن لسهولة JSX و هذا ما تميّزت به شركة الفيسبوك صراحة في مكتباتها البرمجية، الشفرة السابقة مثلاً باستخدام JSX : function text1() { return <span>text1</span>; } function text2() { return <span>text2</span>; } هنا نستنتج مرة أخرى، أن JSX رائعة جدا و اختزال (shorthand) لكثرة الشفرات البرمجية التي تؤدي نفس الوظيفة. مما يكلفك وقتا اضافيا و كثرة المشاكل (bug's) عند تنقيح برمجياتك و تطبيقاتك؛ هذا كود شامل و أوسع، تلاحظ أنه يمكنك من تقسيم واجهاتك البرمجية عبر مكونات مختلفة و التحكم بها كلٌ على حِدة. من الثلاث خصائص المتوفرة في JSX هي : العناصر المتداخلة (Nested elements): حيث يمكنك الجمع بين عدة عناصر (Multiple elements) في حاوية واحدة (container element) كـ <div> مثل المثال الذي بالأسفل. السمات (Attributes): داخل كل عصنر div لك أن تضيف وظائف متعددة كـ (className، selected، style) ..الخ. تعبيرات الجافاسكربت (JavaScript expressions): يمكنك اضافة تعابير (ليست شرطية statements) داخل JSX كعمليات الحساب و المهم أن تكون ضمن قوسين {} . import React from 'react'; class App extends React.Component { render() { return ( <div> <p>Header</p> <p>Content</p> <p>Footer</p> </div> <div> <h1>{10+1}</h1> </div> <div style={{ height: 10 }}> Hello World! </div> ); } } export default App; في التعبيرات ذكرنا أنه لا يمكن استخدام التعابير الشرطية كـ if و else باستثناء التعبير الشرطي الثلاثي: { i === 1 ? 'true' : 'false' } مثال : import React from 'react'; class App extends React.Component { render() { const i = 1; return ( <div> <h1>{ i === 1 ? 'true' : 'false' }</h1> </div> ); } } export default App; من النصائح التي أقدمها و لا يجب عليك نسيانها: جميع أسماء المكونات (components) تكتب بحروف صغيرة (lowercase) التي تكون مدمجة بـعناصر HTML أو SVG كـ (div, ul, rect, etc.) و لا تنسى اغلاق العناصر بأوسمتها (Close Every Element) مثال مبسط: // DO THIS: return <br/>; return <input type='password' .../>; return <li>text</li>; // NOT THIS: return <br>; return <input type='password' ...>; return <li>text; هذه أهم أساسيات JSX التي يجب على كل شخص معرفتها لمحبي تعلم ReactJS و RN عموماً. أتمنى تكون مفهومة للجميع. و السلام عليكم.
  6. بسم الله الرحمن الرحيم السلام عليكم ورحمة الله، كيف حال الجميع؟ عساكم بألف خير و عافية. سأحاول باذن الله البدأ في سلسلة جديدة حول تعلم أساسيات رياكت (React) و (RN = React Native) كما تعلمون هي مكتبة عرض (View) أطلقتها شركة الفيسبوك لبناء واجهاتك البرمجية (User Interfaces) بطريقة سلسة و سهلة مبنية على نظام (Virtual DOM). و أول نسخة رسمية منها بتاريخ مارس 2013. و لما نقول أنها مكتبة عرض ليست اطار عمل (MVC) ركّز هنا جيّداً أخي القارئ؛ حيث تمثل هي حرف (V) فقط لا تقدم خدمة المتحكم (Controller) و لا (Model). بداية تعلمك React يصادفك شئ جديد عند كتابة أول مكوّن (Component's) حيث أنها تعود (returning) بصيغة تشبه صيغة HTML! ربما لم تلاحظها في مكتبات أو أطر عمل أخرى. تسمى بالـ JSX فما هي يا ترى JSX ؟ JSX عبارة عن صيغة (syntax) أقول أُخترعت لمكتبة React التي تبدو مشابهة جداً لـ xHTML التي تمكنك من انشاء عناصر واجهتك البرمجية (Create Elements) بسهولة و يسر عن طريقها بدلاً من استعمال وضائف (functions) تستدعيها يدوياً لتنفذ مهمة معيّنة. ربما هذه نقطة مبهمة للبعض لكن ستفهمها بعد قليل باذن الله. من المهم أن تعلم أن جميع مكونات React المبنية بصيغة JSX تترجم من شفرة لشفرة (transpiler) الى تعليمات جافاسكربت حقيقية (Real JavaScript) باستخدام مكتبة تدعى بابل (Babel) تقوم بتحويل الرياكت الى شفرة ES5 القديمة لتشتغل على جميع المتصفحات (حتى القديمة منها). لنكتب مثالا بسيطاً بالـ JSX : return <span> أهلا بعالم البرمجة! </span>; هل لاحظت سهولة كتابة جملة، و ارجاعها للظهور في المصتفح بكل سهولة مرفقة بكلمة (Return). تخيّل لو كتبناها بصيغة ES5 القديمة؟! return React.createElement( 'span', {}, 'أهلا بعالم البرمجة!'); كم سطراً كتبناه لنعيد الجملة للظهور باستخدام جافاسكربت طبيعية! في هذا المثال استعملنا وظيفة (function) تسمى بـ React.createElement صيغتها كالتالي: React.createElement( string|element, [propsObject], [children...]) ماذا لو أردنا كتابة عدة جمل متفرقة بداخل الشفرة البرمجية! ستكون هكذا بلا شك! React.createElement('div', {}, React.createElement('div', {}, 'text1'), React.createElement('div', {}, 'text2', ) ); لكن لسهولة JSX و هذا ما تميّزت به شركة الفيسبوك صراحة في مكتباتها البرمجية، الشفرة السابقة مثلاً باستخدام JSX : function text1() { return <span>text1</span>; } function text2() { return <span>text2</span>; } هنا نستنتج مرة أخرى، أن JSX رائعة جدا و اختزال (shorthand) لكثرة الشفرات البرمجية التي تؤدي نفس الوظيفة. مما يكلفك وقتا اضافيا و كثرة المشاكل (bug's) عند تنقيح برمجياتك و تطبيقاتك؛ هذا كود شامل و أوسع، تلاحظ أنه يمكنك من تقسيم واجهاتك البرمجية عبر مكونات مختلفة و التحكم بها كلٌ على حِدة. من الثلاث خصائص المتوفرة في JSX هي : العناصر المتداخلة (Nested elements): حيث يمكنك الجمع بين عدة عناصر (Multiple elements) في حاوية واحدة (container element) كـ <div> مثل المثال الذي بالأسفل. السمات (Attributes): داخل كل عصنر div لك أن تضيف وظائف متعددة كـ (className، selected، style) ..الخ. تعبيرات الجافاسكربت (JavaScript expressions): يمكنك اضافة تعابير (ليست شرطية statements) داخل JSX كعمليات الحساب و المهم أن تكون ضمن قوسين {} . import React from 'react'; class App extends React.Component { render() { return ( <div> <p>Header</p> <p>Content</p> <p>Footer</p> </div> <div> <h1>{10+1}</h1> </div> <div style={{ height: 10 }}> Hello World! </div> ); } } export default App; في التعبيرات ذكرنا أنه لا يمكن استخدام التعابير الشرطية كـ if و else باستثناء التعبير الشرطي الثلاثي: { i === 1 ? 'true' : 'false' } مثال : import React from 'react'; class App extends React.Component { render() { const i = 1; return ( <div> <h1>{ i === 1 ? 'true' : 'false' }</h1> </div> ); } } export default App; من النصائح التي أقدمها و لا يجب عليك نسيانها: جميع أسماء المكونات (components) تكتب بحروف صغيرة (lowercase) التي تكون مدمجة بـعناصر HTML أو SVG كـ (div, ul, rect, etc.) و لا تنسى اغلاق العناصر بأوسمتها (Close Every Element) مثال مبسط: // DO THIS: return <br/>; return <input type='password' .../>; return <li>text</li>; // NOT THIS: return <br>; return <input type='password' ...>; return <li>text; هذه أهم أساسيات JSX التي يجب على كل شخص معرفتها لمحبي تعلم ReactJS و RN عموماً. أتمنى تكون مفهومة للجميع. و السلام عليكم.

عالم البرمجة

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