We want to hear from you!Take our 2021 Community Survey!
אתר זה אינו מעודכן יותר.עבור אל react.dev

React

ספריית JavaScript לבניית ממשקי משתמש

הצהרתי

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

תצוגה הצהרתית הופכת את הקוד שלך ליותר צפוי וקל לדיבוג

מבוסס קומפוננטות

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

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

למד פעם אחת, כתוב בכל מקום

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

React יכולה גם להתרנדר בצד-שרת באמצעות Node ולתפעל אפליקציות מובייל באמצעות React Native.


קומפוננטה פשוטה

קומפוננטות ריאקטיות מממשות מתודת render() הלוקחת קלט מידע ומחזירה מה להציג. הדוגמא הזאת משתמשת בתחביר הדומה לXML ונקרא JSX. קלט מידע המועבר לקומפוננטה יהיה נגיש לrender() באמצעות this.props.

JSX הוא אופציונלי ולא חובה כדי להשתמש ב React. נסה את Babel REPL כדי לראות את הקוד JavaScript הגולמי שמיוצר על ידי שלב הקומפילציה של JSX.

עורך JSX
class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        שלום {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="יהונתן" />,
  document.getElementById('hello-example')
);
תוצאה
שלום יהונתן

קומפוננטה עם state

בנוסף ללקיחת מידע קלט (הנגיש באמצעות this.props), קומפוננטה יכולה לשמור מידע על state פנימי (הנגיש באמצעות this.state). כאשר הstate של הקומפוננטה משתנה, הmarkup המעובד יעודכן על ידי קריאה מחדש ל render().

עורך JSX
class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div dir='rtl'>
        שניות: {this.state.seconds}
      </div>
    );
  }
}

root.render(<Timer />);
תוצאה
שניות: 0

אפליקציה

עם שימוש בpropsו-state, אנחנו יכולים ליצור אפליקצית צ’קליסט קטנה. הדוגמא הזאת משתמשת בstate כדי לעקוב אחרי רשימה של פריטים והטקסט שהמשתמש הכניס. למרות שהטיפול באירועים נראה מעובד באותה שורה. הם יאספו וימומשו באמצעות event delegation.

עורך JSX
class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div dir='rtl'>
        <h3>משימות</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="new-todo">
            רשימת המשימות
          </label>
          <input
            id="new-todo"
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>
            הוסף #{this.state.items.length + 1}
          </button>
        </form>
      </div>
    );
  }

  handleChange(e) {
    this.setState({ text: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    if (this.state.text.length === 0) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(state => ({
      items: state.items.concat(newItem),
      text: ''
    }));
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

root.render(<TodoApp />);
תוצאה

משימות

    קומפוננטה המשתמשת בתוספים חיצוניים

    React מאפשרת לך להתממשק עם ספריות ופריימוורקים אחרים. הדוגמא הזאת משתמשת בremarkable, ספריה חיצונית של Markdown, הממירה את הערך של הtextarea בזמן אמת.

    עורך JSX
    class MarkdownEditor extends React.Component {
      constructor(props) {
        super(props);
        this.md = new Remarkable();
        this.handleChange = this.handleChange.bind(this);
        this.state = { value: 'שלום, **עולם**!' };
      }
    
      handleChange(e) {
        this.setState({ value: e.target.value });
      }
    
      getRawMarkup() {
        return { __html: this.md.render(this.state.value) };
      }
    
      render() {
        return (
          <div className="MarkdownEditor" dir='rtl'>
            <h3>קלט</h3>
            <label htmlFor="markdown-content">
              הקלד איזשהו markdown
            </label>
            <textarea
              id="markdown-content"
              onChange={this.handleChange}
              defaultValue={this.state.value}
            />
            <h3>פלט</h3>
            <div
              className="content"
              dangerouslySetInnerHTML={this.getRawMarkup()}
            />
          </div>
        );
      }
    }
    
    root.render(<MarkdownEditor />);
    
    תוצאה

    קלט

    פלט

    שלום, עולם!