React
JavaScript-бібліотека для створення користувацьких інтерфейсів
Декларативний
React спрощує створення інтерактивних інтерфейсів. Вам потрібно лише описати, як різні частини інтерфейсу виглядають у кожному стані вашого додатку і React ефективно оновить та відрендерить лише потрібні компоненти, коли ваші дані зміняться.
Декларативні інтерфейси роблять ваш код більш передбачуваним і його набагато легше налагоджувати.
Заснований на компонентах
Створюйте інкапсульовані компоненти, які керують власним станом, а з них будуйте складні інтерфейси.
Оскільки логіка компонентів написана на JavaScript, замість шаблонів, ви з легкістю можете передавати складні дані у вашому додатку і зберігати стан окремо від DOM.
Вивчіть лише раз — пишіть будь-де
Ми не робимо припущень щодо стеку технологій які ви використовуєте, тому ви можете розробляти нові функції в React, не переписуючи існуючий код.
React також може рендеритись на сервері, використовуючи Node, і приводити в дію мобільні додатки, які використовують React Native.
Простий компонент
Компоненти реалізують метод render(), який приймає вхідні дані і повертає те, що буде показано користувачу. У цьому прикладі використовується XML-подібний синтаксис під назвою JSX. Доступ до вхідних даних, які передаються в компонент, можна отримати за допомогою render() та this.props.
JSX не є обов’язковим для React. Спробуйте Babel REPL, щоб побачити необроблений код JavaScript, створений на етапі компіляції JSX.
Завантаження прикладу з кодом...
Компонент зі станом
У доповнення до прийняття вхідних даних (доступ до яких здійснюється через this.props), компонент може зберігати дані внутрішнього стану (доступні через this.state). Коли дані стану компонента змінюються, відбувається повторне відрендерення розмітки з використанням функції render().
Завантаження прикладу з кодом...
Застосування
Використовуючи пропси і стан, ми можемо створити невеликий додаток для складання списку справ. Цей приклад використовує стан для відстеження поточного списку елементів, а також тексту, введеного користувачем. Хоча обробники подій здаються вбудованими, вони будуть зібрані та реалізовані за допомогою методу делегування подій.
Завантаження прикладу з кодом...
Компонент, що використовує зовнішні модулі
React дозволяє взаємодіяти з іншими бібліотеками та фреймворками. У цьому прикладі використана дивовижна зовнішня бібліотека — Markdown, для зміни значення <textarea> в реальному часі.