الفرق بين المراجعتين ل"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"}
];