الفرق بين المراجعتين لصفحة: «React/thinking in react»
< React
Kinan-mawed (نقاش | مساهمات) أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:أسلوب التفكير في React}}</noinclude>' |
Kinan-mawed (نقاش | مساهمات) لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:أسلوب التفكير في React}}</noinclude> | <noinclude>{{DISPLAYTITLE:أسلوب التفكير في React}}</noinclude> | ||
تُعدُّ React الطريقة الأمثل لبناء تطبيقات ويب كبيرة وسريعة في JavaScript، فقد كانت مُلائِمة بشكلٍ كبيرٍ لبناء Facebook و Instagram. | |||
من ميّزات React أنّها تجعلنا نُفكِّر بالتطبيقات بينما نبنيها. سنتحدّث في هذا القسم عن أسلوب التفكير لبناء جدول بيانات منتجات قابل للبحث باستخدام React. | |||
== البدء بتصميم الشكل المبدئي == | |||
فلنفترض أنّنا نمتلك واجهة برمجة تطبيق JSON API وتصميم للشكل المبدئي للجدول المطلوب والذي يبدو كما يلي: | |||
[[ملف:thinking-in-react-mock-1071fbcc9eed01fddc115b41e193ec11-4dd91.png|مركز]] | |||
تُعيد JSON API بعض البيانات التي تبدو كما يلي:<syntaxhighlight lang="text"> | |||
[ | |||
{category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"}, | |||
{category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"}, | |||
{category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"}, | |||
{category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"}, | |||
{category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"}, | |||
{category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"} | |||
]; | |||
</syntaxhighlight> | |||
مراجعة 10:38، 25 يوليو 2018
تُعدُّ React الطريقة الأمثل لبناء تطبيقات ويب كبيرة وسريعة في JavaScript، فقد كانت مُلائِمة بشكلٍ كبيرٍ لبناء Facebook و Instagram.
من ميّزات React أنّها تجعلنا نُفكِّر بالتطبيقات بينما نبنيها. سنتحدّث في هذا القسم عن أسلوب التفكير لبناء جدول بيانات منتجات قابل للبحث باستخدام React.
البدء بتصميم الشكل المبدئي
فلنفترض أنّنا نمتلك واجهة برمجة تطبيق JSON API وتصميم للشكل المبدئي للجدول المطلوب والذي يبدو كما يلي:
تُعيد JSON API بعض البيانات التي تبدو كما يلي:
[
{category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
{category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
{category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
{category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
{category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
{category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];