custom Hooks

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

קרא עוד »

chrome extentions

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

קרא עוד »

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

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

קרא עוד »
env

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

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

קרא עוד »

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

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

קרא עוד »

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 שקיים מחוץ להיררכיית

קרא עוד »

Type Checking With PropTypes

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

קרא עוד »

defaultProps VS ES6 default values

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

קרא עוד »
callbackjs

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

ראוטינג הוא ניווט בין "עמודים" בתוך האפליקציה שלנו,כמובן שהם לא ״עמודים״ אמיתיים, מכיוון שמדובר ב- 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

קרא עוד »

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

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

קרא עוד »

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

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

קרא עוד »

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

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

קרא עוד »