מחבר: רועי ברקוביץ

התמונה היא גרפיקה פשוטה הכוללת את המילים "הווים מותאמים אישית" וסמל אטום.

custom Hooks

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

קרא עוד »
התמונה כוללת את הלוגו של Google Chrome לצד חלק פאזל כחול, המוצב על רקע לבן.

chrome extentions

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

קרא עוד »
התמונה מציגה את הטקסט "Big O" בגופן פשוט ולבן על רקע כחול.

Big O וסיבוכיות ריצה

Facebook LinkedIn WhatsApp X Big O וסיבוכיות ריצה ישנן דרכים רבות לנתח עד כמה טוב הקוד שכתבנו, יש אנשים שמאמינים שקוד יפה יותר טוב ואחרים

קרא עוד »
התמונה כוללת את הלוגו של React ואת הלוגו .env על רקע לבן.

שימוש במשתני סביבה

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

קרא עוד »
עיגול כחול עם לוגו לבן במרכז, הכולל אות "X" מסוגננת עם שני משולשים משני הצדדים.

הרחבות מומלצות ל- VSCode

visual studio code הוא ללא ספק עורך הקוד הפופולרי ביותר כיום והוא ממשיך לצבור פופולאריות ומאגר ההרחבות שלו רק גדל מיום ליום הודות לקהילת הקוד

קרא עוד »
התמונה כוללת שני עיגולים אפורים חופפים, כל אחד מכיל לוגו מובהק: סמל אטום כחול משמאל וריבוע ורוד עם האות הלבנה "S" מימין.

StoryBook

Storybook היא בעצם ספריית UI שניתן להשתמש בה לתיעוד הקומפוננטות שלנו. המטרה היא ליצור סביבה מבודדת שבה ניתן לראות את כל הקומפוננטות שלנו ולשחק איתם

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

React StrictMode

StrictMode הוא פיצ׳ר שנוסף בגרסה 16.3 של ריאקט ומטרתו לעזור לנו למצוא בעיות פוטנציאליות באפליקציה! StrictMode אינו מרנדר ממשק משתמש כלשהו (ui), הוא רק מפעיל

קרא עוד »
שלט אדום עם טקסט לבן וחצים, על רקע שמיים כחולים עם עננים.

Error Boundaries

Error Boundaries הוצג לנו בריאקט 16 כדרך לתפוס שגיאות המתרחשות בשלב הרנדור ולהציג למשתמש fallback שאותו נגדיר. בפוסט זה נלמד מהם Error Boundaries  מה הם

קרא עוד »
שתי מראות בצורת אליפסה עם טבעות כחולות וכתומות זוהרות מסביבן, על רקע כהה.

React Portals

ריאקט 16 מציגה לנו שלל פיצרים חדשים, אחד מהם הוא Portals שעליו נדבר בפוסט זה. Portals בעצם מאפשרים לנו לרנדר קומפוננטת ילד לתוך DOM node שקיים מחוץ להיררכיית

קרא עוד »
שלט צהוב עם המילים "RIGHT" ו-"WRONG" בטקסט שחור, מלווה בחצים המצביעים לכיוונים מנוגדים.

Type Checking With PropTypes

כפי שכולנו יודעים ריאקט היא ספריית ג׳אווהסקריפט והיא אינה מספקת לנו בדיקות של type-checking. העברת props מסוג שגוי לקומפוננטה עלול לגרום לקומפוננטה לא להתנהג כמו

קרא עוד »
שלט עם שלט לבן עם המילה "ברירת מחדל" באותיות גדולות ואפורות כהות, על רקע שמיים כחולים עם עננים לבנים.

defaultProps VS ES6 default values

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

קרא עוד »
ראש רובוט דמוי אדם עתידני ומתכתי עם פנים דמוי אדם, על רקע קוד בינארי ואורות מטושטשים.

setState callback in React hooks

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

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

Virtual DOM

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

קרא עוד »
שלוש דמויות לבנות תלת מימדיות הבונות קיר של קוביות כסף עם קוביות זהב.

Code splitting

בגרסא 16.6 של ריאקט קיבלנו תוספות מעולות שנותנות לנו כמפתחים את היכולת לעשות code splitting לקוד שלנו ממש בקלות. בפוסט זה נתמקד בתכונות החדשות,  lazy

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

הסרת console.log מסביבת פרודקשיין

אחת מהדרכים בג׳אווה סקריפט לדעת מה מחזיק משתנה מסויים או מה פונקציה מסויימת מחזירה( או כל סוג של output) היא כתיבה לקונסול באמצעות console.log. בשונה

קרא עוד »
התמונה מציגה את הלוגו של React Router, ספריית JavaScript פופולרית לניתוב בצד הלקוח ביישומי אינטרנט.

React Router

ראוטינג הוא ניווט בין "עמודים" בתוך האפליקציה שלנו,כמובן שהם לא ״עמודים״ אמיתיים, מכיוון שמדובר ב- SPA(אפליקציה שהיא בעצם דף אחד), אבל מבחינת המשתמש זה נראה

קרא עוד »
contextapi

Context API

הצוות של ריאקט שחרר לנו את Context API בגרסה 16.3.0, החל מגרסא זו והלאה בטוח להשתמש ב- Context API אשר היה בשלבים ניסיוניים. Context API

קרא עוד »
עיבוד תלת מימדי של פאזל עם כדור מרכזי מוקף בחלקים מעוקלים, על רקע אפור.

CSS Modules

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

קרא עוד »
useReducer

UseReducer

בפוסט הקודם למדנו על useEffectועל useContext. בפוסט זה נעסוק בהוק נוסף, useReducer , נכיר את יכולותיו ולמה הוא משמש.​ useReducer מחזיר מערך של 2 אלמנטים, בדומה

קרא עוד »
highorder

Higher Order Functions

Higher-Order Functions נמצאים בשימוש נרחב בג׳אווהסקריפט ובפרט בריאקט. אם אתם כבר מפתחים בג׳אווהסקריפט ולא מכירים את המושג Higher-Order Functions סיכוי סביר שכבר השתמשתם ביכולות שלהם

קרא עוד »
אייקון טעינה בעיצוב עגול הכולל אליפסות כחולות וסגולות, בליווי הטקסט "טוען..." מתחתיו.

Concurrent mode in React

כחלק ממפת הדרכים(Road map) של ריאקט בזמן הקרוב הם אמורים לשחרר לנו את ״Concurrent mode". אם עדיין לא שמעתם על ״Concurrent mode"  אז הגיע הזמן.

קרא עוד »
עיבוד תלת מימדי של אוסף של קוביות לבנות, כחולות ואפורות המסודרות בדפוס אקראי לכאורה.

אנימציות בריאקט

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

קרא עוד »
קרס דייג עם צל, מלווה בלוגו כחול ושחור הכולל סמל אטום.

ריאקט הוקס חלק ב׳ – React Hooks

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

קרא עוד »
קרס דייג עם צל, מלווה בלוגו כחול ושחור הכולל סמל אטום.

ריאקט הוקס חלק א- React Hooks

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

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

עבודה עם Inputs

ריאקט נייטיב נותנת לנו סט של קומפננטות שמובנות בה, אחת הקומפוננטות היא <TextInput> . כדי להתחיל ולהשתמש בה כל מה שנצטרך לעשות הוא רק לייבא

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

עבודה עם API

ריאקט נייטיב נותנת לנו לעבוד עם fetch בשביל לגשת לשרת ולבקש מידע.אם יש לכם ניסיון עם ES6 אז אתם בטח מכירים את היכולות של fetch

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

פלקסבוקס בריאקט נייטיב

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

קרא עוד »
אוסף של שמונה חלקי פאזל, כל אחד עם צבע מובהק, מסודרים בדוגמה עגולה על רקע כחול.

קומפוננטות בריאקט

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

קרא עוד »
צעיר בתנוחת כריעה על מסלול ריצה, כשברקע נראים מגרש כדורגל ומבנה.

ריאקט נייטיב- בואו נתחיל

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

קרא עוד »