Site Logo
כניסה

הרכיב הראשון שלי על מכונת Windows

לעבודה ב codesandbox יש יתרון שמאוד קל להתחיל לעבוד ולא צריך להתקין כלום, אבל יש גם חיסרון גדול והוא שקשה יותר לדבג ולבנות כך אפליקציות אמיתיות. לכן אני ממליץ לתרגל ולעבוד במהלך כל שאר הקורס על המכונה שלכם. בשיעור זה נריץ יחד את כל ההתקנות.

תוכן עניינים

  1. מה צריך בשביל לכתוב קוד React
  2. התקנת Node.JS
  3. התקנת Visual Studio Code
  4. התקנת Webpack והגדרת פרויקט ריאקט

1. מה צריך בשביל לכתוב קוד React

קישור לתיקיית הדוגמאות להורדה:
https://github.com/tocodeil/react2020-course-examples

או להורדת כל הדוגמאות כקובץ זיפ:
https://github.com/tocodeil/react2020-course-examples/archive/master.zip

בשביל לכתוב קוד ריאקט על המכונה שלנו נצטרך את הרכיבים הבאים:

  1. התקנת הכלי Node.JS - סביבה להרצת קוד JavaScript מחוץ לדפדפן.

  2. התקנת סביבת פיתוח שמכירה את ריאקט ואת שפת JSX - אנחנו נשתמש ב Visual Studio Code.

  3. הגדרת הפרויקט ותהליך העבודה באמצעות Webpack.

2. התקנת Node.JS

נתחיל בהתקנת Node.JS. הורידו את הגירסא האחרונה מהקישור כאן:

https://nodejs.org/en/download/

והתקינו על המחשב שלכם. לאחר ההתקנה כנסו ל cmd וודאו שאתם יכולים להפעיל:

node --version

ורואים את מספר הגירסא שהתקנתם.

3. התקנת Visual Studio Code

סביבת הפיתוח Visual Studio Code היא סביבה חינמית מבית מייקרוסופט שמספקת חווית פיתוח טובה ליישומי ריאקט וכוללת תמיכה מובנית בשפה JSX, כך שקוד JavaScript עם אלמנטי HTML בתוכו יהיה מיושר כמו שצריך וצבוע נכון.

התקינו את הסביבה מהקישור הזה:

https://code.visualstudio.com/

לאחר מכן וודאו שאתם יכולים להפעיל אותה מתוך תפריט "התחל".

4. התקנת Webpack והגדרת פרויקט ריאקט

פרויקט ריאקט כולל קבצי JavaScript עם קוד JSX בתוכם. הבעיה היא שדפדפן לא יודע להריץ קוד JSX ולכן אנחנו צריכים להפוך את קוד ה JSX לקוד JavaScript רגיל שדפדפן יכול להבין לפני שנוכל לטעון את הדף שלנו בדפדפן. הכלי שהופך קוד JSX לקוד JavaScript רגיל נקרא Babel והדרך המקובלת להשתמש בו היא באמצעות כלי אחר שנקרא Webpack.

הכלי וובפאק הוא כלי בניה לפרויקט שלוקח קוד מקור והופך אותו למשהו שאפשר לטעון בדפדפן. אנחנו נגדיר את קוד המקור שלנו בתיקיה בשם src ונבקש מ webpack לבנות עבורנו את הפרויקט ולשים אותו בסוף בתוך תיקיה שנקראת dist. במהלך הפיתוח נעבוד עם כלי בשם webpack-dev-server כדי שלא נצטרך לבנות כל פעם מחדש את הפרויקט ונוכל לעבוד בצורה שוטפת.

וובפאק הוא כלי שמופעל באמצעות Node.JS ולכן בשביל לעבוד עם וובפאק אנחנו צריכים לארגן את הפרויקט שלנו דרך Node. אני אראה כאן בקצרה את השלבים לבניית פרויקט וובפאק פשוט עבור ריאקט. למידע נוסף ומעמיק יותר על וובפאק אני ממליץ לצפות בהזדמנות בקורס Webpack שיש לנו כאן באתר.

בתיקיית הדוגמאות תוכלו למצוא את התבנית לפרויקט ריק שאני בונה כאן בוידאו. מוזמנים להוריד את הדוגמא משם ולהמשיך אצלכם או ללכת איתי יחד עם הוידאו ולבצע כל צעד אצלכם על המכונה.

נתחיל ביצירת תיקיה חדשה עבור הפרויקט מתוך הממשק הגרפי של חלונות. אני אקרא לתיקיה react-course. אתם יכולים לבחור כל שם ובלבד שיהיה ייחודי עבורכם (אל תקחו משהו גנרי כמו react או webpack). לאחר מכן אפתח cmd בתוך תיקיה זו.

בתוך ה cmd אכתוב את הפקודה הבאה כדי לאתחל את התיקיה בתור תיקיית פרויקט Node:

npm init -y

הפקודה הבאה מתקינה את ריאקט ו Webpack לתוך הפרויקט החדש:

npm --save-dev react react-dom webpack webpack-cli babel-cli @babel/core @babel/preset-react html-webpack-plugin clean-webpack-plugin webpack-dev-server babel-loader

לאחר ההתקנה נמשיך עם יצירת קבצי הפרויקט. תחילה ניצור תיקיה בשם src ובתוכה קובץ בשם main.js. בקובץ רשמו את התוכן הבא:

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
    return (
        <div>
            <h1>Hello World</h1>
        </div>
    )
};

const root = document.querySelector('main');
ReactDOM.render(<App />, root);

ניצור תיקיה נוספת בשם html ובתוכה קובץ בשם template.html. בקובץ רשמו את התוכן הבא:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
    <main></main>
</body>
</html>

נסיים ביצירת קובץ בשם webpack.config.js ובתוכו רשמו את התוכן הבא:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: './src/main.js',
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-react'],
                    }
                }
            }
        ]
    },
    devServer: {
        overlay: true,
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './html/template.html',
        }),
        new CleanWebpackPlugin(),
    ]
};

עכשיו הכל במקום ואנחנו מוכנים להריץ את הפרויקט אצלנו על המכונה. הפעילו מתוך התיקיה הראשית של הפרויקט את הפקודה:

npx webpack-dev-server -d

הכלי יציג לכם על המסך באיזה פורט הוא העלה את השרת, אצלי זה היה 8080. כנסו בכרום לכתובת http://localhost:8080 (או אם היה אצלכם פורט אחר עדכנו את המספר בשורת הכתובת) ואם הכל עבד טוב תוכלו לראות את שורת הטקסט Hello World.

עכשיו אתם יכולים לשנות את הקוד, לשמור ולראות על המסך את הגירסא המעודכנת. בנוסף, בפעם הבאה שתגיעו להפעיל את הפרויקט עליכם להפעיל רק את הפקודה האחרונה. את ההתקנות אין צורך לבצע פעם נוספת.

אם לקחתם את תיקיית הדוגמא מתיקיית הדוגמאות שלי ורוצים להמשיך ממנה יהיה עליכם להפעיל את הפקודה:

npm install

מתוך ה cmd פעם אחת לפני הפעלת ה webpack-dev-server.

קישור לתיקיית הדוגמאות להורדה:
https://github.com/tocodeil/react2020-course-examples

או להורדת כל הדוגמאות כקובץ זיפ:
https://github.com/tocodeil/react2020-course-examples/archive/master.zip

אלה מכם שעובדים בגירסה Node 18 עשויים להיתקל בשגיאה של וובפאק שאומרת:

Error: error:0308010C:digital envelope routines::unsupported

אם נתקלתם בה יש להריץ את הפקודה:

set NODE_OPTIONS=--openssl-legacy-provider

ורק אחריה את:

npx webpack-dev-server -d