عملی با GatsbyJS

مقدمه ای بر ساخت یک وب سایت با مولد سایت استاتیک دوستانه و آسان بر اساس React.

در جایی بین استفاده از ویرایشگر WYSIWYG مانند Wix و ساختن پشته خود از پایه با چیزی مانند Webpack، استفاده از چارچوبی مانند گتسبی.

گتسبی بیشتر به عنوان یک مولد سایت استاتیک شناخته می‌شود، اگرچه با فریمورک‌های رندر سمت سرور و تمام پشته کامل مانند Next.js و SvelteKit نیز رقابت می‌کند. . گتسبی تلاش می‌کند تا تجربه توسعه را دوستانه و آسان کند، در حالی که ویژگی‌های ضروری وب‌سایت مانند تصاویر تار مدرن را به‌صورت خارج از جعبه ارائه می‌دهد.

اما بر خلاف Next.js یا SvelteKit، گتسبی صرفا یک فریم ورک فرانت‌اند است، نه یک فول استک. بنابراین، Node.js برای توسعه مورد نیاز است، اما نه برای استقرار. برای آن، گتسبی از چندین پلتفرم کلیک برای استقرار از جمله Netlify و Gatsby Cloud پشتیبانی می کند.

بیایید درست شیرجه بزنیم – این بهترین راه برای درک نحوه عملکرد گتسبی و آنچه ارائه می دهد است. برای نصب Node.js/NPM باید به خط فرمان دسترسی داشته باشید، و همچنین به Git، که برای دانلود کیت شروع استفاده می شود. هنگامی که از خط فرمان به NPM دسترسی پیدا کردید، با تایپ npm install -g gatsby-cli، از آن برای نصب گتسبی در سطح جهانی استفاده کنید.

وقتی این کار کامل شد، باید بتوانید gatsby -v را تایپ کنید و با نسخه نصب شده پاسخ دریافت کنید. شروع به ساختن یک برنامه جدید با gatsby new کنید. گتسبی تا حد زیادی دست شما را در طول فرآیند تعاملی نگه می‌دارد و هر انتخابی که می‌کنید می‌تواند بعدا تغییر کند. من نام پروژه خود را “My Demo” گذاشتم و مکان پیش فرض my-demo را پذیرفتم.

وقتی از شما خواسته شد که از کدام CMS استفاده کنید، می‌توانید “نه (یا بعداً آن را اضافه خواهم کرد)” را به عنوان پاسخ بپذیرید. همین امر در مورد پردازنده های CSS نیز صدق می کند. می‌توانید گزینه‌ها را برای اینکه کدام افزونه‌های اضافی اضافه کنید، خالی بگذارید.

برنامه شروع گتسبی را اجرا کنید

اکنون می توانید برنامه را در حالت توسعه دهنده با cd– وارد کردن در فهرست جدید (my-demo) و تایپ gatsby develop اجرا کنید.

هنگامی که اجرا شد، می‌توانید از localhost:8000 دیدن کنید و صفحه خوش‌آمدگویی را مانند شکل ۱ ببینید.

شکل ۱. صفحه خوش آمدگویی گتسبی

تعویض ماژول داغ

گتسبی با HMR (تعویض ماژول داغ) فعال ارسال می شود، بنابراین ادامه دهید و عنصر و بلافاصله این تغییر را در مرورگر منعکس می‌کنید. (مطمئن شوید که برنامه در حالت برنامه‌نویس اجرا می‌شود؛ یا در پس‌زمینه فرآیند یا یک پنجره خط فرمان جدید باز کنید.)

یک صفحه اضافه کنید

Gatsby بر روی React ساخته شده است، بنابراین شما طیف کاملی از قابلیت های React را در اختیار دارید. یک واقعیت کلیدی در مورد توسعه در گتسبی این است که هر صفحه یک جزء React است. حتی صفحه فهرست نیز جزء React است. می‌توانید با باز کردن آن فایل و مشاهده اینکه تابعی را تعریف می‌کند، تأیید کنید (const IndexPage = () => { return (...)) و سپس آن را به عنوان یک ماژول JS صادر می‌کند ( صادرات پیش فرض IndexPage). به طور خلاصه، فایل index.html یک مؤلفه عملکردی React را صادر می کند که صفحه فهرست را نشان می دهد.

بیایید یک صفحه جدید اضافه کنیم و آن را ساده کنیم. یک فایل /src/pages/mypage.js جدید ایجاد کنید و محتوای فهرست ۱ را به آن بدهید.

فهرست ۱. افزودن یک صفحه ساده

import * as React from "react";
const MyPage = () => {  return (
        My New Page
)}
export default MyPage;

افزودن پیمایش

می توانید از صفحه جدید در localhost:8000/mypage دیدن کنید. اکنون یک پیوند از صفحه جدید خود به صفحه فهرست اضافه کنید. مولفه لینک داخلی گتسبی را با وارد کردن آن اضافه کنید:

import { Link } from 'gatsby'

اکنون آن را با صفحه اصلی به صفحه خود اضافه کنید. پیوند ظاهر می شود و می توانید روی آن کلیک کنید تا به صفحه فهرست بروید.

ایجاد یک جزء مشترک

اکنون یک فایل جدید src/components/Dog.js اضافه کنید. (توجه داشته باشید که دایرکتوری اجزاء را نیز اضافه می کنید.) محتویات Listing 2 را در این فایل قرار دهید.

فهرست ۲. جزء سگ

cat src/components/Dog.js
import * as React from "react";
const DogComponent = ({ name }) => {
        return (
{name} says Woof!
        )}     
export default DogComponent;

این یک مؤلفه React قابل استفاده مجدد است که یک پروپ منفرد (name) را می پذیرد، که سپس از طریق نحو توکن در نشانه گذاری استفاده می شود. شما می توانید آن را در اجزای صفحه همانطور که در لیست ۳ مشاهده می کنید استفاده کنید.

فهرست ۳. استفاده از مؤلفه سگ

import Dog from '../components/Dog.js';
//...
<Dog name="Buster" />

در اینجا هیچ چیز خاص گتسبی وجود ندارد، به جز این واقعیت که مؤلفه های مشترک شما در فهرست صفحات قرار نمی گیرند. (توجه داشته باشید که نام دایرکتوری مؤلفه ها چیز خاصی نیست.)< /p>

استفاده از تصاویر

یکی از ادعاهای گتسبی برای شهرت، پشتیبانی از تصویر پیچیده آن است. این اکنون از طریق پلاگین های رسمی ارائه می شود. بیایید تصاویر را به مولفه Dog اضافه کنیم. با نصب بسته های NPM همانطور که در لیست ۴ مشاهده می شود شروع کنید.

فهرست ۴. نصب افزونه ها و وابستگی های تصویر

npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp

Listing 4 چهار پلاگین مختلف را نصب می کند که توسط گتسبی برای مدیریت تصاویر و بارگیری آنها از سیستم فایل استفاده می شود. اکنون با ویرایش فایل gatsby-config.js در دایرکتوری ریشه پروژه، افزونه ها را با گتسبی ثبت کنید. آن فایل دارای یک ورودی خالی افزونه در صادرات ماژول است. ورودی های افزونه را که در فهرست ۵ مشاهده می شود اضافه کنید.

فهرست ۵. ثبت افزونه های تصویر در gatsby-config.js

plugins: [ `gatsby-plugin-image`, `gatsby-plugin-sharp` ]

دو افزونه تصویر شامل یکی برای تصاویر پویا (تصاویری که مبتنی بر داده‌ها هستند، یعنی بسته به وضعیت برنامه می‌توانند تغییر کنند) و دیگری برای تصاویر استاتیک، که همیشه ثابت می‌مانند. در این مورد، ما فقط از یک تصویر ثابت استفاده می کنیم.

فایل /src/components/dog.js را باز کنید و وارد کردن و کامپوننت را همانطور که در لیست ۶ مشاهده می کنید اضافه کنید.

فهرست ۶. استفاده از مؤلفه StaticImage

import * as React from "react";
import { StaticImage } from "gatsby-plugin-image";

const DogComponent = ({ name }) => {
        return (
           <div>
                Foo2
                <div>
                <StaticImage src="https://dogtime.com/assets/uploads/gallery/shih-tzu-dog-breed-pictures/shih-tzu-breed-picture-1.jpg" alt="A Shitzu" width={350} height={350}/>
                </div>
                <span>{name} says Woof!</span>
           </div>
        )}     
export default DogComponent;

فهرست ۶ مؤلفه StaticImage را از بسته gatsby-plugin-image وارد می کند و از آن برای نمایش تصویر در URL داده شده استفاده می کند. توجه داشته باشید که اگر می‌خواهید فایل‌ها را از سیستم فایل محلی بارگیری کنید، باید gatsby-source-filesystem را نیز وارد کنید و آن را به گونه‌ای پیکربندی کنید که به مکان(هایی) که فایل‌های تصویری شما در آن قرار دارند اشاره کند (به اینجا). اگر می‌خواهید از تصاویر پویا استفاده کنید، از مؤلفه GatsbyImage استفاده می‌کنید، و باید افزونه gatsby-transformer-sharp را نیز اضافه کنید.

گتسبی و GraphQL

یکی دیگر از ویژگی های قابل توجه گتسبی استفاده زیاد آن از GraphQL است، که یک زبان پرس و جو است که توسط فیس بوک ایجاد شده است. GraphQL می‌تواند داده‌ها را از منابع متعدد برای استفاده توسط اجزای شما استخراج کند. این قابلیت در بسیاری از افزونه‌های گتسبی برای یکسان کردن نحوه بارگیری داده‌ها استفاده می‌شود.

می‌خواهم با بیرون کشیدن داده‌ها از اطلاعات تعریف‌شده در داخل فایل gatsby-config.js، نحوه عملکرد این کار را به شما بفهمانم. فرآیند مشابهی برای دسترسی به فایل‌ها از سیستم فایل و داده‌ها از سیستم‌های مدیریت محتوا و پایگاه‌های داده استفاده می‌شود.

ابتدا به gatsby-config.js نگاه کنید. توجه کنید که چند فیلد فراداده را صادر می کند، همانطور که در فهرست ۷ مشاهده می شود.

فهرست ۷. صادرات gatsby-config.js

module.exports = {
  siteMetadata: {
    siteUrl: "https://www.yourdomain.tld",
    title: "My Demo",
  }

اکنون فایل src/pages/mypage.js را باز کنید و همانطور که در فهرست ۸ نشان داده شده است به آن ابرداده دسترسی پیدا کنید.

فهرست ۸. دسترسی به ابرداده با GraphQL

import * as React from "react";
import { Link, useStaticQuery, graphql } from 'gatsby';
import Dog from '../components/Dog.js';

const MyPage = () => { 
const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)
return (
        <main>{data.site.siteMetadata.title}
          <Link to="/">Home</Link>
        <br />
<Dog name="Buster" />
        </main>
)}

export default MyPage;

تغییرات در فهرست ۸ با وارد کردن بسته‌های useStaticQuery و graphql از gatsby آغاز می‌شود. در بدنه نشانه‌گذاری، می‌توانید نشانه‌ای را ببینید که با {data.site.siteMetadata.title} به ابرداده‌های سایت دسترسی دارد. اما این داده ها از کجا می آیند؟

قبل از عبارت return، متغیر داده با فراخوانی به useStaticQuery پر می‌شود، و این یک پرس و جوی GraphQL را تعریف می‌کند که به ابرداده سایت دسترسی دارد. این پرس و جوها به متغیرهای صفحه مانند پارامترهای پرس و جو دسترسی دارند، و بنابراین می توانند هنگام دسترسی به ذخیره اطلاعات (یعنی با استفاده از شناسه موجودیت) کاملاً پویا باشند.

GraphQL احتمالاً بزرگترین مانع برای پذیرش گتسبی است، زیرا رابط کاربری پیچیده ای دارد. اما در دراز مدت، GraphQL یک رویکرد قدرتمند برای پرس و جو داده های یکپارچه ارائه می دهد.

گتسبی بزرگ

شما برخی از قابلیت های گتسبی را چشیده اید. گتسبی دارای یک اکوسیستم افزونه گسترده است، با افزونه‌های رسمی و ایجاد شده توسط جامعه. هر زمان که به چیزی نیاز داشتید، مکان خوبی برای شروع است.

گتسبی برای همگام شدن با تغییرات صنعت به تکامل خود ادامه می دهد. این یک گزینه وسوسه انگیز است، به خصوص زمانی که به دنبال ساخت سایت های ثابت مانند وبلاگ ها هستید.

درباره توسعه جاوا اسکریپت بیشتر بخوانید

• یک خط لوله ساخت خودکار ساده برای Node.js
• با Dropwizard REST APIهای عملی
• کار با MarkoJS
• کار با SolidJS
• دستی با SvelteKit
• دستی با Svelte
• کار با MarkoJS
• نحوه استفاده از Auth0 با Node.js و Express
• نحوه استفاده از FilePnd با Node.js
• کار با CodeSandBox
• ۷ ابزاری که توسعه جاوا اسکریپت را تغییر می دهد
• ۱۰ نکته برای تنظیم عملکرد React UI
• نحوه استفاده از حالت همزمان React
• نحوه مدیریت تعامل مؤلفه در React
• نحوه رسیدگی به خطاها در React
• نحوه استفاده از مؤلفه های عملکردی React