السابق

التالي

تمرين - إنشاء تطبيق ثابت باستخدام Gatsby

مكتمل

في هذه الوحدة، ستقوم بإنشاء تطبيق Gatsby جديد وإضافة صفحة واحدة إليه.

تثبيت Gatsby

قم بتشغيل الأمر التالي في محطة طرفية لتثبيت Gatsby عموميًا على النظام الخاص بك:

npm install -g gatsby-cli

إنشاء موقع Gatsby وتشغيله

يتم إنشاء جميع مشاريع Gatsby بواسطة واجهة Gatsby CLI. وواجهة CLI قادرة على مساعدتك على دعم مشروع Gatsby جديد، واستضافته وكذلك بناء المنتج النهائي، وهي مجموعة ملفات ثابتة يمكنك نشرها في أي مضيف ثابت تريده.

إنشاء تطبيق Gatsby

الآن، قم بإنشاء تطبيق Gatsby جديد بكتابة الأمر التالي في المحطة الطرفية:

gatsby new myApp

gatsby new لإنشاء تطبيق Gatsby جديد، والذي يمكنك البدء في إضافة صفحات المحتوى إليه.

تشغيل Gatsby

لبدء التطوير باستخدام Gatsby، تحتاج إلى الانتقال إلى دليل المشروع قبل بدء تشغيل خادم التطوير.

قم بتشغيل الأوامر التالية للانتقال إلى مجلد المشروع لديك وبدء تشغيل الخادم:

cd myApp
gatsby develop

يجب أن تشاهد الإخراج التالي في المحطة الطرفية:

You can now view gatsby-starter-default in the browser.
  http://localhost:8000.
View GraphiQL, an in-browser IDE, to explore your site's data and schema
  http://localhost:8000/___graphql

الآن، قم بفتح مستعرض وانتقل إلى http://localhost:8000.

إذا رأيت ما سبق، فقد قمت بإنشاء تطبيق Gatsby الأول بنجاح. تهانينا!

إضافة مكون صفحة

الآن ستقوم بإنشاء مكون يمكنك الانتقال إليه في المستعرض: مكون صفحة.

افتح مجلد المشروع "myApp" في محرر النصوص الخاص بك. ابحث عن الدليل pages/ وأنشئ ملفًا وسمه about.js. امنح الملف المحتوى التالي:

import React from 'react';
import { Link } from 'gatsby';

export default () => (
  <React.Fragment>
    <div>About page</div>
    <Link to="/">Back to home</Link>
  </React.Fragment>
)

تعمل التعليمات البرمجية أعلاه على إنشاء مكون عرض تقديمي قادر فقط على إظهار البيانات. هذا المكون ببساطة يقدم النص "حول الصفحة" وارتباط يشير إلى جذر التطبيق.

بمجرد لصقك التعليمات البرمجية أعلاه وحفظها في الملف about.js، سيقوم خادم التطوير بإعادة التحويل البرمجي للتطبيق تلقائيًا. إذا قمت الآن بزيارة http://localhost:8000/about يجب أن تشاهد المحتوى التالي معروضًا:

لقد حصلت على صفحتك الأولى! الآن يمكنك أن ترى كيف يمكن الانتقال إلى أي مكون موضوع في الدليل /pages.

متابعة