اختار المؤلف Code.org ليتلقى تبرعًا كجزء من برنامج اكتب من أجل التبرعات.
المقدمة
عادةً ما يمكنك إنشاء مشروع جديد باستخدام Create React App، ولكن قد يستغرق الأمر وقتًا طويلاً لتثبيت أكثر من 140 ميجابايت من التبعيات. Vite هو أداة خفيفة الوزن تستهلك 31 ميجابايت من التبعيات، مما سيوفر الوقت في بدء مشروع جديد. كما يستخدم Vite وحدات ES (ECMAScript) الخاصة بالمتصفح لربط ملفات JavaScript، مما لا يعيد بناء الحزمة بأكملها بعد كل تغيير في الملف. تلك الفروقات تؤدي إلى تجربة أسرع عند إنشاء وتحديث وبناء تطبيق React باستخدام Vite.
سيقوم هذا البرنامج التعليمي بتركيب تطبيق React جديد باستخدام أداة Vite. ستقوم بإنشاء تطبيق أساسي مع مكون جديد وCSS وملف صورة، وتحضير حزمة محسنة للنشر.
بسهولة، يمكنك نشر تطبيقات React باستخدام DigitalOcean App Platform. نشر React مباشرةً من GitHub في دقائق.
المتطلبات
لمتابعة هذا البرنامج التعليمي، ستحتاج إلى ما يلي:
- Node.js الإصدار 12.2.0 أو أحدث مثبت على جهازك. يمكنك تثبيت أحدث إصدار من Node.js باستخدام البرنامج التعليمي الخاص بنا حول كيفية تثبيت Node.js.
- مدير حزم Yarn الإصدار 1.22.0 أو أحدث مثبت على جهازك. يمكنك تثبيت Yarn باستخدام الخطوة 1 في كيفية تثبيت واستخدام مدير حزم Yarn لـ Node.js.
- معرفة بHTML وCSS و JavaScript الحديث. كما يساعد معرفة JavaScript الحديث المستخدم في React.
- A foundational knowledge of React, which you can learn with the How To Code in React series.
- A mobile phone connected to the same Wifi network as your computer so you can preview your app from mobile.
الخطوة 1 — إنشاء مشروع Vite
في هذه الخطوة، ستقوم بإنشاء مشروع React جديد باستخدام أداة Vite من سطر الأوامر. ستستخدم مدير الحزم yarn لتثبيت وتشغيل النصوص.
قم بتشغيل الأمر التالي في الطرفية الخاصة بك لبناء مشروع Vite جديد:
- yarn create vite
سيقوم هذا الأمر بتشغيل الأداة القابلة للتنفيذ Vite من مستودع npm البعيد. سيقوم بتكوين الأدوات اللازمة لبناء بيئة تطوير React محلية. وأخيرًا، سيفتح قائمة سطر الأوامر لإعدادات المشروع ونوع اللغة.
بعد انتهاء النصيحة، ستُطلب منك إدخال اسم المشروع:
Outputyarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "[email protected]" with binaries:
- create-vite
- cva
? Project name: » vite-project
اكتب اسم مشروعك (سيستخدم هذا البرنامج التعليمي digital-ocean-vite كاسم مثال):
- digital-ocean-vite
بعد إدخال اسم المشروع الخاص بك، سيطلب Vite منك اختيار إطار عمل:
Output? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
Vue
> React
Preact
Lit
Svelte
Others
يتيح لك Vite إعداد مجموعة من أنواع المشاريع، ليس فقط React. حاليًا، يدعم React، Preact، Vue، Lit، Svelte، و JavaScript الخام.
استخدم مفتاح الأسهم على لوحة المفاتيح الخاصة بك لتحديد React.
بعد اختيار إطار عمل React، سيطلب Vite منك اختيار نوع اللغة. يمكنك استخدام JavaScript أو TypeScript للعمل في مشروعك.
استخدم مفاتيح الأسهم لتحديد JavaScript:
Output? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
TypeScript
JavaScript + SWC
TypeScript + SWC
بعد إعداد الإطار، سترى نتيجة تفيد بأن المشروع قد تم بناؤه. بعد ذلك، سيوجهك Vite إلى تثبيت الاعتماديات باستخدام Yarn:
OutputDone:
Scaffolding project in path\to\digital-ocean-vite...
Done. Now run:
cd digital-ocean-vite
yarn
yarn dev
Done in 129.89s.
انتقل إلى مجلد مشروعك كما هو موجه:
- cd digital-ocean-vite
ثم، استخدم الأمر yarn لتثبيت الاعتماديات الخاصة بالمشروع:
- yarn
عند الانتهاء، ستعود عملية تثبيت الاعتمادات بناتج يوضح مدة استغراق تثبيت الاعتمادات:
Outputsuccess Saved lockfile.
Done in 43.26s.
لقد قمت الآن بإعداد مشروع React جديد باستخدام Vite وتثبيت الحزم المطلوبة من React و Vite.
الخطوة التالية، ستبدأ خادم التطوير لاختبار التطبيق.
الخطوة 2 — بدء خادم التطوير
في هذه الخطوة، ستبدأ خادم التطوير للتحقق من أن كل شيء يعمل.
من داخل مجلد digital-ocean-vite، استخدم الأمر التالي لتشغيل خادم التطوير:
- yarn run dev
هذا الأمر هو اختصار لأمر vite. سيقوم بتشغيل مشروعك في وضع التطوير.
ستتلقى الناتج التالي:
OutputVITE v4.0.4 ready in 847 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
بعد ذلك، افتح متصفحك وقم بزيارة http://localhost:5173/. سيتم تشغيل مشروع React الافتراضي على المنفذ 5173:
عندما ترى هذا التطبيق يعمل، فقد قمت بتثبيت React بنجاح مع Vite. الخطوة التالية، ستقوم بمعاينة تطبيقك من هاتفك المحمول.
الخطوة 3 — معاينة التطبيق من الهاتف المحمول
Vite لا يكشف تطبيق التطوير الخاص بك لشبكتك افتراضيًا. في هذه الخطوة، ستكشف التطبيق لشبكة محلية لمعاينته من هاتفك المحمول.
لتشغيل تطبيقك في شبكة محلية، يجب عليك أولاً إيقاف الخادم الحالي. في الطرفية الخاصة بك، استخدم CTRL+C لإنهاء تشغيل الخادم التطويري الحالي.
ثم، استخدم الأمر التالي لتشغيل مشروعك:
- yarn run dev --host
العلم --host يخبر Vite بتعريض تطبيقك للشبكة المحلية.
سوف تتلقى هذا الإخراج في الطرفية الخاصة بك:
OutputVITE v4.0.4 ready in 747 ms
➜ Local: http://localhost:5173/
➜ Network: http://your_ip_address:5173/
➜ press h to show help
هذا هو عنوان IP المحلي، الفريد لشبكة الكمبيوتر أو جهاز التوجيه الخاص بك.
افتح متصفحًا على هاتفك المحمول، ثم اكتب عنوان الـ IP أعلاه والمنفذ للوصول إلى معاينة تطبيق Vite الخاص بك من هاتفك المحمول:
لقد قمت الآن بتشغيل تطبيقك في بيئة التطوير وتحققت من أنه يعمل. في الخطوة التالية، ستقوم بإزالة رمز النموذج الأساسي الذي جاء مع Vite.
الخطوة 4 — إزالة الرمز الأساسي الافتراضي
في هذه الخطوة، ستقوم بإزالة ملفات النموذج الأساسية لمشروع Vite من الدليل src/، مما سيتيح لك إعداد تطبيق جديد. كما ستتعرف أيضًا على هيكل المشروع الافتراضي للتطبيق الحالي.
استخدم الأمر التالي لعرض محتويات الدليل src/ الخاص بك:
- ls src/
الناتج سيقوم بسرد جميع الملفات المتاحة:
OutputApp.css
App.jsx
assets
index.css
main.jsx
استخدم أمر rm لحذف ملف أو دليل. استخدم الأوامر التالية لحذف الملفات الافتراضية من المشروع:
- rm src/App.css
- rm src/App.jsx
- rm src/index.css
احذف دليل assets باستخدام الأمر التالي:
- rm -r src/assets
العلم -r يعد عملية تكرارية، مطلوبة عند حذف دليل مع محتوياته.
بعد حذف هذه الملفات، سيظل فقط ملف main.jsx في الدليل src/. قم بتشغيل الأمر ls src/ مرة أخرى لرؤية الملفات المتبقية:
- ls src/
الآن، سيحتوي الدليل فقط على ملف main.jsx:
Outputmain.jsx
بسبب إزالتك لجميع الملفات الأخرى، يجب الآن إزالة الرابط في main.jsx إلى ملف CSS تم حذفه.
افتح main.jsx للتحرير باستخدام الأمر التالي:
- nano src/main.jsx
قم بإزالة السطر المظلل لفصل الرابط إلى ملف CSS:
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import "./index.css"
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
احفظ وأغلق ملف main.jsx.
أنشئ ملفًا جديدًا بالاسم App.jsx تحت الدليل src/ باستخدام الأمر التالي:
- nano src/App.jsx
أضف الكود التالي إلى ملف App.jsx:
export default function App() {
return (
<>
<div>Hello World</div>
</>
);
}
يقوم هذا الكود بإنشاء مكون React وظيفي جديد يسمى App. بادئة export default تخبر JavaScript بتصدير هذه الوظيفة كتصدير افتراضي. يحتوي جسم الوظيفة على <div> مع نص Hello World.
احفظ وأغلق ملف App.jsx.
استخدم الأمر التالي لتشغيل خادم التطوير مرة أخرى:
- yarn run dev --host
الآن، افتح أو قم بتحديث http://localhost:3000 في متصفحك للوصول إلى صفحة فارغة تعرض نص Hello World:
في هذه الخطوة، قمت بإزالة بعض الملفات الافتراضية من مشروع Vite. في الخطوة التالية، ستقوم ببناء تطبيق أساسي مع مكونات جديدة، وملفات CSS، وملفات صور.
الخطوة 5 — إنشاء تطبيق أساسي
في هذه الخطوة، ستقوم بإنشاء مكونات، وإضافة ملفات CSS، وربط الصور من خلال إنشاء تطبيق أساسي. ابدأ بإغلاق خادم التطوير.
في القسم الفرعي التالي، ستقوم بإنشاء مكون جديد لتطبيق React الخاص بك.
إنشاء مكون
إضافة مكون جديد يضيف النمطية إلى مشروعك. ستقوم بإضافة جميع المكونات في دليل components للحفاظ على التنظيم.
استخدم الأمر التالي لإنشاء دليل جديد يسمى components داخل src/:
- mkdir src/components
ثم، قم بإنشاء ملف جديد يسمى Welcome.jsx داخل دليل src/components/ بالأمر التالي:
- nano src/components/Welcome.jsx
أضف الكود التالي إلى ملف Welcome.jsx:
export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
</div>
</>
);
}
الشيفرة أعلاه ستنشئ مكونًا جديدًا للتفاعل يُسمى `Welcome`. بادئة `export default` تخبر JavaScript بتصدير هذه الوظيفة كتصدير افتراضي.
علامة `div` مع اسم فئة `wrapper` تسمح لك باستهداف هذا القسم في CSS. العلامات `h1` و `p` ستعرض الرسالة على الشاشة.
احفظ وأغلق الملف.
بعد ذلك، ستقوم بالإشارة إلى هذا المكون الجديد في ملف `App.jsx`.
افتح `App.jsx` باستخدام الأمر التالي:
- nano src/App.jsx
حدث محتويات `App.jsx` بالشيفرة المميزة التالية:
import Welcome from "./components/Welcome"
export default function App() {
return (
<>
<Welcome />
</>
)
}
هذا السطر من الشيفرة سيقوم باستيراد `Welcome.jsx` إلى التطبيق وربط المكون الجديد بجسم الوظيفة. عند الانتهاء، احفظ وأغلق الملف.
في القسم الفرعي التالي، ستقوم بإضافة صورة إلى التطبيق الخاص بك.
إضافة صورة
إضافة الصور في React هو حالة استخدام شائعة في تطوير التطبيقات.
قم بإنشاء دليل جديد يسمى `img` تحت الدليل `src/` باستخدام الأمر التالي:
- mkdir src/img
انتقل إلى الدليل `src/img` باستخدام هذا الأمر:
- cd src/img
ستقوم بتنزيل هذه الصورة لـ Sammy إلى `src/img`.
قم بتنزيل الصورة باستخدام `wget`:
- wget https://html.sammy-codes.com/images/small-profile.jpeg
قم بتغيير اسم الصورة باستخدام الأمر التالي:
- mv small-profile.jpeg sammy.jpeg
هذا الأمر يُعيد تسمية ملف الصورة من small-profile.jpeg إلى sammy.jpeg، مما سيجعل الإشارة إليه فيما بعد أسهل.
ارجع إلى الدليل الرئيسي باستخدام هذا الأمر:
- cd ../../
بعد ذلك، ستقوم بتحديث ملف Welcome.jsx لربطه بالصورة. قم بفتح الملف:
- nano src/components/Welcome.jsx
قم بتحديث ملف Welcome.jsx الخاص بك عن طريق إضافة السطور المظللة:
import Sammy from "../img/sammy.jpeg"
export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
<img src={Sammy} alt="Sammy Image" width={200} height={200} />
</div>
</>
)
}
السطر الأول سيقوم باستيراد الصورة إلى React كوحدة.
السطر الآخر داخل جسم الدالة سيقوم بإنشاء علامة <img> جديدة وربط السمة src بمكون الصورة الذي قمت بالتحديث له للتو. السمات width و height ستقوم بتعيين سمات الصورة المقابلة إلى 200 بكسل.
احفظ وأغلق ملف Welcome.jsx.
بعد ذلك، ستقوم بإضافة CSS إلى مشروعك.
إضافة CSS
في هذا القسم الفرعي، ستقوم بإضافة ملف CSS مخصص إلى مشروعك لتنسيق التطبيق الخاص بك.
قم بإنشاء دليل جديد باسم css تحت الدليل src/ باستخدام الأمر التالي:
- mkdir src/css
الآن، قم بإنشاء ملف CSS جديد بالاسم main.css في src/css:
- nano src/css/main.css
أضف الكود التالي إلى ملف main.css:
body {
display: grid;
place-items: center;
background-color: #b4a7d6;
font-family: Arial, Helvetica, sans-serif;
}
.wrapper {
background-color: #fff9e6;
padding: 20px;
border-radius: 10px;
}
h1 {
color: #8873be;
}
في ال CSS أعلاه، قمت بتعيين عرض الشبكة ووضع العناصر في الوسط للـ body. كما قمت بتعيين عائلة الخط ولون الخلفية.
الفئة .wrapper ستحدد div الحاوية في ملف Welcome.jsx الخاص بك. ستقوم الأنماط لهذه الفئة بعمل الآتي:
- تعيين لون خلفية.
- إضافة تباعد بقيمة 20 بكسل.
- إضافة زوايا مستديرة بقيمة 10 بكسل.
المحدد h1 سيستهدف الوسم في HTML، مع تعيين لونه إلى درجة من اللون الأرجواني.
عند الانتهاء، قم بحفظ وإغلاق ملف main.css.
بعد ذلك، ستقوم بالإشارة إلى ملف CSS الجديد من مكون Welcome.jsx. افتح ملف Welcome.jsx:
- nano src/components/Welcome.jsx
قم بتحديث محتويات الملف بالسطر المميز:
import Sammy from "../img/sammy.jpeg"
import "../css/main.css"
export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
<img src={Sammy} alt="Sammy Image" width={200} height={200} />
</div>
</>
)
}
سيقوم هذا السطر بإستيراد ملف CSS كوحدة في مكونك. قد تحتاج إلى تحديث السطر بالمسار الصحيح لمجلد مشروعك.
عند الانتهاء، قم بحفظ وإغلاق ملف Welcome.jsx.
في القسم الفرعي التالي، ستقوم بتغيير شريط عنوان التطبيق الخاص بك.
تغيير شريط عنوان التطبيق
افتراضيًا، يعرض تطبيق Vite النص Vite + React في شريط عنوان المتصفح. في هذه الخطوة، ستقوم بتغييره إلى عنوان وصفي.
افتح index.html في دليل الجذر الخاص بك:
- nano index.html
قم بتحديث وسم <title> بالنص المميز:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Cool App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
هذا النص يستبدل شريط عنوان التطبيق Vite App الافتراضي بعنوان تطبيق مخصص لك.
احفظ وأغلق ملف index.html.
إذا كنت بحاجة لإعادة تشغيل خادم التطوير، قم بتشغيل هذا الأمر:
- yarn run dev --host
بعد كل هذه التغييرات، قم بزيارة http://localhost:5173 لعرض تطبيقك. سترى نسخة جديدة من تطبيقك.
يمكنك إغلاق خادم التطوير عندما تكون مستعدًا للانتقال إلى المرحلة التالية من عملية البناء.
لقد قمت الآن بإضافة صورة، وتغيير الأنماط، وجعل واجهة المستخدم مصقولة. في الخطوة التالية والأخيرة، ستقوم بإنشاء حزمة تطبيق محسنة للنشر.
الخطوة 6 — البناء للإنتاجية
في هذه الخطوة، ستقوم بإنشاء حزمة تطبيق محسنة جاهزة للنشر على خادم. لإنشاء الحزمة، قم بتشغيل الأمر التالي في الطرفية:
- yarn run build
هذا الأمر ينشئ مجلدًا جديدًا dist يحتوي على ملفات المصدر المصغرة التي يمكنك نشرها على خادمك للإنتاجية.
ستحصل على نتيجة مشابهة لهذه:
Outputvite v4.0.4 building for production...
✓ 34 modules transformed.
dist/index.html 0.45 kB
dist/assets/sammy-9cb83ad5.jpeg 6.74 kB
dist/assets/index-d1c95597.css 0.19 kB │ gzip: 0.16 kB
dist/assets/index-e0751083.js 143.19 kB │ gzip: 46.04 kB
✨ Done in 1.63s.
يمكنك الآن نشر محتويات المجلد dist على خادم عبر الإنترنت. إذا كان لديك خادم Apache أو Nginx, يمكنك تحميل المحتويات يدويًا. يمكنك أيضًا استخدام منصة تطبيق لتشغيل سكريبت البناء وتوليد ملفات البناء تلقائيًا. لنشر تطبيق React الخاص بك على منصة تطبيق DigitalOcean، اتبع البرنامج التعليمي الخاص بنا حول كيفية نشر تطبيق React على منصة التطبيق DigitalOcean.
الاستنتاج
في هذا البرنامج التعليمي، قمت بإنشاء تطبيق React جديد باستخدام أداة Vite. قمت بتركيب تطبيق React جديد بتنفيذ أمر yarn create vite. بعد إزالة رموز البداية، قمت بإنشاء مكوناتك من خلال إضافة صورة مخصصة، وملف CSS، وتغيير شريط العنوان. وأخيرًا، قمت بإنشاء حزمة محسنة باستخدام أمر yarn run build، جاهزة للنشر.
الآن بعد أن لديك تطبيق React مبني بواسطة Vite، انظر ماذا يمكنك فعله مع React في سلسلة كيفية البرمجة في React.js واستكشاف البرامج التعليمية الأخرى لـ React.
Source:
https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-vite