تعتبر مكتبة ReactJS إحدى أهم المكتبات لبناء تطبيقات تستخدم معاييرSPA واستخدام ReactJS مع تقنية ASP.NET بجميع أنواعها صار متاحًا سواء مع ASP.NET Core أو مع ASP.NET MVC سواء مع مشاريع قائمة حاليًا أم مشاريع جديدة, ولعل الترقية لاستخدام هذه المكتبة مع الأنظمة التي تعمل حاليًا هو من أهم المواضيع التي تشغل بال المهتمين بتطبيقات SPA, من أجل ذلك نخصص هذه المقالة لشرح خطوات استخدام ReactJS مع نظام قائمة حاليًا.
الخطوة الأولى
إضافة ملف من النوع NPM configuration file إلى المسار الرئيسي Root path للمشروع, وذلك باتباع الخطوات التالية:
يجب أن يكون اسم الملف الجديد package.json ويحتوي على ما يلي:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"scripts": {
"dev": "webpack --mode development
--watch",
"build": "webpack"
},
"devDependencies": {}
}
الخطوة الثانية
إضافة ملف اسمه .babelrc إلى جانب الملف package.json وذلك لاستخدام تقنية Babel التي تحول JSX إلى JavaScript يمكن للمتصفحات أن تفهمها, ويحتوي الملف على ما يلي:
{
/*
@babel/preset-env – enables latest JavaScript syntax */
/*
@babel/preset-react – adds support for React syntax */
/*
@babel/plugin-proposal-class-properties – adds support for an instance and/or
static member declarations in JavaScript classes */
"presets": [ "@babel/preset-env", "@babel/preset-react" ],
"plugins": [ "@babel/plugin-proposal-class-properties" ]
}
الخطوة الثالثة
إضافة ملف Webpack configuration file بالاسم webpack.config.js إلى جانب الملف package.json وتحتوي على ما يلي:
"use
strict";
var path = require("path");
var WebpackNotifierPlugin = require("webpack-notifier");
var BrowserSyncPlugin = require("browser-sync-webpack-plugin");
module.exports
= {
entry: {
bundle: ["./React/Footer.js", "./React/App.js", "./React/Index.js", "./React/Header1.js"]
},
output: {
path: path.resolve(__dirname, "./React"),
filename: "react.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
devtool: "inline-source-map",
plugins: [new WebpackNotifierPlugin(), new BrowserSyncPlugin()]
};
في الشيفرة السابقة يجب الانتباه إلى أن المسار ./React والملفات التي بعده تكون على حسب المشروع, علمًا أن نتيجة تنفيذ هذا الملف هي ملف سيتم تخزينه تحت المجلد ./React أو أي مجلد آخر بالاسم react.js أو بأي اسم آخر
الخطوة الرابعة
لتشغيل React و Babel يجب تحميل بعض الحزم البرمجية من NPM وذلك باتباع الخطوات التالية:
1 - يجب فتح cmd tool التابعة للـ Visual Studio وذلك من قائمة ابدأ كما في الصورة التالية:
2 - الانتقال إلى مجلد المشروع كما في الصورة التالية:
3 - بعدها يجب تنفيذ الأوامر التالية والانتظار حتى تنتهي
npm install --save-dev @babel/cli @babel/core @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-react babel-loader browser-sync browser-sync-webpack-plugin react react-dom webpack webpack-cli webpack-notifier
4 - بعد الانتهاء من تنفيذ الأوامر السابقة سيظهر مجلد جديد ضمن مجلد المشروع اسمه node_modules
الخطوة الخامسة
تثبيت NPM Task Runner على Visual Studio من Tools ومن ثم Extension and Updates
بعد تثبيت الأداة السابقة اتبع الخطوات التالية لتحويل الملفات التي تحتوي على React Code إلى ملفات JavaScript يمكن للمتصفحات فهمها:
بعدها تظهر الشاشة التالية:
اضغط مرتين Double click على dev لتنبدأ عملية إنشاء الملف react.js الذي حددناه في الملف webpack.config.js.
في حال اتباع الخطوات السابقة بشكل صحيح ولا يوجد خطأ في الملفات التي أنشأتها وتحتوي على React code عندها سيظهر التنبيه التالي:
وسيتم إنشاء ملف اسمه react.js تحت المجلد React, هذا الملف يمكن تضمينه ضمن ملفات المشروع باستخدام الكود التالي:
<script src="/React/react.js"></script>
الآن نفذ المشروع وستحصل على النتائج المطلوبة من شيفرة React التي تمت كتابتها
