We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev

React

JavaScript-бібліотека для створення користувацьких інтерфейсів

Декларативний

React спрощує створення інтерактивних інтерфейсів. Вам потрібно лише описати, як різні частини інтерфейсу виглядають у кожному стані вашого додатку і React ефективно оновить та відрендерить лише потрібні компоненти, коли ваші дані зміняться.

Декларативні інтерфейси роблять ваш код більш передбачуваним і його набагато легше налагоджувати.

Заснований на компонентах

Створюйте інкапсульовані компоненти, які керують власним станом, а з них будуйте складні інтерфейси.

Оскільки логіка компонентів написана на JavaScript, замість шаблонів, ви з легкістю можете передавати складні дані у вашому додатку і зберігати стан окремо від 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>;
  }
}

root.render(<HelloMessage name="Taylor" />);
Результат
Привіт, Taylor

Компонент зі станом

У доповнення до прийняття вхідних даних (доступ до яких здійснюється через this.props), компонент може зберігати дані внутрішнього стану (доступні через this.state). Коли дані стану компонента змінюються, відбувається повторне відрендерення розмітки з використанням функції 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>
        Пройшло секунд: {this.state.seconds}
      </div>
    );
  }
}

root.render(<Timer />);
Результат
Пройшло секунд: 2

Застосування

Використовуючи пропси і стан, ми можемо створити невеликий додаток для складання списку справ. Цей приклад використовує стан для відстеження поточного списку елементів, а також тексту, введеного користувачем. Хоча обробники подій здаються вбудованими, вони будуть зібрані та реалізовані за допомогою методу делегування подій.

Інтерактивний 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>
        <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 дозволяє взаємодіяти з іншими бібліотеками та фреймворками. У цьому прикладі використана дивовижна зовнішня бібліотека — 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">
            <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 />);
    
    Результат

    Редактор

    Вивід

    Привіт, світе!