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

استبداء المشروع

أنت الآن ليس معك شيء، تائه ضعيف لا تعرف كيف تبدأ. سأعتبر أن لديك نظام لينكس، أو نظام ويندوز الفرعي للينكس WSL. وعلى كل حال فموضوع نظام التطوير هو من شأنك فأنا ليس لدي وقت له، وأفترض أنك سبق واشتريت وأعددت جميع أدوات مقلمتك مع الكوس والبركار وغلاف أزرق وأحمر قبل حضورك الدرس…

افتح الطرفية (الكنسول) وتأكد من أن نود Node وإنبم NPM منصبان على النظام.

node -v
npm -v

إذا لم يكونا موجودان فلا تنتظر أن أقول لك ما الذي يجب عليك فعله.

من أجل بناء مشروع رياكت فهناك سطر أمر يقوم بكلّ الحمل الثقيل من أجلك ويجعلك مستعدًا للبدء في جزء من الثانية وهو:

npx create-react-app my-app
cd my-app
npm start

سيتم إنشاء مجلد جديد باسم my-app فيه جميع ملفات المشروع والسطر الأخير في الأمر سيقوم باستبداء خادوم التطوير وعرض النتيجة على المتصفح على الرابط localhost:3000. ما دام خادوم التطوير شغالا فإنك تستطيع معاينة تعديلاتك بشكل حي على هذا الرابط وسيقوم الخادوم بإعادة تشغيل نفسه تلقائيًا عند كلّ تعديل تدخله على المشروع.

إذا كنت تريد التعرّف أكثر على الملفات التي يتم إنشاؤها تلقائيًا بالأمر سالف الذكر فطالع مقالتي: أساسيات البدء في رياكت.

الحزمات اللازمة

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

الحزمة الأولى هي material-ui وهي مجموعة من مكونات واجهة الاستخدام لرياكت تحاكي نمط متريال المعهود على منتجات جوجل. قم بتنصيبها بالأمر (تأكد أنك على جذر المشروع):

npm install @material-ui/core

بعدها قم بإدراج خط روبوتو وهو الخط الافتراضي لهذه الحزمة. أدرج رماز التضمين التالي في الإندكس.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

الحزمة الثانية هي axios تساعد على إرسال طلبات أشتتبي بشكل أسرع و”أنقى” من مكتبات جافاسكربت المدمجة مثل XMLHttpRequest. قم بتنصيبها بالأمر:

npm install axios

وأخيرًا، من أجل تعدد الصفحات فنحن نحتاج إلى مكانزم للتوجيه Routing، الشيء الذي تقدّمه الحزمة react-router-dom. قم بتنصيبها بالأمر:

npm install react-router-dom

عظيم، بعد أن كنت لا تملك شيئا، صرت الآن سيد القوم أبو رياكت السِكرِبتي. هيا بنا أدلّك كيف تستخدم كلّ هذه الأسلحة.

إنشاء الصفحات

تأكد من أن ملف index.html الموجود في جذر المشروع يضم رمازًا يشبه ما يلي:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />  
    <meta
      name="description"
      content="My React App"
    />
    <link href="%PUBLIC_URL%/fontawesome/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
    <title>My React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    
  </body>
</html>

الرماز أعلاه يضم تضمينا لخط أوسوم Awesome Font، احذفه إذا لم تكن تحتاجه في مشروعك، أو اتركه ونزّل Font Awesome وضعه في المجلد public للمشروع.

انتهيتَ من الملف index.html لن نضيف إليه أي شيء آخر، قبّله ليلة سعيدة ودعه يرقد في سلام.

انتقل إلى الملف app.js ضمن المجلد src، في هذا الملف سنقوم بتعيين التوجيهات Routes، التي تمثل كلّ واحدة منها صفحة من الموقع، لنفترض أن لدينا الصفحات: home, about, contact. فإننا سنقوم بتعيين ثلاث توجيهات كالتالي:

import React from 'react';

import {
    BrowserRouter as Router,
    Switch,
    Route,
} from "react-router-dom";

import './App.css';

import HomePage from './pages/homePage.js';
import AboutPage from './pages/aboutPage.js';
import ContactPage from './pages/contactPage.js';

export default function App() {

    return (
        <Router>
            <Switch>
                <Route exact path="/">
                    <HomePage />
                </Route>
                <Route path="/about">
                    <AboutPage />
                </Route>
                <Route path="/contact">
                    <ContactPage />
                </Route>
            </Switch>
        </Router>
        
    );

}

لاحظ أننا قمنا باستخدام مكوّنات الصفحات والتي لم نقم بإنشائها بعد. قم بإنشاء مجلد سمّه pages ضمن src، وأنشئ فيه الملفات الثلاث التي قمنا بضمّها أعلاه: homePage.js، aboutPage.js، contactPage.js.

لقد انتهيتَ الآن من الموجّه، وبالمناسبة يدعى هذا بـ التوجيه جهة العميل، وذلك للتفريق بينه وبين التوجيه جهة الخادوم. طيّب حلو، أغلق الآن app.js وقبّله تصبح على خير ودعه يرقد جنب أخيه.

مكوّنات الصفحات

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

import React from 'react';
import { Redirect } from "react-router-dom";

import { withStyles } from '@material-ui/core/styles';

import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';

const styles = theme => ({
    fullHeight: {
        height: '99vh'
    }
});

class HomePage extends React.Component {

    constructor(props) {
        super(props);
		// init your states
    }

    componentDidMount() {
        // code here will execute one time when component mounts
    }
	
	someFunction = (param) => {
		// this is a member function
	}

    render() {
        const { classes } = this.props;

		return (

			<Grid container direction="row" justify="center" alignItems="center" className={classes.fullHeight}>
				<Grid item xs={12} style={{textAlign: 'center'}}>
					<span style={{color: 'white'}}>
						This is home page
					</span>
				</Grid>
				
				<Grid item xs={12}>
					 <Button variant="contained" color="primary" onClick={() => this.someFunction()}>
						Click me
					</Button>
				</Grid>			
			</Grid>

		);
		
    }

}

export default withStyles(styles)(HomePage);

هذا الرماز هو هيكل عام جمعت فيه جميع العناصر التي ستحتاجها في صفحتك، يمكنك الإبقاء على التي تحتاج منها وحذف ما لا تحتاج. تجد فيها كيفية إدراج سيسس (جيسس) الصفحة، كيفية تعريف وظائف المكوّن، وكيفية استخدام مكونات الواجهة من متريال. الصفحة أعلاه تعرض نصًا تحته زرٌ يقول اضغطني، وقد تم استخدام مخطط الشبكة لضمان تنسيق متجاوب.

بعد إنشاء جميع صفحاتك المستخدمة في التطبيق وحفظ التعديلات، سيقوم رياكت بتأليف الرماز وإعادة تشغيل خادوم التطوير تلقائيًا، ثم تحديث الصفحة على localhost:3000 لتظهر لك الصفحة الرئيسية التي سميناها homePage. انتقل الآن إلى localhost:3000/about وستظهر لك الصفحة المحددة في المكوّن aboutPage.

خاتمة

دخلتَ المجال وشَدَدْتَ الحَبْلا
فأتقنتَ رياكتَ وصرت بطلا

ذلك بيت شعري من تألفي على البحر الهائج. في أمان الله ولا تنس أن تخبرني في التعليقات كيف طلعت رَيْكوتَتُك.