Декларативен
React прави лесно създаването на интерактивни потребителски интерфейси. Създавайте прости страници за всяка състояние във вашето приложение. React ефективно ще актуализира и ще визуализира правилните компоненти, когато данните ви се променят.
Декларативните интерфейси правят кода по-предвидим и по-лесен за поддръжка.
Компонентно ориентиран
Изгражда добре капсулирани компоненти, които управляват собствено вътрешно състояние. Дава възможност за комбиниране на тези компоненти и създаването на сложни потребителски интерфейси.
Тъй като логиката на компонента е написана в JavaScript вместо в шаблони, лесно можем да предавате данни през приложението си и да се дистанцираме от DOM манипулации.
Научете веднъж, използвайте навсякъде
Ние не правим предположения за останалата част от вашето приложение, така че можете да продължите да разработвате, без да пренаписвате вече съществуващ код.
React работи добре и като сървърна технология. Задвижва и мобилни приложения с помощта на React Native.
Прост компонент
Kомпонентитe в React съдържат метод render(), който получава входни данни и връща това, което трябва да покажем на потребителя. Този пример използва XML-подобен синтаксис, наречен JSX. Входните данни, които се предават в компонента, могат да бъдат достъпни в render() чрез this.props.
JSX не е задължителен и не се изисква за да се използва React. Опитайте Babel REPL, за да видите суровия JavaScript код, създаден от компилирания JSX.
Loading code example...
Компонент с вътрешно състояние
In addition to taking input data (accessed via this.props), a component can maintain internal state data (accessed via this.state). When a component’s state data changes, the rendered markup will be updated by re-invoking render().
В допълнение към приемането на входни данни (достъпни чрез this.props), един компонент може да поддържа вътрешно състоянието (достъпно чрез this.state). Когато вътрешното състоянието на даден компонент се променят, генерирания markup ще се актуализира чрез повторно извикване на render ().
Loading code example...
Приложение
С помощта на props и state можем да направим едно малко приложение за задачи. Този пример използва state за проследяване на текущия списък от задачи, както и за текста, който потребителят е въвел. Въпреки че слушането на събития изглежда че се случва на място, всъщност е реализирано чрез делегиране.
Loading code example...
Компонент, който използва външен plugin
React allows you to interface with other libraries and frameworks. This example uses remarkable, an external Markdown library, to convert the <textarea>’s value in real time.
React ви позволява да взаимодействате и с други библиотеки. Този пример използва забележителната, външна библиотека Markdown, за да преобразува текста въведен в <textarea> в реално време.