כיצד להגדיר פרויקט React עם Vite

JavaScript React

המחבר בחר ב-Code.org לקבל תרומה כחלק מתוכנית Write for Donations.

הקדמה

בדרך כלל, ייתכן שתרצה ליצור פרויקט חדש באמצעות Create React App, אך יכול לקחת הרבה זמן להתקין מעל 140 מגה־בייט של תלויות. Vite הוא כלי קל שדורש רק 31 מגה־בייט של תלויות, מה שיחסוך זמן בהתחלת פרויקט חדש. Vite גם משתמש ב-ES (ECMAScript) modules המובנים בדפדפן לקישור לקבצי JavaScript, וזה אינו בונה מחדש את החבילה השלמה לאחר כל שינוי בקובץ. ההבחנות הללו מובילות לחוויית יצירה, עדכון ובניית React App מהירה יותר עם 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, ו- vanilla 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.

שלב 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:

/src/main.jsx

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:

/src/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:

/src/components/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>
</>
);
}

הקוד לעיל ייצור רכיב React פונקציונלי חדש בשם Welcome. הקידומת export default מודיעה ל-JavaScript לייצא את הפונקציה כייצוא ברירת מחדל.

תג ה-div עם שם מחלקה wrapper מאפשר לך ליעד את האזור הזה ב-CSS. תגי ה-h1 וה-p יציגו את ההודעה על המסך.

שמור וסגור את הקובץ.

בשלב הבא, עליך להפנות לרכיב זה בקובץ ה-App.jsx.

פתח את הקובץ App.jsx בעזרת הפקודה הבאה:

nano src/App.jsx

עדכן את תוכן הקובץ App.jsx עם הקוד המודגש:

/src/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 שלך על ידי הוספת השורות המודגשות הבאות:

/src/components/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:

/src/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

עדכן את תוכן הקובץ עם השורה המודגשת:

/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> עם הטקסט המודגש:

/index.html

<!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