Translated to Hebrew

README-he.md

@@ -0,0 +1,115 @@
+# react-howto
+
+אם ריאקט (או פרונט־אנד בכללי) חדשה לך אפשר שתמצאי את העולם סביבה מבלבל. יש לכך מספר סיבות.
+
+* ריאקט בעבר לרוב היוותה מוקד לחובבי טכנולוגיה נסיונית ומומחים
+* פייסבוק רק פותחת-קוד שהיא משתמשת בו, אז היא לא מתמקדת בבניית כלים לפרויקטים קטנים-יותר-מפייסבוק
+* יש הרבה שיווק גרוע במסווה של מדריכי ריאקט
+
+לאורך מסמך זה, אניח שבנית דף ווב עם HTML, CSS & JavaScript.
+
+## למה שתקשיבי לי?
+
+יש המון עצות סותרות על ריאקט ברחבי העולם; למה להקשיב לי?
+
+הייתי אחד מחברי הצוות המקוריים מפייסבוק שבנה ופתח את הקוד של ריאקט. אני כבר לא בפייסבוק ועכשיו אני בסטארט־אפ קטן, אז יש לי גם נקודת מבט לא-פייסבוקית. 
+
+## איך לתקוף את עולמות ריאקט
+
+כל תוכנה בנויה על שכבות של טכנולוגיות, ואת צריכה להיות בקיאה במספיק מהשכבות ההן כדי לבנות את הפתרון שלך. הסיבה שעולם הכלים של ריאקט נדמה מאיים היא כי הוא תמיד מוסבר בסדר השגוי.
+
+כדאי שתלמדי, בסדר הזה, **בלי לקפוץ קדימה או ללמוד במקביל**:
+
+* [ריאקט עצמה](#learning-react-itself)
+* [`npm`](#learning-npm)
+* [JavaScript “bundlers”](#learning-javascript-bundlers)
+* [ES6](#learning-es6)
+* [Routing](#learning-routing)
+* [Flux](#learning-flux)
+
+**את לא צריכה ללמוד את כל אלו כדי להיות שימושית בריאקט.** תעברי לשלב הבא רק בהינתן בעיה שצריכה להפתר.
+
+בנוסף לכל אלו, ישנם כמה נושאים המוזכרים לרוב על ידי קהילת ריאקט שהם "על הקצה". הנושאים הבאים מעניינים, אבל קשה להבין אותם, הם הרבה פחות מוכרים מהשכבות שמעל ו**אינם דרושים לרוב הפתרונות**.
+
+* [Inline styles](#learning-inline-styles)
+* [Server rendering](#learning-server-rendering)
+* [Immutable.js](#learning-immutablejs)
+* [Relay, Falcor, etc](#learning-relay-falcor-etc)
+
+<div align="right">
+
+## ללמוד את ריאקט עצמה
+
+זוהי טעות רווחת שצריך לקחת הרבה זמן להקים כלים כדי להתחיל ללמוד ריאקט. במדריך הרשמי נמצא [תבנית HTML להעתיק-ולהדביק](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm) שאפשר לשמור בקובץ `.html` ולהתחיל מיד. **כלים לא נדרשים לשלב הזה, ואין להתחיל ללמוד כלים נוספים עד שמרגישים בנוח עם היסודות של ריאקט.**
+
+אני עדיין חושב שהדרך הכי קלה ללמוד ריאקט היא [הtutorial במדריך הרשמי](https://facebook.github.io/react/docs/tutorial.html).
+
+## ללמוד `npm`
+&#x202b;`npm` הוא מנהל הפקג׳ים של Node.js והוא האמצעי הכי מוכר לשיתוף קוד JavaScript בין מהנדסי פרונט-אנד ומעצבים. הוא כולל מערכת מודולים הנקראת `CommonJS` ונותנת לך להתקין כלים למפתחים הכתובים בJavaScript. תקראי את [המאמר הזה](http://0fps.net/2013/01/22/commonjs-why-and-how/) לקבלת רקע על למה `CommonJS` הכרחית לדפדפנים, או את ה[CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction) למידע נוסף על ה`CommonJS` API.
+
+רוב הקומפוננטות הרב־שימושיות, הספריות והכלים בעולמות ריאקט זמינות כמודולי `CommonJS` וניתנות להתקנה דרך `npm`.
+
+## ללמוד JavaScript bundlers
+
+ישנן כמה סיבות טכניות טובות שמודולי `CommonJS` (או, כל מה שב`npm`) לא יוכלו לרוץ ישירות בתוך הדפדפן. צריך "מבנדל" JavaScript כדי "לבנדל" את המודולים האלו לקבצי `.js` שאפשר לכלול בדף הווב שלך עם תג `<script>`.
+
+דוגמאות למבנדלי JavaScript כוללות למשל `webpack` ו`browserify`. שניהם בחירות טובות, אבל אני מעדיף `webpack` כי יש לו הרבה יכולות שמקלות על הפיתוח של פתרונות גדולים. מכיוון שהמדריך שלו יכול לבלבל, יש לי [תבנית שגר-ושכח למתחילים](https://github.com/petehunt/react-webpack-template) וכתבתי [מדריך  how-to לwebpack](https://github.com/petehunt/webpack-howt) עבור תרחישים מורכבים יותר.
+
+ריאקט גם כן מציעה [כלי CLI רשמי הנקרא Create React App](https://github.com/facebookincubator/create-react-app). הוא נותן לך ליצור פרויקטי ריאקט הנהנים מ`webpack` ללא שום הקמה. יש לו את המגבלות שלו, אבל הוא יכול לשמש כנקודת פתיחה מעולה והעדכונים שלו יוסיפו לו עוד יכולות לאורך הזמן. הוא כולל גם "דלת אחורית" שמייצאת את כל הקונפיגים והתלויות לתוך הפרויקט שלך ככה שיש לך עליהם שליטה מלאה.
+
+דבר אחד לזכור: `CommonJS` נעזרת בפונקציה `require()` כדי לייבא מודולים, אז הרבה אנשים מתבלבלים וחושבים שזה קשור לפרויקט בשם `require.js`. ממספר סיבות טכניות, הייתי ממליץ לך להמנע מ`require.js`. הוא גם לא מאוד מוכר בעולמות ריאקט.
+
+## ללמוד ES6
+
+חוץ מJSX (שלמדת בReact tutorial), אולי ראית איזה סינטקס מוזר בדוגמאות של ריאקט. זה נקרא ES6, והוא הגרסא העדכנית ביותר של JavaScript כך שאולי לא למדת אותו עדיין. הוא כל כך חדש, שהוא לא נתמך בדפדפנים עדיין, אבל המבנדל שלך יכול לתרגם אותו בהינתן הקונפיגורציה המתאימה.
+
+אם רק רצית לעשות דברים עם ריאקט, **תוכלי לדלג על ללמוד את ES6**, או לנסות לתפוש את זה על הדרך.
+
+אולי ראית שמדברים על ES6 classes בתור הדרך המועדפת ליצירת קומפוננטות ריאקט. זה לא נכון. רוב האנשים (כולל פייסבוק) משתמשים ב׳React.createClass()׳.
+
+## ללמוד routing
+
+&#x202b;“Single-page applications” כיום הם שיא האופנה. אלו דפי ווב שנטענים פעם אחת, וכשהמשתמש לוחץ על קישור או על כפתור, JavaScript שרץ על הדף מעדכן את שורת הכתובת, אבל הדפדפן לא מתרענן. ניהול שורת הכתובת נעשה על ידי דבר בשם **ראוטר**.
+
+הראוטר המוכר ביותר בעולמות ריאקט הוא [react-router](https://github.com/rackt/react-router). אם את בונה single-page application, תשתמשי בו אלא אם יש לך סיבה טובה לא.
+
+**אל תשתמשי בראוטר אם את לא בונה single-page application**. גם ככה רוב הפרויקטים מתחילים כקומפוננטות קטנות יחסית בתוך אפליקציה גדולה יחסית.
+
+## ללמוד Flux
+
+בטח שמעת על פלקס. יש *המון* מידע שגוי על פלקס ברחבי העולם.
+
+הרבה אנשים מתיישבים לבנות פתרון ורוצים להגדיר את המודל דאטה שלהם, וחושבים שהם צריכים להשתמש בפלקס בשביל זה. **זאת הדרך הלא נכונה להכניס פלקס. פלקס צריך להתווסף רק אחרי שכל מיני קומפוננטות כבר נבנו.**
+
+קומפוננטות ריאקט מאורגנות בהיררכיה. רוב הזמן, גם מודל הדאטה שלך הוא לפי היררכיה. במקרים האלו פלקס לא כל כך מועיל לך. לפעמים, לעומת זאת, מודל הדאטה שלך לא היררכי. כשקומפוננטות הריאקט שלך מתחילות לקבל `props` שמרגישים מיותרים, או כשיש לך מספר קטן של קומפוננטות המתחילות להיות מורכבות מאוד, אז אולי כדאי שתכנסי לפלקס. 
+
+**את תדעי מתי שתצטרכי פלקס. אם את לא בטוחה שאת צריכה אותו, את לא צריכה אותו.** 
+
+אם ניסית להשתמש בפלקס, ספריית הפלקס המוכרת והמתועדת ביותר היא [Redux](http://redux.js.org/). יש *הרבה* חלופות ברחבי העולם, ואת תתפתי לבחון רבות מהן, אבל עצתי היא פשוט לדבוק באחת המוכרת ביותר. 
+
+## ללמוד inline styles
+
+לפני ימי ריאקט, הרבה אנשים מחזרו סגנונות CSS בעזרת גליונות סגנון מסובכים שנבנו על ידי preprocessors כמו SASS. מכיוון שריאקט נותנת לכתוב קומפוננטות שמתמחזרות בקלות, גליונות הסגנון שלך יכולים להיות פחות מסובכים. רבים בקהילה (כולל אני) בוחנים כיצד להפטר מגליונות סגנון לחלוטין.
+
+הרעיון הזה די הזוי מכמה סיבות. הוא הופך את media queries לעניין קשה יותר, וזה אפשרי ששימוש בטכניקה הזאת מביא מגבלות ביצועים. **כשרק מתחילים עם ריאקט, פשוט לסגנן דברים כמו שאת רגילה.** 
+
+אחרי שהתנסת בלהרגיש איך ריאקט עובד, תוכלי לבדוק טכניקות חלופיות. אחת מוכרת היא [BEM](https://en.bem.info/). אני ממליץ להחליף בהדרגה את הCSS preprocessor שלך, כי ריאקט נותן לך דרך עצמתית יותר למחזר סגנונות (ע"י מחזור קומפוננטות) והמבנדל JavaScript שלך יכול לייצר גליונות סגנון יותר יעילים בשבילך (עשיתי [הרצאה על זה בOSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). עם זאת, ריאקט, כמו כל ספריית JavaScript אחרת, תסתדר בלעבוד גם יחד עם CSS preprocessor.
+
+לחילופין, תוכלי גם להשתמש ב[CSS Modules](http://glenmaddern.com/articles/css-modules), ויותר ספציפית ב[react-css-modules](https://github.com/gajus/react-css-modules). עם CSS Modules עדיין תכתבי CSS (או SASS/LESS/Stylus), אבל תוכלי לנהל ולהרכיב את קבצי הCSS שלך כמו שהיית עושה עם inline styles בריאקט. ולא תצטרכי לדאוג לנהל את הclass names שלך בעזרת שיטות כמו BEM, כי כל זה יתבצע עבורך מאחורי הקלעים על ידי מערכת המודולים.
+
+## ללמוד server rendering
+
+רינדור בשרת לרוב נקרא "JS אוניברסלי" או "JS איזומורפי". מה שאומר שאת יכולה לקחת את קומפוננטות הריאקט שלך ולרנדר אותן על שרת לכדי HTML סטטי. זה משפר את ביצועי הטעינה הראשונית כי המשתמש לא צריך לחכות שJS יירד רק בשביל לראות את הUI הראשוני, וריאקט יכולה להשמיש HTML מרונדר-שרת כך שהיא לא צריכה לייצר אותו בצד-הלקוח. 
+
+את צריכה לרנדר בשרת אם את מבחינה שהרינדור הראשוני איטי מדי או אם את רוצה לשפר את הדירוג שלך במנועי חיפוש. אפילו שזה נכון שגוגל עכשיו מאנדקסים תוכן מרונדר-לקוח, מאז ינואר 2016 כל פעם שזה נמדד נראה שהיתה לזה השפעה שלילית על דירוגים, כנראה בגלל עלויות הביצוע של רינדור צד-לקוח.
+
+רינדור בשרת עדיין מצריך הרבה כלים כדי להצליח נכון. אבל בגלל שהוא תומך מראש גם בקומפוננטות ריאקט שנכתבו בלי לחשוב במיוחד על רינדור בשרת, כדאי שתבני את הפתרון שלך קודם ותדאגי לגבי רינדור בשרת אחר כך. לא יהיה צורך שתשכתבי את כל הקומפוננטות שלך כדי לתמוך בו.
+
+## ללמוד Immutable.js
+
+&#x202b;[Immutable.js](https://facebook.github.io/immutable-js/) מספק אוסף של מבני דאטה שיכולים לעזור לפתור בעיות ביצועים מסוימות במהלך בניית פתרונות ריאקט. זאת ספריה מצוינת, ובטח תשתמשי בה הרבה בפתרונות שלך בהמשך הדרך, אבל היא מיותרת לגמרי עד שתדעי להעריך את ההשלכות הביצועיות.
+
+## ללמוד Relay, Falcor וכו׳
+
+אלו טכנולוגיות שעוזרות לך להפחית את כמות בקשות הAJAX. הן עדיין מאוד נסיוניות, אז אם אין לך בעיה עם יותר מדי בקשות AJAX, אין לך צורך בRelay או Falcor.
+</div>