React introduction

React ‫ל‬ ‫הקדמה‬
natankrasney@gmail.com
1

React ‫זה‬ ‫מה‬
●‫משתמש‬ ‫ממשק‬ ‫לבניית‬ JavaScript ‫ספרית‬ ‫היא‬ React
●HTML ‫דף‬ - ‫המשתמש‬ ‫ממשק‬ ‫לבנות‬ ‫אפשר‬ ‫ולכן‬ ‫בדפדפן‬ ‫רצות‬ React ‫אפליקציות‬
‫מידית‬ ‫שמגיב‬
●(‫בהמשך‬ ‫)נרחיב‬ JSX ‫ב‬ ‫כאן‬ ‫להשתמש‬ ‫מקובל‬
●MPA ‫ב‬ ‫גם‬ ‫אלא‬ SPA ‫ב‬ ‫רק‬ ‫לא‬ ‫להשתמש‬ ‫ניתן‬
2

‫בהתקנה‬ ‫צורך‬ ‫ללא‬ React ‫של‬ ‫פשוטה‬ ‫קוד‬ ‫דוגמת‬
<head><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script></head>
<body><div id="root"></div>
<script type="text/babel">
ReactDOM.render(<h1>hello world</h1>,document.getElementById('root'));
</script>
</body>
3
ES6 ‫ו‬ JSX ‫ב‬ ‫שימוש‬ ‫מאפשר‬
Components ‫וכתיבת‬ React ‫באלמנטי‬ ‫שימוש‬ ‫מאפשר‬
HTML document ‫ב‬ React ‫אלמנטי‬ ‫הצגת‬ ‫מאפשר‬
ES5 - ‫הדפדפנים‬ ‫ידי‬ ‫על‬ ‫שנתמכת‬ JS ‫לגירסת‬ ES6 - ‫מתקדמת‬ JS ‫מגרסת‬ ‫המרה‬
HTML ‫אלמנט‬ ‫בתוך‬ React ‫אלמנט‬ ‫מציג‬

Components
‫על‬ ‫מקל‬ ‫זה‬ , React ‫של‬ ‫הלב‬ ‫זה‬ Components ‫ל‬ React ‫ב‬ ‫לחלק‬ ‫נוח‬ ‫המשתמש‬ ‫ממשק‬ ‫את‬
code reuse ‫ומאפשר‬ ‫והתחזוקה‬ ‫הפיתוח‬
custom html element ‫על‬ ‫כמו‬ component ‫על‬ ‫לחשוב‬ ‫אפשר‬
4
‫ראשי‬ ‫תפריט‬
‫משני‬ ‫תפריט‬‫הדף‬ ‫תוכן‬

‫כפונקציה‬ Component ‫בשימוש‬ React ‫של‬ ‫קוד‬ ‫דוגמת‬
<body>
<div id="root"></div>
function Greeting () {
return (<p>Hello world</p>)}
ReactDOM.render(<Greeting />,document.getElementById('root'));
</script>
</body>
5
‫פונקציה‬ ‫באמצעות‬ Greeting ‫בשם‬ component ‫מימוש‬
React.Component ‫את‬ ‫היורשת‬ ‫שהמחלקה‬ ‫פונקציה‬ ‫היא‬ render
.‫שלה‬ component‫ה‬ ‫של‬ view ‫ה‬ ‫את‬ ‫מחזירה‬ render .‫לממש‬ ‫חייבת‬
HTML ‫ה‬ ‫את‬ ‫מגדירים‬ ‫בעזרתו‬ JSX ‫באמצעות‬ ‫מיוצג‬ view‫ה‬
‫ב‬ state ‫אין‬ ‫כאשר‬ ‫המומלצת‬ ‫הצורה‬ ‫היא‬ function
component

‫כמחלקה‬ Component ‫בשימוש‬ React ‫של‬ ‫קוד‬ ‫דוגמת‬
<body>
class Greeting extends React.Component {
render() { return (<p>Hello world</p>);}}
ReactDOM.render(<Greeting />,document.getElementById('root'));
</script>
</body>
6
- ‫מחלקה‬ ‫באמצעות‬ Greeting ‫בשם‬ component ‫מימוש‬
‫וירושה‬ class
React.Component ‫את‬ ‫היורשת‬ ‫שהמחלקה‬ ‫פונקציה‬ ‫היא‬ render
component‫ה‬ ‫של‬ view ‫ה‬ ‫את‬ ‫מחזירה‬ render .‫לממש‬ ‫חייבת‬
‫את‬ ‫מגדירים‬ ‫בעזרתו‬ JSX ‫באמצעות‬ ‫מיוצג‬ view‫ה‬ .‫שלה‬
HTML‫ה‬
‫ב‬ state ‫יש‬ ‫כאשר‬ ‫המומלצת‬ ‫הצורה‬ ‫היא‬ class
component

‫פרמטרים‬ ‫העברת‬ ‫עם‬ React ‫של‬ ‫פשוטה‬ ‫קוד‬ ‫דוגמת‬
<body>
function Greeting(props) {
return (<p>{props.pText}</p>);}
ReactDOM.render(<Greeting pText="Hello world !!!" />,document.getElementById('root'));
</script>
</body>
7
.view ‫ל‬ JS‫מ‬ ‫פרמטרים‬ ‫העברת‬ ‫לצורך‬ props ‫ב‬ ‫שימוש‬
‫ידי‬ ‫על‬ ‫שמוגדר‬ key‫ל‬ ‫דוגמה‬ ‫הוא‬ pText ‫זה‬ ‫במקרה‬
‫אבא‬ component ‫וב‬ ‫בו‬ ‫בשימוש‬ ‫ונמצא‬ component‫ה‬

‫פרמטרים‬ ‫העברת‬ ‫עם‬ React ‫של‬ ‫פשוטה‬ ‫קוד‬ ‫דוגמת‬
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
</head>
<body>
function Greeting(props) {return (<p>{props.children}</p>);}
ReactDOM.render(<Greeting>Hello world with children !!!</Greeting>,document.getElementById('root'));
</script></body>
8
.view ‫ל‬ JS‫מ‬ ‫פרמטרים‬ ‫העברת‬ ‫לצורך‬ props ‫ב‬ ‫שימוש‬
‫להעביר‬ ‫שמאפשרת‬ ‫שמורה‬ ‫מילה‬ ‫היא‬ children ‫זה‬ ‫במקרה‬
‫אלמנט‬ ‫של‬ content ‫ה‬ ‫דרך‬ ‫תוכן‬

JSX
●JavaScript XML ‫של‬ ‫תיבות‬ ‫ראשי‬
●‫בזה‬ ‫להשתמש‬ ‫חייבים‬ ‫לא‬ ‫אבל‬ React ‫לשימוש‬ ‫מומלץ‬
●{} ‫בעזרת‬ JS ‫של‬ ‫חלקית‬ ‫פונקציונאליות‬ JSX ‫בתוך‬ ‫לרשום‬ ‫ניתן‬
●HTML ‫דמויי‬ ‫אלמנטים‬ XML ‫בעזרת‬ ‫להגדיר‬ ‫מאפשר‬
●‫לדוגמא‬ ‫שמאל‬ ‫בצד‬ ‫ולרשום‬ Try It Out ‫ללשונית‬ https://babeljs.io ‫אל‬ ‫להיכנס‬ ‫מומלץ‬
<div>Hello</div>
‫אליו‬ ‫מתרגם‬ ‫שזה‬ JavaScript ‫ה‬ ‫קוד‬ ‫את‬ ‫ימין‬ ‫בצד‬ ‫ולראות‬
"use strict";
React.createElement("div",null,"hello");
9
JSX ‫זה‬
JavaScript ‫זה‬

ES6
●2015 ‫בשנת‬ ‫שוחררה‬ ‫אשר‬ JavaScript ‫של‬ ‫של‬ ‫גרסה‬
●class - ‫במחלקה‬ ‫השימוש‬ ‫הוא‬ ‫שלה‬ features‫מה‬ ‫אחד‬ ‫בין‬
●React ‫ב‬ ‫נרחב‬ ‫בשימוש‬
10

Component ‫ללא‬ ‫דוגמא‬
<head><style>
.person {border: 1px solid black;width: 200px;padding: 20px;
box-shadow: 4px 4px #888888;margin: 10px;display: inline-block;}
</style></head>
<body>
<div class='person'><h1>Nathan</h1><p>Age : 23</p></div>
<div class='person'><h1>John</h1><p>Age : 33</p></div>
</body>
11

head ‫חלק‬ Component ‫עם‬ ‫הקודמת‬ ‫הדוגמה‬
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<style>
.person {
border: 1px solid black;width: 200px;padding: 20px;
box-shadow: 4px 4px #888888;margin: 10px;display: inline-block;}
</style>
</head>
12
‫הבא‬ ‫בעמוד‬ body

body ‫חלק‬ Component ‫עם‬ ‫הקודמת‬ ‫הדוגמה‬
<body>
<div id="app"></div>
function Nathan () {
return (<div className='person'><h1>Nathan</h1><p>Age : 23</p></div>);}
function John () {
return (<div className='person'><h1>John</h1><p>Age : 33</p></div>);}
class App extends React.Component {render() { return( <div><John /><Nathan /></div>);}}
ReactDOM.render(<App />,document.getElementById("app"));</script>
</body>
13
‫ובתוכו‬ App ‫בשם‬ component root‫ב‬ ‫שימוש‬
Nathan , John ‫בשם‬ component ‫שני‬

Person ‫במחלקה‬ ‫שימוש‬ ‫בעזרת‬ ‫הקודמת‬ ‫הדוגמה‬ ‫שיפור‬
<body>
<div id="app"></div>
function Person (props) {
return (<div className='person'><h1>{props.name}</h1><p>Age : {props.age}</p></div>);}
class App extends React.Component {
render() { return( <div><Person name="John" age="33"/><Person name="Nathan" age="23"/></div>);}}
ReactDOM.render(<App />,document.getElementById("app"));
</script>
</body>
14
.component ‫יצרנו‬ Person ‫הפונקציה‬ ‫בעזרת‬
component‫ל‬ ‫העברנו‬ props ‫בעזרת‬
‫ארגומנטים‬

React introduction

More Related Content

More from Nathan Krasney

React introduction