React

Бібліятэка JavaScript для пабудовы карыстацкіх інтэрфэйсаў

(пераклад сайта ReactJS.org)

Дэкляратыўны (апісальны)

React робіць бязбольным стварэньне інтэрактыўных карыстальніцкіх інтэрфэйсаў. Распрацоўвайце простыя прадстаўленьні для кожнага стану ў вашым прыкладаньні, і React будзе эфэктыўна абнаўляць і візуалізаваць толькі належныя кампанэнты, калі вашыя даныя зьменьваюцца.

Дэкляратыўныя (апісальныя) прадстаўленьні робяць ваш код больш прадказальным і простым у адладцы.

Заснаваны на кампанэнтах

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

Так як лёгіка элемэнта запісваецца не ў шаблёнах, а ў JavaScript, то вы можаце лёгка перадаваць багатыя даныя праз вашае прыкладаньне і трымаць стан па-за DOMам.

Вывучце аднойчы, запісвайце паўсюль

Мы ня робім здагадак адносна астатняй часткі пакета вашай тэхналёгіі, так што вы можаце распрацаваць новыя функцыі ў React безь перазапісу існуючага коду.

React можа таксама візуалізаваць на сэрвэры, які выкарыстоўвае Node, і жывіць мабільныя прыкладаньні з выкарыстаньнем React Native.


A Simple Component — просты кампанэнт

React-кампанэнты рэалізуюць render()-мэтад, які прымае ўваходныя даныя і вяртае тое, што трэба адлюстраваць. У гэтым прыкладзе выкарыстоўваецца XML-падобны сынтаксіс, які называецца JSX. Уваходныя даныя, якія перадаюцца ў кампанэнт, можна атрымаць пасродкам render() з дапамогай this.props.

JSX не зьяўляецца абавязковым пры выкарыстаньні React. Паспрабуйце Babel REPL каб убачыць неапрацаваны JavaScript-код, які атрымліваецца на стадыі кампіляцыі JSX.

A Stateful Component — кампанэнт са станам

У дадатак да прыняцьця ўваходных даных (даступных праз this.props), кампанэнт можа падтрымліваць унутраныя даныя стану (даступныя праз this.state). Пры зьмене даных стану кампанэнта, разьметка, якая візуалізуецца, будзе абнаўляцца паўторным выклікам render().

An Application — прыкладаньне

Выкарыстоўваючы props ды state, мы можам сабраць невялічкае Todo-прыкладаньне. У гэтым прыкладзе выкарыстоўваецца state каб адсочваць бягучы сьпіс элемэнтаў, а таксама тэкст, які увёў карыстальнік. Хоць апрацоўшчыкі падзей (event handlers) аказваюцца візуалізаванымі ў радку, яны будуць сабраныя і рэалізаваныя з выкарыстаньнем дэлегаваньня (перадачы) падзей (event delegation).

A Component Using External Plugins — кампанэнт, які выкарыстоўвае зьнешнія ўбудовы

React зьяўляецца гнуткім і забясьпечвае гаплікамі (hooks), якія дазваляюць вам узаемадзейнічаць зь іншымі бібліятэкамі і фрэймўоркамі. Гэты прыклад выкарыстоўвае remarkable, зьнешнюю бібліятэку Markdown, каб канвэртаваць (пераўтвараць) значэньне <textarea> у рэжыме рэальнага часу.