سلام! اگر عاشق React هستید و می‌خواهید روشی سریع‌تر و سبک‌تر را برای ساخت وب‌سایت امتحان کنید، Astro شما را تحت پوشش قرار می‌دهد. Astro استفاده از کامپوننت‌های React را در چارچوب استاتیک اول خود آسان می‌کند.
در این پست، من به شما نشان خواهم داد که چگونه React را در یک پروژه Astro ادغام کنید و یک برنامه تعاملی جالب برای شروع کار بسازید.
چرا از React با Astro استفاده کنیم؟
بزرگترین نقطه قوت Astro رویکرد اول استاتیک آن است، اما گاهی اوقات برای تعامل پویا به آن جادوی React نیاز دارید. چرا ترکیب React با Astro می تواند یک ترکیب برنده باشد:
- بهترین های هر دو دنیا: استفاده از عملکرد سبک Astro را حفظ کنید و در عین حال سیستم قدرتمند مبتنی بر مؤلفه React را برای ویژگی‌های تعاملی حفظ کنید.
- هیدراتاسیون انتخابی: Astro به شما امکان می دهد کامپوننت های React را فقط در صورت نیاز بارگیری کنید و در پهنای باند صرفه جویی کنید و سرعت سایت شما را افزایش دهید.
- ادغام آسان: افزودن React به Astro ساده و شهودی است—شما لازم نیست اجزای React خود را بازنویسی کنید.
بیایید یک شمارنده با قدرت واکنش در Astro بسازیم
شما برای یک نسخه نمایشی اینجا هستید. بیایید شروع کنیم! ما قصد داریم با استفاده از React در پروژه Astro یک برنامه شمارنده ساده بسازیم.
در اینجا به این صورت است:
مرحله 1: یک پروژه Astro جدید ایجاد کنید
- با راه اندازی یک پروژه جدید Astro شروع کنید. دستورات را دنبال کنید و می خواهید در این مسیر شروع کنید
.و شما یک برنامه شروع تازه می خواهید:
mkdir astro-land && cd astro-land
npm create astro@latest
- پشتیبانی React را به پروژه خود اضافه کنید. دستورات را دنبال کنید. Astro این کار را بسیار آسان می کند:
npx astro add react
مرحله 2: کامپوننت شمارنده را بسازید
- یک کامپوننت React برای شمارنده ایجاد کنید. در
src/components/Counter.jsx، این را اضافه کنید:
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div style={{ textAlign: 'center' }}>
<h2>Counter: {count}h2>
<button onClick={() => setCount(count + 1)}>Increasebutton>
<button onClick={() => setCount(count - 1)}>Decreasebutton>
div>
);
}
export default Counter;
مرحله 3: از شمارنده در صفحه Astro استفاده کنید
- باز کنید یا ایجاد کنید
src/pages/index.astroو وارد کنیدCounterجزء:
---
import Counter from '../components/Counter.jsx';
---
<html>
<head>
<title>React in Astrotitle>
head>
<body>
<h1 style={{ textAlign: 'center' }}>Welcome to Astro + Reacth1>
<Counter client:load />
body>
html>
جادو اینجاست: client:load دستورالعمل به Astro می گوید که این مؤلفه را در سمت مشتری هیدراته کند و آن را تعاملی کند.
مرحله 4: اجرا کنید و جادو را ببینید
- سرور توسعه را راه اندازی کنید:
npm run dev
- مرورگر خود را باز کرده و به آن بروید
http://localhost:4321. روی آن دکمه ها کلیک کنید و پیشخوان خود را تماشا کنید که مانند یک افسون عمل می کند!
هیدراتاسیون انتخابی: چرا عالی است
یکی از جالب ترین ویژگی های Astro، هیدراتاسیون انتخابی است. برخلاف چارچوب‌های سنتی که همه جاوا اسکریپت را از قبل بارگیری می‌کنند، Astro فقط اجزایی را که نیاز به تعامل دارند هیدراته می‌کند. این بدان معنی است که سایت شما سریع و سریع باقی می ماند، حتی اگر عناصر پویاتری اضافه کنید.
در مثال ما، فقط Counter جزء هیدراته می شود، در حالی که بقیه صفحه فقط HTML ایستا است.
افکار نهایی
استفاده از React with Astro یک تغییر دهنده بازی برای ساخت وب سایت هایی با عملکرد بالا با تعامل مناسب است. چه در حال ساختن یک وبلاگ، یک نمونه کار یا یک برنامه پیچیده باشید، این ترکیب ابزارهایی را در اختیار شما قرار می دهد تا چیزی عالی ایجاد کنید.
پس ادامه دهید، به Astro + React یک چرخش بدهید و نظر خود را به من بگویید. کد نویسی مبارک!
اگر این کمک کرد یا اگر مایلید آموزش های بیشتری را در مورد React + Astro ببینید، در زیر نظر دهید. به عنوان مثال، ادغام اجزای پیچیده تر با props، افزودن فریمورک های دیگر مانند Tailwind و موارد دیگر!
