Software

February 26, 2025

ReactJS Essentials Course פנקס כיס

ריאקט - הבסיס

vite

כלי לבניית תכנית ווב בצורה מהירה:

https://vite.dev/

ניתן להשתמש במנגנון ה-template create כדי ליצור פרוייקטי ריאקט בלי מאמץ.
מריץ גם את השרת.

מה זה ריאקט?

זהו פריימווק דקלרטיבי לממשק משתמש.

מה זה קומפוננטה

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

ליצור קומפוננטה

החזרה עם סוגריים מעוגלות שאומר שזה קוד HTML בתוך קוד JS.

function Header() {
  return (
    <header>
      <img src="src/assets/react-core-concepts.png" alt="Stylized atom" />
      <h1>React Essentials</h1>
      <p>
        Fundamental React concepts you will need for almost any app you are
        going to build!
      </p>
    </header>
  );
}

אפשר להשתמש בזה באופן הבא:

function App() {
  return (
    <div>
      {Header()}
      <Header></Header>
      <Header/>
      <main>
        <h2>Time to get started!</h2>
      </main>
    </div>
  );
}

Build in comps

lowercase
html elements
dom nodes

Custom comps:

uppercase
defined by u - wraps built in
react traverse until it recognizes only built in comps

ערכים דינמיים בקומפוננטה

כדי להוסיף ערכים יש להשתמש ב-{}.

return (
<header>
    <img src="src/assets/react-core-concepts.png" alt="Stylized atom" />
    <h1>React Essentials</h1>
    <p>
    {"ABCDEFG"} React concepts you will need for almost any app you are
    going to build!
    </p>
</header>
);

ערכים דינמיים לתכונות HTML

ניתן לעשות import לקבצי css וקבצים אחרים.

1	import reactImg from "./assets/react-core-concepts.png";

העברת מידע בעזרת props

function CoreConcept(props) {
  return (
    <li>
      <img src={props.image} alt={props.title} />
      <h3>{props.title}</h3>
      <p>{props.description}</p>
    </li>
  );
}

או בעזרת desctruction ניתן להשתמש באובייקטים ואז לפצל אותם לתכונות:

function CoreConcept({ image, title, description }) {
  return (
    <li>
      <img src={image} alt={title} />
      <h3>{title}</h3>
      <p>{description}</p>
    </li>
  );
}

{CORE_CONCEPTS.map((core) => {return <CoreConcept {...core} />;})}

פיצול קומפוננטה לקובץ

בקובץ אחר נרצה להוסיף export default במידה וזה הדבר היחידי בקובץ:

export default function CoreConcept({ image, title, description }) {
  return (
    <li>
      <img src={image} alt={title} />
      <h3>{title}</h3>
      <p>{description}</p>
    </li>
  );
}

ולעדכן imports.

import XXX.css

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

props children

ניתן להעביר ערכים גם בעזרת הילדים:

function MyComp(props){
    return (
        <span>{props.children}</span>
    );
}

// ....
<MyComp>Hello World</MyComp>

// ... Rendered as
<span>Hello World</span>

השימוש בילדים זה אופציה מהירה יותר ומאפשר אנקפסולציה לקוד JSX.
כמו כן גם מאפשר כתיבה שדומה יותר לקוד HTML.

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

Component listeners

ניתן להעביר פונקציות על מנת להפעיל התנהגות:

export default function TabButton({ children, onClick }) {
  function click() {
    alert("Hello");
  }
  return (
    <li key={1}>
      <button onClick={onClick ?? click}>{children}</button>
    </li>
  );
}

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

export default function TabButton({ children }) {
  function click(name) {
    alert("Hello " + name);
  }
  return (
    <li key={1}>
      <button onClick={()=>{click("Bob")}}>{children}</button>
    </li>
  );
}

מומלץ להחזיר callable לאירוע.

לעדכן את ריאקט שה-UI שלנו השתנה

אם סתם נזרוק משתנה לתוך הקוד, ריאקט לא יידע שהוא ישתנה:

let myName = "Shrek":

return (
    <div>
        Hello <span>{myName}</span>
    </div>
);

הקומפוננטה תרוץ רק פעם אחת!

כדי לתקן את זה צריך להשתמש במשהו שנקרא React hook.
מה שנשתמש בו הוא useState

1	import { useState } from "react";

חייבים לקרוא לפונקציה ברמה בגבוה

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

function App(){
    if(someCondition){
        const [val,setVal] = useState(0);
    }
}

עדכון של הUI

let myName = "Shrek":
  const [selectedTopic, setSelectedTopic] = useState("Please choose an example");

  function changeContentOnClick(buttonPressed) {
    setSelectedTopic(buttonPressed);
  }

return (
    <div>
        <button onClick={()=>{changeContentOnClick("MyButton")}}>Choose</button>
        Hello <span>{selectedTopic}</span>
    </div>
);

אם לרנדר או לא לרנדר - תנאים

אפשר לקצר עם ?: או עם &&.

דרך ראשונה - ?:

1	{!selectedTopic ? <p>Please select an example.</p> : null}

דרך שנייה - &&

{selectedTopic && (
<div id="tab-content">
    <h3>{EXAMPLES[selectedTopic].title}</h3>
    <p>{EXAMPLES[selectedTopic].description}</p>
    <pre>
    <code>{EXAMPLES[selectedTopic].code}</code>
    </pre>
</div>
)}

דרך שלישית - if else

let tableContent = <p>Please select a topic</p>;

if(selectedTopic){
    tableContent = <div id="tab-content">
    <h3>{EXAMPLES[selectedTopic].title}</h3>
    <p>{EXAMPLES[selectedTopic].description}</p>
    <pre>
    <code>{EXAMPLES[selectedTopic].code}</code>
    </pre>
</div>;
}

Styling using classes

בתוך JSX אנחנו משתמשים ב-className.

1	<button className={isSelected ? 'active' : undefined}>Click me </button>

Listing

בקצרה השתמשו ב-map כדי ליצור ממערך רשימה של קומפוננטות.

1
2
3

{CORE_CONCEPTS.map((core) => (
              <CoreConcept key={core.title} {...core} />
            ))}

השתמשו ב-key כדי לומר ל-react איך ל

React - Deep dive

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

להשתמש בפונקציות createElement

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

React.createElement(
  'div',
  {id:'content'},
  React.createElement(
    'p',
    null,
    'Hello World'
  )
)

1
2
3

<div id="content">
  <p>Hello World!</p>
</div>

בתצורה של הפונקציות לא צריך באמת לבנות קבצי JSX.

על הפוסט

הפוסט נכתב על ידי Ilya, רישיון על ידי CC BY-NC-ND 4.0.

שתפו את הפוסט

קנו לי קפה

#Software #ReactJS #References