התמונה מציגה את הטקסט "HTTP/2" בגופן פשוט ולבן על רקע שחור מוצק.
JavaScript
רועי ברקוביץ

פרוטוקול HTTP/2 – כל מה שרציתם לדעת

HTTP הם ראשי תיבות של  Hypertext Transfer Protocol שזה בעצם פרוטוקול תקשורת שנועד להעביר את דפי האינטרנט (תמונות,סרטונים, קבצי סאונד וכו..)  ברשת בין השרתים והדפדפנים לשם

קרא עוד »
התמונה היא גרפיקה פשוטה הכוללת את המילים "הווים מותאמים אישית" וסמל אטום.
React
רועי ברקוביץ

custom Hooks

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

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

chrome extentions

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

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

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

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

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

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

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

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

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

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

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

StoryBook

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

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

React StrictMode

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

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

Error Boundaries

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

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

React Portals

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

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

Type Checking With PropTypes

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

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

defaultProps VS ES6 default values

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

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

setState callback in React hooks

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

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

Virtual DOM

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

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

Code splitting

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

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

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

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

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

React Router

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

קרא עוד »
contextapi
React
רועי ברקוביץ

Context API

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

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

CSS Modules

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

קרא עוד »
useReducer
JavaScript
רועי ברקוביץ

UseReducer

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

קרא עוד »
highorder
JavaScript
רועי ברקוביץ

Higher Order Functions

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

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

Concurrent mode in React

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

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

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

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

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

קיצור טקסט (Ellipsis) – ריאקט נייטיב

שתי תגיות שמגיעות לנו כ ״props" של התגית <Text> הן: ״numberOfLines״ ו-״ellipsizeMode״. כדי להשתמש ב״ellipsizeMode״ נהיה חייבים להגדיר את מספר השורות ב-"numberOfLines". ברגע שנגדיר את

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

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

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

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

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

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

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

עבודה עם Inputs

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

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

עבודה עם API

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

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

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

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

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

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

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

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

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

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

קרא עוד »