Π—Π°Ρ‡Π΅ΠΌ Π½ΡƒΠΆΠ΅Π½ react js: Всё, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΎΠΉΡ‚ΠΈ Π² React Π² 2018 Π³ΠΎΠ΄Ρƒ | by Stas Bagretsov

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

ΠžΠ±ΡŠΡΡΠ½ΠΈΡ‚Π΅, ΠΏΠ»ΠΈΠ· Π·Π°Ρ‡Π΅ΠΌ Π½ΡƒΠΆΠ΅Π½ react ΠΈ vue? β€” Π₯Π°Π±Ρ€ Q&A

Когда-Ρ‚ΠΎ я писал Π½Π° PHP. Писал ΠΌΠ½ΠΎΠ³ΠΎ. Π‘Π½Π°Ρ‡Π°Π»Π° это Π±Ρ‹Π»ΠΎ мСсиво ΠΈΠ· ΠΊΠΎΠ΄Π° Π½Π° PHP ΠΈ HTML, ΠΏΠΎΡ‚ΠΎΠΌ появились всякиС ΡˆΠ°Π±Π»ΠΎΠ½ΠΈΠ·Π°Ρ‚ΠΎΡ€Ρ‹, стало Ρ‡ΡƒΡ‚ΡŒ Ρ‡ΠΈΡ‰Π΅.
ΠŸΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ росли, ΠΊΠΎΠ΄Π° ΡΡ‚Π°Π½ΠΎΠ²ΠΈΠ»ΠΎΡΡŒ всС большС ΠΈ Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ кусочки ΠΏΠ΅Ρ€Π΅ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. Π’Π°ΠΊ я ΠΏΡ€ΠΈΡˆΠ΅Π» ΠΊ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΡŽ ΠΊΠΎΠ΄ΠΎΠΌ Ρ‡Π΅Ρ€Π΅Π· Composer.
На ΠΊΠ°ΠΊΠΎΠΌ-Ρ‚ΠΎ этапС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ я столкнулся с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Ρƒ мСня Π±Ρ‹Π»ΠΎ 2 Ρ€Π°Π·Π½Ρ‹Ρ… Π²Π΅Π±-интСрфСйса Π΄Π΅Π»Π°ΡŽΡ‰ΠΈΡ… ΠΎΠ΄Π½ΠΎ ΠΈ Ρ‚ΠΎ ΠΆΠ΅. Π’Π΄ΠΎΠ±Π°Π²ΠΎΠΊ Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Ρ‡Π°ΡΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹Ρ… ΠΎΡ‚Π΄Π°Π²Π°Ρ‚ΡŒ Π² систСму логистики. ΠŸΡ€ΠΈΡ‡Π΅ΠΌ это Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹Ρ‚ΡŒ Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ. Π’ΠΎΠ³Π΄Π° я ΡƒΠΆΠ΅ Π·Π½Π°Π», Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ такая ΡˆΡ‚ΡƒΠΊΠ° — Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹Π΅ интСрфСйсы (API).
Наскоро Π±Ρ‹Π»ΠΎ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ написано ΠΈ ΠΎΠ½ΠΎ Π·Π°Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΎ. По ΠΈΡ‚ΠΎΠ³Ρƒ, ΠΎΠ±Π° Π²Π΅Π±-интСрфСйса ΠΈ систСма логистики использовали ΠΎΠ΄Π½ΠΈ ΠΈ Ρ‚Π΅ΠΆΠ΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ. Но ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ 2 Ρ€Π°Π·Π½Ρ‹Ρ… интСрфСйса Π±Ρ‹Π»ΠΎ ΠΎΡ‡Π΅Π½ΡŒ Π³Π΅ΠΌΠΎΡ€Π½ΠΎ. Π’ Ρ‚Π΅ Π²Ρ€Π΅ΠΌΠ΅Π½Ρ‹ Π±Ρ‹Π» jQuery самым Π³Π»Π°Π²Π½Ρ‹ΠΌ. ΠžΡ‡Π΅Π½ΡŒ слоТно Π±Ρ‹Π»ΠΎ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ отобраТСния, посколько Javascript ΠΊΠΎΠ΄ Π±Ρ‹Π» Π² ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡˆΠΊΡƒ с HTML, Ρ‡Π°ΡΡ‚ΡŒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π»Π°ΡΡŒ ΠΈΠ· PHP. Π’ΠΎΠ·Π½ΠΈΠΊΠ°Π»ΠΈ ошибки. Π”Π°Π½Π½Ρ‹Ρ… Π±Ρ‹Π»ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ, Ρ€Π°Π·Π½Ρ‹Ρ… скриптов Π±Ρ‹Π»ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ (сотни), части скриптов Π±Ρ‹Π»ΠΈ копиями Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π° с нСбольшими отклонСниями. По ΠΈΡ‚ΠΎΠ³Ρƒ, Π½Π° Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ простых Π·Π°Π΄Π°Ρ‡ Π²Ρ€ΠΎΠ΄Π΅ рСдактирования строчки Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ с ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ Π½Π° сСрвСрС ΡƒΡ…ΠΎΠ΄ΠΈΠ»ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Π΄Π½ΠΈ, ΠΈΠ½ΠΎΠ³Π΄Π° Π΄Π°ΠΆΠ΅ Π½Π΅Π΄Π΅Π»ΠΈ.
ΠŸΠΎΡ‚ΠΎΠΌ я ΡƒΠ²ΠΈΠ΄Π΅Π» Mustache.js, это Π±Ρ‹Π» ΠΏΡ€Π΅Π΄ΠΎΠΊ Ангуляра ΠΈ Π Π΅Π°ΠΊΡ‚Π°. Π§Ρ‚ΠΎ-Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ ΡˆΠ°Π±Π»ΠΎΠ½ΠΈΠ·Π°Ρ‚ΠΎΡ€Π°, Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° сторонС ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°. Π Π°Π±ΠΎΡ‚Π°Π»ΠΎ ΠΎΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² ΠΎΠ΄Π½Ρƒ сторону, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΎ Π΄Π°Π½Π½Ρ‹Π΅ Π² HTML, Π½ΠΎ ΠΏΠΎΡ‚ΠΎΠΌ Π±Ρ‹Π»Π° Ρ‚Π° ΠΆΠ΅ ΠΆΠ΅ΡΡ‚ΡŒ ΠΈΠ· jQuery.
Π—Π°Ρ‚Π΅ΠΌ я познакомился с Angular1. ИдСя Π±Ρ‹Π»Π° простая — пишСшь шаблон, ΠΏΠΎΠ΄ΡΡ‚Π°Π²Π»ΡΠ΅ΡˆΡŒ Π² Π½Π΅Π³ΠΎ Π΄Π°Π½Π½Ρ‹Ρ…. Оно отобраТаСтся, само! Никаких Ρ‚Π΅Π±Π΅ ΠΈΠ·Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠΉ, Π½Π°ΠΉΠ΄ΠΈ класс ΠΈΠ»ΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€, ΠΈΠ»ΠΈ Π΅Ρ‰Π΅ какая-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Π΅Ρ€ΡƒΠ½Π΄Π°.
ΠšΠΎΠ΄ΠΈΡ‚ΡŒ стало ΠΏΡ€ΠΎΡ‰Π΅. Π‘Ρ‚Π°Π»ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈ просто Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ стили. МоТно Π±Ρ‹Π»ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ для Π²Π²ΠΎΠ΄Π° ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ ΠΏΠΎΡ‡Ρ‚Ρ‹, ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ сразу Π²ΠΎ всСх ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ… ΠΈ ΠΈΡΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ошибки Π² ΠΎΠ΄Π½ΠΎΠΌ мСстС, Π° Π½Π΅ Π±Π΅Π³Π°Ρ‚ΡŒ ΠΏΠΎ сотням скриптов ΠΈ ΠΈΡΠΊΠ°Ρ‚ΡŒ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ этот ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠΉΡΡ косяк.
ΠŸΠΎΠ½Π°Ρ‡Π°Π»Ρƒ я Ρ‚ΠΎΠΆΠ΅ относился ΠΊ Ангуляру с ΠΏΡ€Π΅Π΄ΡƒΠ±Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ΠΌ, ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Ρ€Π°Π±Π»ΠΎΠ², стоят Π»ΠΈ ΠΎΠ½ΠΈ Ρ‚ΠΎΠ³ΠΎ. Но ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ я стал Ρ‡Π°Ρ‰Π΅ ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°Ρ‚ΡŒΡΡ с Π·Π°Π΄Π°Ρ‡Π°ΠΌΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΌΠ½Π΅ понадобились Ρ€Π°Π·Π½Ρ‹Π΅ интСрфСйсы для отобраТСния ΠΎΠ΄Π½ΠΈΡ… ΠΈ Ρ‚Π΅Ρ… ΠΆΠ΅ Π΄Π°Π½Π½Ρ‹Ρ…, это стало ΡΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π½Π° Π½Π΅Ρ‚.
Пока Π²Ρ‹ ΠΏΠΈΠ»ΠΈΡ‚Π΅ простыС ΡˆΡ‚ΡƒΠΊΠΈ, всякиС Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ Π²Π°ΠΌ Π½Π΅ Π²Ρ‚Π°Ρ€Π°Ρ…Ρ‚Π΅Π»ΠΈ. Π”Π°ΠΆΠ΅ jQuery Π½Π΅ Π½ΡƒΠΆΠ΅Π½. Но ΠΈΠ½ΠΎΠ³Π΄Π° начинаСтся ΠΆΠΎΠΏΠ°, ΠΊΠΎΠ³Π΄Π° ΠΎΠ΄Π½ΠΎΠΌΡƒ ΡƒΠΆΠ΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π½Π΅ Π²Ρ‹Ρ‚Π°Ρ‰ΠΈΡ‚ΡŒ, ΠΈΠ±ΠΎ ΠΎΡ…Π΅Ρ€Π΅Π½Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ слоТно, Π° Π΅Ρ‰Π΅ ΠΈ Π΄Π΅Π»Π°Ρ‚ΡŒ Π½Π°Π΄ΠΎ быстро. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π»ΡƒΡ‡ΡˆΠ΅ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ, ΠΊΡ‚ΠΎ-Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ бэкСнд, ΠΊΡ‚ΠΎ-Ρ‚ΠΎ Ρ„Ρ€ΠΎΠ½Ρ‚. Π’Π°ΠΊ просто ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅, Π° ΠΎΠ±Ρ‰Π°Ρ‚ΡŒΡΡ Ρ‡Π΅Ρ€Π΅Π· API. Π’Π½Π°Ρ‡Π°Π»Π΅ Π²Ρ‹ вмСстС просто ΠΏΠΈΡˆΠΈΡ‚Π΅ ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽ для API, это Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ дСнь ΠΈΠ»ΠΈ Π΄Π²Π°. А ΠΏΠΎΡ‚ΠΎΠΌ Π²Ρ‹ Π±ΠΎΠΌΠ±ΠΈΡ‚Π΅ мСсяц Π² ΠΏΠ°Ρ€Π°Π»Π»Π΅Π»ΡŒ. ΠŸΡ€ΠΈΡ‡Π΅ΠΌ Ρ„ΠΈΡˆΠΊΠ° Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ инструмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ просто Π²Ρ‹Π΄Π°ΡŽΡ‚ Π·Π°Π³Π»ΡƒΡˆΠΊΠΈ для ΠΊΠΎΠ΄Π° Π½Π° Ρ„Ρ€ΠΎΠ½Ρ‚Π΅. Π’.Π΅. Ссли Ρ„Ρ€ΠΎΠ½Ρ‚ ΠΏΠΈΡˆΠ΅Ρ‚ΡΡ быстрСС, Ρ‚ΠΎ Π΅Π³ΠΎ ΠΏΡ€ΠΎΡ‰Π΅ Ρ‚Π΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΈ всС Ρ‚Π°ΠΊΠΎΠ΅. Аналогично с бэкСндом. Π•Π³ΠΎ Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π΅ΡΡ‚ΠΈΡ‚ΡŒ Π΄Π°ΠΆΠ΅ Ссли Ρ„Ρ€ΠΎΠ½Ρ‚ Π½Π΅ Π³ΠΎΡ‚ΠΎΠ². ΠŸΡ€ΠΈΡ‡Π΅ΠΌ эти всС Ρ„ΠΈΡˆΠΊΠΈ особСнно ΠΊΡ€ΡƒΡ‚Ρ‹, ΠΊΠΎΠ³Π΄Π° вас Π½Π΅ Π΄Π²ΠΎΠ΅, Π° Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ 20, Π΄Π° ΠΈ ΠΆΠΈΠ²Π΅Ρ‚Π΅ Π²Ρ‹ ΠΏΠΎ всСму ΠΌΠΈΡ€Ρƒ Π² Ρ€Π°Π·Π½Ρ‹Ρ… часовых поясах ΠΈ Ρ‚.Π΄.

Π§Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½Π° React JS? ΠžΠ±Π»Π°ΡΡ‚ΡŒ примСнСния

Вряд Π»ΠΈ Π΅ΡΡ‚ΡŒ программисты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΡΠ»Ρ‹ΡˆΠ°Π»ΠΈ ΠΏΡ€ΠΎ React. Π­Ρ‚ΠΎ популярная Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°, вСсь ΠΊΠΎΠ΄ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ находится Π² ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠΌ доступС. ΠœΠΎΡ‰Π½ΠΎΠ΅ Ρ€Π°Π·Π²ΠΈΡ‚ΠΎΠ΅ сообщСство ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ быстрСС ΡΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒΡΡ со слоТностями, особСнно Ссли Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Π΅Ρ‚ ΠΎ нСпростых ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ…. НСсмотря Π½Π° всС прСимущСства, Ρƒ этого инструмСнта Π΅ΡΡ‚ΡŒ особСнности, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² рядС случаСв ΠΌΠΎΠ³ΡƒΡ‚ ΡΡ‚Π°Ρ‚ΡŒ минусами. Π§Ρ‚ΠΎΠ±Ρ‹ этого Π½Π΅ ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΠ»ΠΎ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° Π½ΡƒΠΆΠ΅Π½ React, Π³Π΄Π΅ Π΅Π³ΠΎ использованиС умСстно, Π° Π³Π΄Π΅ β€” Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ. Π’ этой ΠΎΠ±Π·ΠΎΡ€Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрим Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Ρ€Π΅Π°ΠΊΡ‚ ΠΈ для Ρ‡Π΅Π³ΠΎ ΠΎΠ½ примСняСтся.

MVC-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ β€” схСма раздСлСния Π΄Π°Π½Π½Ρ‹Ρ… прилоТСния, Ρ€Π°ΡΡˆΠΈΡ„Ρ€ΠΎΠ²Ρ‹Π²Π°ΡŽΡ‰Π°ΡΡΡ ΠΊΠ°ΠΊ МодСль-ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅-ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ Ρ‚Π°ΠΊΠΎΠ³ΠΎ конструкта ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‚Π°Ρ‚ΡŒ Angular, Π½ΠΎ React β€” это Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Β«VΒ». Он отвСтствСнСн Π·Π° ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π°Π½Π½Ρ‹Ρ… ΠΌΠΎΠ΄Π΅Π»ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΠΈ Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΠ΅Ρ‚ Π½Π° Π΅Π΅ измСнСния. Model ΠΈ Controller, ΠΏΡ€ΠΈ этом, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΠ½Ρ‹ΠΌΠΈ срСдствами. Π’ΠΎ Π΅ΡΡ‚ΡŒ, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° web ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΎΠΈΡΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π° Ρ€Π΅Π°ΠΊΡ‚Π΅.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ программистам Ρ‚Π°ΠΊ нравится React?

ΠœΡ‹ сравним Π΄Π²Π΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΈΠ· Ρ‚Ρ€ΠΎΠΉΠΊΠΈ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ популярных β€” React ΠΈ Angular (Π΅Ρ‰Π΅ Π΅ΡΡ‚ΡŒ Vue). Π Π°Π±ΠΎΡ‚Π° с ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ состоит Π² описании Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ вывСсти Π½Π° страницу, Π° Π½Π΅ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ инструкций, Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹Ρ… Π½Π° объяснСниС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ это Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ. Π­Ρ‚Π° ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ обСспСчиваСт Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½ΠΎΡΡ‚ΡŒ ΠΊΠΎΠ΄Π° ΠΈ сокращаСт количСство ΡˆΠ°Π±Π»ΠΎΠ½Π½Ρ‹Ρ… частСй, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Ρ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ сайт.

Когда программист Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ, Π΅ΠΌΡƒ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ΠΎΠΌ шаблонного ΠΊΠΎΠ΄Π°, ΠΊΠ°ΠΊ это происходит Π² Angular β€” ΠΎΠ½ Π±Π΅Π· Π»ΠΈΡˆΠ½ΠΈΡ… Ρ‚Π°Π½Ρ†Π΅Π² с Π±ΡƒΠ±Π½ΠΎΠΌ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄. Π’ React ΠΎΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ шаблонного ΠΊΠΎΠ΄Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈΠ·-Π·Π° ΠΈΡ… нСнадобности β€” ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ чистыС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ.

ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ синтаксиса JSX, воспроизводящСгося ΠΊΠ°ΠΊ Ρ€ΠΎΠ΄Π½ΠΎΠΉ ΠΈ ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½Ρ‹ΠΉ HTML. Π­Ρ‚ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ ΠΏΠΎΡ€ΠΎΠ³ вхоТдСния, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ React Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΈΠ°Π»ΡŒΠ½ΠΎ Π½ΠΎΠ²Ρ‹Π΅ Π²Π΅Ρ‰ΠΈ.

Если ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° ΠΊΡ€ΠΈΠ²ΡƒΡŽ обучСния, Π·Π°ΠΌΠ΅Ρ‚Π½ΠΎ, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ Ρ€Π΅Π°ΠΊΡ‚Π° Π½Π° Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΌ этапС даСтся Π»Π΅Π³Ρ‡Π΅, Ρ‡Π΅ΠΌ Angular. Быстро ΡΡ‚Π°Ρ€Ρ‚ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎ ΠΈΠ·-Π·Π° мСньшСго количСства абстракций. Если программист Π·Π½Π°Π΅Ρ‚ JS, ΠΎΠ½ смоТСт Π±ΡƒΠΊΠ²Π°Π»ΡŒΠ½ΠΎ Π·Π° дСнь Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΊ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ своС ΠΏΠ΅Ρ€Π²ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° React JS . Но это Π½Π΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π·Π°Π΄Π°Ρ‡ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Ρ‹ Π±Π΅Π· ошибок. На этапС ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½ΡΡ‚Π²ΠΎΠ²Π°Π½ΠΈΡ Π½Π°Π²Ρ‹ΠΊΠΎΠ² ангуляр Π»Π΅Π³Ρ‡Π΅. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π²Ρ‹Π±Ρ€Π°Π²ΡˆΠΈΠ΅ Ρ€Π΅Π°ΠΊΡ‚, ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚Π»ΠΎΠΆΠΈΡ‚ΡŒ Π½Π° ΠΏΠΎΡ‚ΠΎΠΌ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ TypeScript, Ρ€Π°Π·Π²ΠΈΡ‚ΠΈΠ΅ Π½Π°Π²Ρ‹ΠΊΠ° Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ строкой ΠΈ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Π°ΠΌΠΈ β€” это Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ для использования ангуляра Π΄Π°ΠΆΠ΅ Π½Π° Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅.

  • ΠžΠ΄Π½ΠΎΡΡ‚ΠΎΡ€ΠΎΠ½Π½ΡΡ привязка Π΄Π°Π½Π½Ρ‹Ρ… позволяСт с ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ взгляда ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ/ошибок, Ρ‡Ρ‚ΠΎ сущСствСнно ускоряСт ΠΎΡ‚Π»Π°Π΄ΠΊΡƒ.
  • НСт ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ привязки ΠΊ классам, Ρ‡Ρ‚ΠΎ ΠΎΠ±Π»Π΅Π³Ρ‡Π°Π΅Ρ‚ ΠΊΠΎΠ΄. ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ интСрфСйса ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Ρ€Π°Π·ΠΈΡ‚ΡŒ Π² Π²ΠΈΠ΄Π΅ Π½Π°Π±ΠΎΡ€ΠΎΠ² чистых Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ.
  • Если интСрСсно сравнСниС с Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ΠΉ популярной Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠ΅ΠΉ, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ наш ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» β€” Π§Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ React ΠΈΠ»ΠΈ Vue.

Для Ρ‡Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π Π΅Π°ΠΊΡ‚

Много Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½Π° React js β€” ΠΊΠ°ΠΊ большиС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ со слоТной структурой, Ρ‚Π°ΠΊ ΠΈ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ скромноС. Часто Π½Π° Π½Π΅ΠΌ ΠΏΠΈΡˆΡƒΡ‚ стартап ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ с этим инструмСнтом Π»Π΅Π³Ρ‡Π΅ Π²Ρ‹ΠΉΡ‚ΠΈ Π½Π° ΠΎΠΊΡƒΠΏΠ°Π΅ΠΌΠΎΡΡ‚ΡŒ, Ρ‡Π΅ΠΌ с Angular.

Π˜Π·Π²Π΅ΡΡ‚Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ Π½Π° React:

  • Facebook. Π’ Π½Π΅ΠΌ React ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ частично, Π½ΠΎ ΠΈ Π² вСрсии для ПК, ΠΈ Π² мобильном ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.
  • Instagram. Π’ ΡΡ‚ΠΎΠ»ΡŒ популярном ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Ρ€Π΅Π°ΠΊΡ‚Ρƒ отводится огромная Ρ€ΠΎΠ»ΡŒ. Начиная с возмоТности опрСдСлСния Π³Π΅ΠΎΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ ΠΈ заканчивая Ρ‚ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»Π° поиска — ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ Π²Π΅Ρ‰ΠΈ часто Π΄Π΅Π»Π°ΡŽΡ‚ Π½Π° React.
  • Netflix. АктивнСС всСго задСйствуСтся Π½Π° ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅ Gibbon. Основной Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ становится Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ для Ρ‚Π΅Π»Π΅Π²ΠΈΠ·ΠΎΡ€ΠΎΠ² с Π½ΠΈΠ·ΠΊΠΎΠΉ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ. Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ ΠΈ ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ β€” Π²ΠΎΡ‚ Π³Π΄Π΅ программисты Ρ‚ΠΎΡ‡Π½ΠΎ Π·Π½Π°Π»ΠΈ для Ρ‡Π΅Π³ΠΎ Π½ΡƒΠΆΠ΅Π½ React js.
  • Yahoo! Mail. Благодаря Facebook, эти сСрвисы стали упорядочСнными Π² ΠΏΠ»Π°Π½Π΅ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Ρ‹. ΠŸΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Π»ΠΎΡΡŒ мноТСство ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ привСсти ΠΊ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠΌΡƒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρƒ: Π»Π΅Π³ΠΊΠΎΠΉ ΠΎΡ‚Π»Π°Π΄ΠΊΠ΅, Π½ΠΈΠ·ΠΊΠΎΠΌΡƒ ΡƒΡ€ΠΎΠ²Π½ΡŽ вхоТдСния, нСзависимо Ρ€Π°Π·Π²Π΅Ρ€Ρ‚Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ. Π Π΅Π°ΠΊΡ‚ подошСл ΠΈΠΌ ΠΈΠ·-Π·Π° ряда Π΅Π³ΠΎ свойств: одностороннСго ΠΏΠΎΡ‚ΠΎΠΊΠ° Π΄Π°Π½Π½Ρ‹Ρ…, возмоТности ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ DOM, Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ сообщСство.
  • WhatsApp β€” спСциалисты этого сСрвиса Ρ€Π΅ΡˆΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React для создания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов.
  • Dropbox. На Π²ΠΎΠ»Π½Π΅ популярности Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, Π΅Π΅ Π½Π°Ρ‡Π°Π»ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈ для этого сайта.

Π’Π°ΠΊΠΆΠ΅ сущСствуСт React Native. По названию ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ это Ρ‚ΠΎΡ‚ ΠΆΠ΅ инструмСнт, Π½ΠΎ это Π½Π΅ Ρ‚Π°ΠΊ. Для Ρ‡Π΅Π³ΠΎ Π½ΡƒΠΆΠ΅Π½ React Native β€” для создания ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, создаваСмых ΠΏΠΎΠ΄ ΠΎΠ±Π΅ популярных ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹ (iOS ΠΈ Android) ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ. ОбС вСрсии прилоТСния Π±ΡƒΠ΄ΡƒΡ‚ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ рСкомСндациям Apple ΠΈ Google, ΠΏΡ€ΠΈ этом Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° происходит быстрСС ΠΈ задСйствуСт ΠΎΠ΄Π½Ρƒ ΠΈ Ρ‚Ρƒ ΠΆΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π½Π° React Native позволяСт Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Ρ… Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠ² Π² ΠΊΡ€Π°Ρ‚Ρ‡Π°ΠΉΡˆΠΈΠ΅ сроки.

Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ Π½Π°ΠΏΠΎΠΌΠ½ΠΈΠΌ, Ρ‡Ρ‚ΠΎ любой инструмСнт Ρ…ΠΎΡ€ΠΎΡˆ для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Ρ†Π΅Π»Π΅ΠΉ. Π’Π°ΠΊ ΠΈ Ρ€Π΅Π°ΠΊΡ‚ β€” Ρƒ Π½Π΅Π³ΠΎ ряд прСимущСств, Π½ΠΎ ΠΈ свои нСдостатки. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Ссли спСциалист Π·Π½Π°Π΅Ρ‚ особСнности ΠΈ умСстно примСняСт инструмСнт, нСдостатки ΠΌΠΎΠΆΠ½ΠΎ достаточно Π»Π΅Π³ΠΊΠΎ ΠΎΠ±ΠΎΠΉΡ‚ΠΈ. Π“Π»Π°Π²Π½ΠΎΠ΅ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° β€” Π½Π΅ Π²ΠΏΠ°Π΄Π°Ρ‚ΡŒ Π² Ρ„Π°Π½Π°Ρ‚ΠΈΠ·ΠΌ β€” Π² Π²Ρ‹Π±ΠΎΡ€Π΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΎΡ‚Ρ‚Π°Π»ΠΊΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ ситуации, Π·Π°Π΄Π°Ρ‡ ΠΈ потрСбностСй ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°, Π° Π½Π΅ ΠΎΡ‚ Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚Π΅Π½ΠΈΠΉ.

Π’ нашСм Π±Π»ΠΎΠ³Π΅ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ Ρ‚Π°ΠΊΠΈΡ… Ρ‚Π΅ΠΌΠ°Ρ…, ΠΊΠ°ΠΊ: Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° CRM, e-commerce, анимация, Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½, Π³ΠΈΠ±Ρ€ΠΈΠ΄Π½Ρ‹Π΅ прилоТСния.

ReactJS ΠΏΡ€ΠΎΡ‚ΠΈΠ² NodeJS-Π·Π°Ρ‡Π΅ΠΌ ΠΌΠ½Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈ Ρ‚ΠΎ, ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ΅?

Π― понимаю, Ρ‡Ρ‚ΠΎ React-это frontend, Π° NodeJS-это бэкэнд, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΠΊΠΎΠ΄Ρƒ Javascript Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Π½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Π§Π΅Π³ΠΎ я Π½Π΅ понимаю (ΠΈ это послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ я ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Π» ΠΎΠ½Π»Π°ΠΉΠ½-ΡƒΡ€ΠΎΠΊΠΈ ΠΏΠΎ настройкС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° React ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° NodeJS), Ρ‚Π°ΠΊ это ΠΏΠΎΡ‡Π΅ΠΌΡƒ я Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ экзСмпляр ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Π½ΠΈΡ….

НапримСр, Π² ΠΌΠΎΠ΅ΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ React ΠΌΠ½Π΅ ΡƒΠ΄Π°Π»ΠΎΡΡŒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅Π±-сайт. Но ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΌΠ½Π΅ Π½ΡƒΠΆΠ΅Π½ Π±Ρ‹Π» бэкэнд, я Ρ€Π΅ΡˆΠΈΠ» ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ NodeJS. Но я дСлаю NodeJS ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ, ΠΈ я Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³Ρƒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅Π±-сайт, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ NodeJS. Π― Π² Π·Π°ΠΌΠ΅ΡˆΠ°Ρ‚Π΅Π»ΡŒΡΡ‚Π²Π΅, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ прямо сСйчас каТСтся, Ρ‡Ρ‚ΠΎ React ΠΈ NodeJS Π΄Π΅Π»Π°ΡŽΡ‚ Ρ‚ΠΎ ΠΆΠ΅ самоС .

Π― Π½ΠΈΠΊΠΎΠ³Π΄Π° Ρ€Π°Π½ΡŒΡˆΠ΅ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π» с NodeJS, поэтому Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ запутался. Π£ мСня слоТилось Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ я просто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ NodeJS для размСщСния бэкСнда, Π½ΠΎ послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ я ΡƒΠ²ΠΈΠ΄Π΅Π», Ρ‡Ρ‚ΠΎ ΠΌΠ½Π΅ Π±ΡƒΠΊΠ²Π°Π»ΡŒΠ½ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ†Π΅Π»Ρ‹ΠΉ сайт с NodeJS, я Π½Π΅ понимаю, ΠΊΠ°ΠΊ я Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React ΠΈ NodeJS вмСстС.

Как ΠΎΠ½ΠΈ ΠΎΠ±Π°, React ΠΈ NodeJS, ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΡƒΡŽΡ‚ΡΡ вмСстС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΡŽΡ‰Π΅Π΅ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅? МнС Π΅Ρ‰Π΅ прСдстоит ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ясно ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, ΠΊΠ°ΠΊ эти Π΄Π²ΠΎΠ΅ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚.

javascript

node.js

reactjs

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ


McFloofenbork Β  Β 

30 мая 2019 в 17:43

6 ΠΎΡ‚Π²Π΅Ρ‚ΠΎΠ²


  • Π—Π°Ρ‡Π΅ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ сСрвСр http?

    Π’ javascript, работая Π½Π°Π΄ nodeJs, Π·Π°Ρ‡Π΅ΠΌ ΠΌΠ½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ сСрвСр с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ модуля http, ΠΊΠΎΠ³Π΄Π° я ΠΌΠΎΠ³Ρƒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ fs для чтСния ΠΈ записи / обновлСния Π΄Π°Π½Π½Ρ‹Ρ… Π² Ρ„Π°ΠΉΠ»Π΅ json, Π³Π΄Π΅ хранятся ΠΌΠΎΠΈ Π΄Π°Π½Π½Ρ‹Π΅?

  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ внСшний REST API с ReactJS ΠΈ NodeJS

    Π― всС Π΅Ρ‰Π΅ ΠΈΠ·ΡƒΡ‡Π°ΡŽ ReactJS ΠΈ NodeJS. Мои Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ создали ΡˆΠ°Π±Π»ΠΎΠ½Π½Ρ‹ΠΉ шаблон с create-react-app Π£ нас Π΅ΡΡ‚ΡŒ внСшняя слуТба REST API , ΠΈ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΡΠΎΠ²Π΅Ρ€ΡˆΠ°Ρ‚ΡŒ Π·Π²ΠΎΠ½ΠΊΠΈ (GET, PUT …) Π½Π° ΠΈΡ… APIs ΠΈ ΠΈΠ·Π²Π»Π΅ΠΊΠ°Ρ‚ΡŒ ΠΈ ΠΏΠΎΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅. Мой вопрос Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ReactJS Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ‚Ρ€Π΅Π±Π»ΡΡ‚ΡŒ REST APIs…



14

React-это интСрфСйсная Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°. Он прСдоставляСт ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ инструмСнт для создания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов. И ΠΎΠ½ создаСт одностраничноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Π§Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚Π΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ react. Он Π½Π΅ пСрСзаряТаСтся ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ быстро.

Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ nodejs ΠΈ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ руля для создания Π²Π΅Π±-сайта. Но этот Π²Π΅Π±-сайт Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π½Π° сСрвСрС, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΎΠ±ΡΠ»ΡƒΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ. Но это Π³ΠΎΡ€Π°Π·Π΄ΠΎ большС, Ρ‡Π΅ΠΌ просто Ρ‚Π°ΠΊ. Π•ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ Π²Π΅Ρ‰Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½Π° сСрвСрС. Как аутСнтификация. Π’Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ эта Ρ‡Π°ΡΡ‚ΡŒ Π±Ρ‹Π»Π° бСзопасной. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π²Ρ‹ Π΄Π΅Ρ€ΠΆΠΈΡ‚Π΅ Π΅Π³ΠΎ Π½Π° сСрвСрС.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΎΡ‚Π²Π΅Ρ‚ Π½Π° Π·Π°ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ вашСго вопроса.

Для ΠΏΠΎΠ»Π½ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ прилоТСния. Π’Ρ‹ Π±Ρ‹ использовали react для создания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов. И nodejs для создания API, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒ вашС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ react.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ


Muhammad Kamran Β  Β 

30 мая 2019 в 17:53



6

NodeJS-это просто срСда выполнСния, которая позволяСт Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄ javascript Π²Π½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

Π Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ nodeJS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ инструмСнт для компиляции ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΊΠΎΠ΄Π°.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ


filipe Β  Β 

30 мая 2019 в 17:51



6

NodeJS-это Π½Π΅ просто ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ javascript, это срСда выполнСния javascript, которая находится ΠΏΠΎΠ²Π΅Ρ€Ρ… Π΄Π²ΠΈΠΆΠΊΠ° C++ ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ V8, прСдоставлСнного Google. Π£Π·Π΅Π» выполняСтся Π²Π½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ React / Vue / Angular / etc ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°ΠΌΠΈ in-browser javascript.

React — это Ρ†Π΅Π»ΠΎΠ΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΎΠ΅; это Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ свой собствСнный DOM Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Π­Ρ‚ΠΎ Π΄Π²ΠΈΠΆΠΎΠΊ javascript, настроСнный Π½Π° ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡŽ манипуляций DOM.

Π₯отя ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½Ρ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ frontend ΠΈ backend каТутся ΠΏΠΎΡ…ΠΎΠΆΠΈΠΌΠΈ, ΠΎΠ½ΠΈ Π΄Π΅Π»Π°ΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹Π΅ Π²Π΅Ρ‰ΠΈ. React ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ Π΄Π°Π½Π½Ρ‹Π΅ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠΈ Π΄Π΅Π»Π°Π΅Ρ‚ API Π·Π²ΠΎΠ½ΠΊΠΎΠ². Π£Π·Π΅Π» ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ запросы ΠΈΠ· Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°,Π΄Π΅Π»Π°Π΅Ρ‚ Π²Ρ‹Π·ΠΎΠ²Ρ‹ Π±Π°Π·Ρ‹ Π΄Π°Π½Π½Ρ‹Ρ…, ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ Π°ΡƒΡ‚Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽ ΠΈ Ρ‚. Π΄. Из-Π·Π° этих Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… обязанностСй Node ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΌΠΎΠ΄ΡƒΠ»ΠΈ, Ρ‡Π΅ΠΌ frontend framework.

Π’ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ счСтС, Node ΠΈ React Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚ Ρ‡Π΅Ρ€Π΅Π· Π²Ρ‹Π·ΠΎΠ²Ρ‹ HTTP, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ с ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Axios. Π•ΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅, Π½ΠΎ этот ΠΎΡ‡Π΅Π½ΡŒ распространСн Π² настоящСС врСмя.

Π’Π°ΠΌ слСдовало Π±Ρ‹ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΡƒΠ·Π΅Π» ΠΏΠΎΠ΄ ΠΊΠ°ΠΏΠΎΡ‚ΠΎΠΌ.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ


Len Joseph Β  Β 

30 мая 2019 в 17:52




1

NodeJS Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ»ΡƒΠΆΠΈΡ‚ΡŒ вашим бэкэндом, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ ReactJS создаст интСрфСйс/UI, Π³Π΄Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ фактичСски ΠΌΠ°Π½ΠΈΠΏΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ своим сСрвСром (nodeJS). Π˜Ρ‚Π°ΠΊ, сначала Π²Ρ‹ Π½Π°ΠΏΠΈΡˆΠ΅Ρ‚Π΅ свой сСрвСр NodeJS ΠΈΠ»ΠΈ API. Π’Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ReactJS для создания интСрфСйса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с вашим ΡƒΠ·Π»ΠΎΠ²Ρ‹ΠΌ сСрвСром, ΠΊΠ°ΠΊ Π²Ρ‹ сказали, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ NodeJS для создания Π²Π°ΡˆΠΈΡ… прСдставлСний Ρ‚Π°ΠΊΠΆΠ΅ Ρ‡Π΅Ρ€Π΅Π· Π΄Ρ€ΡƒΠ³ΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ. ReactJS-это всСго лишь ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΌΠ½ΠΎΠ³ΠΈΡ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² для ΠΏΠ΅Ρ€Π΅Π΄Π½Π΅ΠΉ части вашСго прилоТСния NodeJS.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ


Ajay Sihota Β  Β 

30 мая 2019 в 17:52



1

Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ react ΠΈ любая другая Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° SPA Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π½Π° сторонС ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π° (Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°).

Π Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ принСсти ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ с сСрвСра API.

Π’Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Node.js для построСния API. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ, основанныС Π½Π° Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅Ρ‚Π΅.

Если Π²Ρ‹ Π½Π΅ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с сСрвСрной Ρ‡Π°ΡΡ‚ΡŒΡŽ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ https:/ / www.npmjs.com/package/http-server , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΠΎΠ΄Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ слуТбу API ΠΈ ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ с Π΅Π΅ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ΅Ρ€Π΅Π΄Π½ΡŽΡŽ Ρ‡Π°ΡΡ‚ΡŒ.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ


Mitro Β  Β 

30 мая 2019 в 19:32



0

NodeJS-это Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ javascript, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ сСрвСр для обслуТивания Π²Π΅Π±-сайтов с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Express ΠΈΠ»ΠΈ встроСнных Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ. Он Ρ‚Π°ΠΊΠΆΠ΅ способСн ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅Π±-сайт всСго с NodeJS.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ Π½Π° сторонС сСрвСра с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ сСрвСра NodeJS.
https://reactjs.org/docs/react-dom-server.html

БущСствуСт Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ ReactJS ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ NextJS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ сСрвСрный Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ReactJS.
https://nextjs.org / #особСнности

ΠŸΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ Ρƒ вас ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ области вашСго сайта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ построСны ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ с NodeJS ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ страницами, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠΌΠΈ ReactJS ΠΈ бэкэнд NodeJS. Но Ρ‡ΠΈΡ‰Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ReactJS для front-end ΠΈ NodeJS для backend.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ


Nathan Yeung Β  Β 

30 мая 2019 в 17:58


ΠŸΠΎΡ…ΠΎΠΆΠΈΠ΅ вопросы:

Π—Π°Ρ‡Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΈΠ½Π³Π°, ΠΏΡ€ΠΎΡ‚ΠΈΠ² взглядов?

Π― ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Π·Π°Ρ‡Π΅ΠΌ ΠΊΠΎΠΌΡƒ-Ρ‚ΠΎ понадобилось ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ панСль ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΈΠ½Π³Π° Π² Splunk. ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡ‹ вмСстС с Π»ΡŽΠ±Ρ‹ΠΌΠΈ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ°ΠΌΠΈ ΠΈ поисками, Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΈΠ½Π³Π°-Π½Π΅Ρ‚. Π˜Ρ‚Π°ΠΊ,…

Как Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ nodejs ΠΈ reactjs Π² Docker

Π£ мСня Π΅ΡΡ‚ΡŒ nodejs ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ бэкэнд reactjs Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ интСрфСйс для Π²Π΅Π±-сайта, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ Π½Π° изобраТСния docker. Но я Π½Π΅ знаю, ΠΊΠ°ΠΊ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ с ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ…

force ssl с nodejs и reactjs

Π£ мСня Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅Ρ‚ большого ΠΎΠΏΡ‹Ρ‚Π° Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π² производствСнном Ρ€Π΅ΠΆΠΈΠΌΠ΅ nodejs & reactjs, ΠΈ сСгодня я ΡƒΡΠ»Ρ‹ΡˆΠ°Π», Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ force ssl. я Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ³ΡƒΠ³Π»ΠΈΠ» ΠΈ, ΠΊΠ°ΠΊ ΠΌΠ½Π΅ каТСтся function…

Π—Π°Ρ‡Π΅ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ сСрвСр http?

Π’ javascript, работая Π½Π°Π΄ nodeJs, Π·Π°Ρ‡Π΅ΠΌ ΠΌΠ½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ сСрвСр с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ модуля http, ΠΊΠΎΠ³Π΄Π° я ΠΌΠΎΠ³Ρƒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ fs для чтСния ΠΈ записи / обновлСния Π΄Π°Π½Π½Ρ‹Ρ… Π² Ρ„Π°ΠΉΠ»Π΅ json, Π³Π΄Π΅…

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ внСшний REST API с ReactJS ΠΈ NodeJS

Π― всС Π΅Ρ‰Π΅ ΠΈΠ·ΡƒΡ‡Π°ΡŽ ReactJS ΠΈ NodeJS. Мои Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ создали ΡˆΠ°Π±Π»ΠΎΠ½Π½Ρ‹ΠΉ шаблон с create-react-app Π£ нас Π΅ΡΡ‚ΡŒ внСшняя слуТба REST API , ΠΈ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΡΠΎΠ²Π΅Ρ€ΡˆΠ°Ρ‚ΡŒ Π·Π²ΠΎΠ½ΠΊΠΈ (GET, PUT …) Π½Π° ΠΈΡ… APIs ΠΈ ΠΈΠ·Π²Π»Π΅ΠΊΠ°Ρ‚ΡŒ…

Reactjs ΠΈ nodejs Π»ΠΎΠ³ΠΈΠ½, рСгистрационный ΠΌΠΎΠ΄ΡƒΠ»ΡŒ

Π― Ρ…ΠΎΡ‡Ρƒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ reactjs Π² frontend ΠΈ nodejs ΠΈΠ»ΠΈ java Π² качСствС backend. Ρ€Π°Π·Π²Π΅ ΠΊΡ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΡƒΡŽ-Π»ΠΈΠ±ΠΎ ΠΏΠΎΠΌΠΎΡ‰ΡŒ? поТалуйста, ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ своими ссылками Π½Π° ссылки.

Reactjs: Π·Π°Ρ‡Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ const {} = this.props ΠΈ Π·Π°Ρ‡Π΅ΠΌ ΠΏΠΎΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π°

Π― ΡƒΡ‡ΡƒΡΡŒ reactjs ΠΈ Π²ΠΈΠΆΡƒ, Ρ‡Ρ‚ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ люди ΠΏΠΈΡˆΡƒΡ‚, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ class Trees extends Component { render() { const { plantTrees } = this.props; return( … Π― Ρ…ΠΎΡ‡Ρƒ Π·Π½Π°Ρ‚ΡŒ, Π·Π°Ρ‡Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ const {} =…

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ» exe ΠΈΠ· Reactjs ΠΈ прилоТСния nodejs?

Π― ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ reactjs для frontend ΠΈ nodejs для backend. Π’Π΅ΠΏΠ΅Ρ€ΡŒ я Ρ…ΠΎΡ‡Ρƒ ΠΈΠ»ΠΈ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ это ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π² Ρ„Π°ΠΉΠ» exe. Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ способ ΡƒΠΏΠ°ΠΊΠΎΠ²Π°Ρ‚ΡŒ это Π² .exe? ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°,…

ΠŸΠΎΡ‡Π΅ΠΌΡƒ ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ NodeJS для ReactJS

Π― Π½ΠΎΠ²ΠΈΡ‡ΠΎΠΊ Π² ReactJS ΠΈ для NodeJS. Π― Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ Π·Π½Π°Ρ‚ΡŒ, ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ NodeJS run ReactJS, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ReactJS-это клиСнтский сцСнарий.

Как ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Ρ„Π°ΠΉΠ» Π² NodeJS ΠΈ ReactJS?

Π― ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Ρ„Π°ΠΉΠ» массива ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² Π² nodeJS ΠΈ ReactJS. Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€: config.js const config = { mode: «active», } export default config; МнС Π½ΡƒΠΆΠ½ΠΎ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ это Π² Ρ„Π°ΠΉΠ»…

βœ… Π—Π°Ρ‡Π΅ΠΌ Π½ΡƒΠΆΠ΅Π½ React js

Favicon

Π‘Π»ΠΎΠ³ ΠΏΠΎ web тСхнологиям. Π’Π΅Π± студия Π³. Π’ΠΎΡ€ΠΎΠ½Π΅ΠΆ. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° сайтов Π½Π° Π·Π°ΠΊΠ°Π·.

  • Главная
  • /
  • JavaScript
  • /
  • Когда ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ React?

Когда ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ React?

Π’Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, ΠΊΠΎΠ³Π΄Π° ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ HTML ΠΈ CSS, вСдь ΠΎΠ½ Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ ΠΈΠ· Π½ΠΈΡ… ΠΈ состоит. Ясно для Ρ‡Π΅Π³ΠΎ Π²Ρ‹ добавляСтС JavaScript β€” Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ ΠΈΠ»ΠΈ какая-Ρ‚ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ JavaScript. Π’ΠΏΠΎΠ»Π½Π΅ понятно Π·Π°Ρ‡Π΅ΠΌ Π½Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ. ΠœΡ‹ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π»ΠΈ jQuery, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π½Π°ΠΌ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ с DOM, Ajax ΠΈ ΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒΡΡ с кросс-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½Ρ‹ΠΌΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΏΠΎΡ‚Ρ€Π΅Π±Π½ΠΎΡΡ‚ΡŒ Π² этих Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°Ρ… гаснСт, ΠΈ ΠΌΡ‹ наблюдаСм массовый рост Π½ΠΎΠ²Ρ‹Ρ… Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ², кстати Π² Π΄Π°Π½Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ извСстных ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΈΡΠΏΠΎΠ»ΡŽΠ·ΡƒΡŽΡ‰ΠΈΡ… React, Π½ΠΎ я Π±Ρ‹ сказал, Ρ‡Ρ‚ΠΎ Π½Π΅ совсСм понятно, ΠΊΠΎΠ³Π΄Π° эти Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. Π’ ΠΊΠ°ΠΊΠΎΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π½Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ Ρ‚ΠΎΡ‚ ΠΆΠ΅ React?

Π― просто ΡΠΎΠ±ΠΈΡ€Π°ΡŽΡΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React Π² качСствС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹ для своСго Ρ€ΠΎΠ΄Π° Π±ΠΎΠ»ΡŒΡˆΠΈΡ… JavaScript-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ²: Vue, Ember, Angular, Svelte … ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. Π― понимаю, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ всС Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅, Π½ΠΎ Π² ΠΊΠ°ΠΊΠΈΡ… случаях ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, я Π½Π°Ρ…ΠΎΠΆΡƒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Ρ‚ΡƒΠΌΠ°Π½Π½Ρ‹ΠΌ.

Π’ΠΎΡ‚ ΠΌΠΎΠΈ список Β«Π·Π°Β» ΠΈ Β«ΠΏΡ€ΠΎΡ‚ΠΈΠ²Β».

Π‘ΠΎΠ»ΡŒΡˆΠΎΠ΅ количСство состояний (state).

Π‘Π»ΠΎΠ²ΠΎ «состояниС» ΠΈΠ»ΠΈ state Ρ‚ΠΎΠΆΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ‚ΡƒΠΌΠ°Π½Π½ΠΎΠ΅. ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅ сСбС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π²Π΅Ρ‰ΠΈ:

  • Какой элСмСнт Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π°ΠΊΡ‚ΠΈΠ²Π΅Π½
  • Π‘ΡƒΠ΄Π΅Ρ‚ Π»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π° ΠΈΠ»ΠΈ Π½Π΅Ρ‚
  • КакиС Ρ€Π°Π·Π΄Π΅Π»Ρ‹ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Ρ‹
  • ΠœΠΎΠΌΠ΅Π½Ρ‚ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ области
  • ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ, вошСдший Π² систСму, ΠΈ катСгория, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΎΠ½ ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ‚
  • ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Π° Π»ΠΈ ΡΡ‚Π°Ρ‚ΡŒΡ, Π½Π°Π΄ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ, ΠΈΠ»ΠΈ ΠΆΠ΅ это Ρ‡Π΅Ρ€Π½ΠΎΠ²ΠΈΠΊ

React Π½Π΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π²Π°ΠΌ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ эти состояния, ΠΎΠ½ просто Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚: я знаю, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΠΌΠ΅Ρ‚ΡŒ Π΄Π΅Π»ΠΎ с состояниСм, поэтому Π΄Π°Π²Π°ΠΉΡ‚Π΅ просто Π½Π°Π·ΠΎΠ²Π΅ΠΌ Π΅Π³ΠΎ state ΠΈ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹Π΅ способы установки ΠΈ получСния этого состояния.

Π”ΠΎΠ»Π³ΠΎΠ΅ врСмя ΠΌΡ‹ рассматривали DOM ΠΊΠ°ΠΊ СдинствСнный источник Π΄Π°Π½Π½Ρ‹Ρ…. НапримСр, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ, ΠΌΠΎΠΆΠ΅Ρ‚ Π»ΠΈ Ρ„ΠΎΡ€ΠΌΠ° Π½Π° вашСм сайтС Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½Π°. Π‘ΠΊΠΎΡ€Π΅Π΅ всСго Π²Ρ‹ сдСлаСтС Ρ‚Π°ΠΊΡƒΡŽ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΡƒ: $(Β«.Form input[type=’submit’]).(Β«:DisabledΒ») , ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ вся Π»ΠΎΠ³ΠΈΠΊΠ°, которая Ρ€Π΅ΡˆΠ°Π΅Ρ‚ вопрос ΠΎ Ρ‚ΠΎΠΌ, ΠΌΠΎΠΆΠ΅Ρ‚ Π»ΠΈ Ρ„ΠΎΡ€ΠΌΠ° Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½Π° Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ это β€” Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Disabled ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ. Или Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ имя Π°Π²Ρ‚ΠΎΡ€Π° ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ коммСнтария Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅. НавСрняка Π²Ρ‹ Π½Π°ΠΏΠΈΡˆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ $(Β«.Comments>ul>li:first> h4.comment-author).text() , ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ DOM СдинствСнноС мСсто, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π΅ΡΡ‚ΡŒ эта информация.

React Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ Π½Π°ΠΌ:

  1. Π”Π°Π²Π°ΠΉΡ‚Π΅ Π½Π°Ρ‡Π½Π΅ΠΌ Π΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎΠ±ΠΎ всСм этом ΠΊΠ°ΠΊ ΠΎ событиях (state).
  2. КоС-Ρ‡Ρ‚ΠΎ я ΡƒΠ»ΡƒΡ‡ΡˆΡƒ: state β€” это Ρ‡Π°ΡΡ‚ΡŒ JSON, ΠΈ с Π½ΠΈΠΌ Π»Π΅Π³Ρ‡Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΈ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ приятнСС ΡΠΎΠ²ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ с вашим бэкСндом.
  3. И Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠ΅: Π²Ρ‹ строитС свой HTML, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ кусочки этих state, ΠΈ Π²Π°ΠΌ Π½Π΅ придСтся ΠΈΠΌΠ΅Ρ‚ΡŒ Π΄Π΅Π»ΠΎ с DOM Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ, я Π±Π΅Ρ€Ρƒ всС это Π½Π° сСбя (ΠΈ, вСроятно, сдСлаю эту Ρ€Π°Π±ΠΎΡ‚Ρƒ Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ быстрСС Ρ‡Π΅ΠΌ Π²Ρ‹).

Π‘ΠΎΡ€ΡŒΠ±Π° с Β«Π‘ΠΏΠ°Π³Π΅Ρ‚Ρ‚ΠΈ-ΠΊΠΎΠ΄ΠΎΠΌΒ»

Π‘ΠΏΠ°Π³Π΅Ρ‚Ρ‚ΠΈ-ΠΊΠΎΠ΄ β€” это Π·Π°ΠΏΡƒΡ‚Π°Π½Π½Ρ‹ΠΉ ΠΈ Ρ‚Ρ€ΡƒΠ΄Π½Ρ‹ΠΉ для понимания ΠΊΠΎΠ΄, ΠΎΠ½ Π½Π°Π·Π²Π°Π½ Ρ‚Π°ΠΊ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Ρ…ΠΎΠ΄ Π΅Π³ΠΎ выполнСния ΠΏΠΎΡ…ΠΎΠΆ Π½Π° миску спагСтти, Ρ‚ΠΎΠ΅ΡΡ‚ΡŒ извилистый ΠΈ Π·Π°ΠΏΡƒΡ‚Π°Π½Π½Ρ‹ΠΉ (wikipedia).

Π‘Π½ΠΎΠ²Π° ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅ сСбС Ρ„ΠΎΡ€ΠΌΡƒ Π½Π° вашСм сайтС. Π’ Π½Π΅ΠΉ Π΅ΡΡ‚ΡŒ ΠΊΠΎΠ΄ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ Π²Ρ…ΠΎΠ΄Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅. ΠŸΡƒΡΡ‚ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ числовоС ΠΏΠΎΠ»Π΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ вычислСния рядом с Π½ΠΈΠΌ. Π€ΠΎΡ€ΠΌΡƒ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ΄Ρ‚Π²Π΅Ρ€Π΄ΠΈΡ‚ΡŒ, Π° Π΄Π°Π½Π½Ρ‹Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€ΠΎΠΉΡ‚ΠΈ Π²Π°Π»ΠΈΠ΄Π°Ρ†ΠΈΡŽ, поэтому этот ΠΊΠΎΠ΄ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ΅ Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΌ мСстС. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹ сдСлайтС Ρ„ΠΎΡ€ΠΌΡƒ Π½Π΅Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ, Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€ ΠΏΠΎΠΊΠ° Π½Π΅ загрузятся всС скрипты JavaScript, ΠΈ этот ΠΊΠΎΠ΄ хранится Π³Π΄Π΅-Ρ‚ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ. Когда Ρ„ΠΎΡ€ΠΌΠ° ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½Π°, Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ Π΄Π°Π½Π½Ρ‹Π΅ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ, ΠΈ эти Π΄Π°Π½Π½Ρ‹Π΅ ΠΎΠΏΡΡ‚ΡŒ ΠΆΠ΅ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ. Π’ΠΎ всСм этом ΠΌΠΎΠΆΠ½ΠΎ быстро Π·Π°ΠΏΡƒΡ‚Π°Ρ‚ΡŒΡΡ. И ΠΊΠ°ΠΊ Π½ΠΎΠ²Ρ‹ΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π½Π° ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅, глядя Π½Π° эту Ρ„ΠΎΡ€ΠΌΡƒ, Π΄ΠΎΠ»ΠΆΠ΅Π½ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π²ΠΎ всСм, Ρ‡Ρ‚ΠΎ происходит?

React поощряСт распрСдСлСниС ΠΊΠΎΠ΄Π° Π½Π° ΠΌΠΎΠ΄ΡƒΠ»ΠΈ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, эта Ρ„ΠΎΡ€ΠΌΠ°, скорСС всСго, Π»ΠΈΠ±ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΌ, Π»ΠΈΠ±ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΡΡ‚ΠΎΡΡ‚ΡŒ ΠΈΠ· Π±ΠΎΠ»Π΅Π΅ ΠΌΠ΅Π»ΠΊΠΈΡ… ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ… Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ Π»ΠΎΠ³ΠΈΠΊΡƒ, которая ΠΈΠΌΠ΅Π΅Ρ‚ прямоС ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ ΠΊ Ρ„ΠΎΡ€ΠΌΠ΅.

React Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚: Ρ…ΠΎΡ€ΠΎΡˆΠΎ, Π²Ρ‹ Π½Π΅ ΡΠΎΠ±ΠΈΡ€Π°Π΅Ρ‚Π΅ΡΡŒ ΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ Π·Π° измСнСниями ΠΈ содСрТаниСм DOM Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ DOM ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ‚ ΠΌΠ½Π΅, ΠΈ Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Π½ΠΈΠΌ. ΠŸΠΎΡ‡Π΅ΠΌΡƒ Π±Ρ‹ Π²Π°ΠΌ Π½Π΅ Π½Π°Ρ‡Π°Ρ‚ΡŒ Π΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎΠ± этих Π²Π΅Ρ‰Π°Ρ… ΠΊΠ°ΠΊ ΠΎ части состояния, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ эти состояния, Π° я Ρ€Π°Π·Π±Π΅Ρ€ΡƒΡΡŒ с ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ, ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡŽ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ прСдставлСно.

Π‘Π»Π΅Π΄ΡƒΠ΅Ρ‚ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ сам React ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π½Π΅ ΠΈΡΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ спагСтти-ΠΊΠΎΠ΄. Π’Ρ‹ всС Π΅Ρ‰Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠΌΠ΅Ρ‚ΡŒ state Π² самых странных мСстах, нСпонятным ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π½Π°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ ΠΈ ΠΏΡ€ΠΎΡ‡Π΅Π΅.

По ΠΌΠΎΠ΅ΠΌΡƒ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠΌΡƒ ΠΎΠΏΡ‹Ρ‚Ρƒ, ΠΈΠΌΠ΅Π½Π½ΠΎ Redux β€” это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ±ΠΈΠ²Π°Π΅Ρ‚ спагСтти (ΠΈΠ»ΠΈ ΡΡŠΠ΅Π΄Π°Π΅Ρ‚ Π½Π°ΠΏΡ€ΠΎΡ‡ΡŒ Ссли Ρ…ΠΎΡ‚ΠΈΡ‚Π΅). Redux Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚: я Π±ΡƒΠ΄Ρƒ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ всС Π²Π°ΠΆΠ½Ρ‹Π΅ состояния, ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ, глобально, Π° Π½Π΅ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ Π·Π° ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΌ. Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ state, Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ провСсти ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ Ρ†Π΅Ρ€Π΅ΠΌΠΎΠ½ΠΈΡŽ ΠΈΠ»ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π°. Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Β«Ρ€Π΅Π΄ΡŽΡΠ΅Ρ€Ρ‹Β» (reducers) ΠΈ «диспатчСры» ( dispatch ) ΠΈ Ρ‚ΠΎΠΌΡƒ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅. И всС ΠΎΠ½ΠΈ ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ Β«Ρ†Π΅Ρ€Π΅ΠΌΠΎΠ½ΠΈΠΈ провСдСния».

ΠœΠ½ΠΎΠΆΠ΅ΡΡ‚Π²ΠΎ манипуляций с DOM.

Π ΡƒΡ‡Π½Ρ‹Π΅ манимуляции с DOM, вСроятно, ΡΠ²Π»ΡΡŽΡ‚ΡΡ самым ярким ΠΏΠΎΠΊΠ°Π·Π°Ρ‚Π΅Π»Π΅ΠΌ спагСтти-ΠΊΠΎΠ΄Π°.

React Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚: Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ ΠΊ DOM. Π£ мСня Π΅ΡΡ‚ΡŒ Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ DOM, ΠΈ я занимаюсь этим. Бобытия привязаны нСпосрСдствСнно ΠΊ элСмСнтам, ΠΈ Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ свСрх Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² этом ΠΌΠΎΠ΄ΡƒΠ»Π΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ ΠΊ модулям Π±ΠΎΠ»Π΅Π΅ высокого порядка, Π½ΠΎ Ρ‚ΡƒΡ‚ всС просто ΠΈ отслСТиваСмо.

Π—Π°ΠΏΡƒΡ‚Π°Π½Π½ΠΎΠ΅ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ DOM β€” это Π΄Ρ€ΡƒΠ³ΠΎΠ΅. ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ‡Π°Ρ‚Π°. НовыС сообщСния Ρ‡Π°Ρ‚Π° ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΡΠ²ΠΈΡ‚ΡŒΡΡ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π±Π°Π·Π° Π΄Π°Π½Π½Ρ‹Ρ… Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ Π½ΠΎΠ²Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ ΠΏΠΎΡΡ‚ΡƒΠΏΠ°ΡŽΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΠΎΠ²Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅. Или Π²Ρ‹ Π½Π°Π±Ρ€Π°Π»ΠΈ Π½ΠΎΠ²ΠΎΠ΅ сообщСниС сами! Или страница загруТаСтся Π² ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Ρ€Π°Π·, ΠΈ старыС сообщСния Π²Ρ‹Ρ‚ΡΠ³ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΈΠ· локального Ρ…Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰Π° Π΄Π°Π½Π½Ρ‹Ρ…, поэтому Ρƒ вас Π΅ΡΡ‚ΡŒ Ρ‡Ρ‚ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ прямо сСйчас. Π’ΡƒΡ‚ ΠΎΡ‚ΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ Π»ΠΎΠ³ΠΈΠΊΡƒ Π±ΡƒΠ΄Π΅Ρ‚ Π³ΠΎΡ€Π°Π·Π΄ΠΎ слоТнСС.

ΠŸΡ€ΠΎΡΡ‚ΠΎ Ρ‚Π°ΠΊ. ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ это Ρ‚Ρ€Π΅Π½Π΄.

Π˜Π·ΡƒΡ‡Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎΡ‚ΠΎ Ρ€Π°Π΄ΠΈ обучСния Ρ‡Π΅ΠΌΡƒ-Ρ‚ΠΎ это ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ Π·Π΄ΠΎΡ€ΠΎΠ²ΠΎ. Но всС ΠΆΠ΅ ΠΊ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π½Π° ΠΏΡ€ΠΎΠ΄Π°ΠΊΡˆΠ΅Π½ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ.

НапримСр, Ссли Π²Ρ‹ ΠΏΠΈΡˆΠ΅Ρ‚Π΅ Π±Π»ΠΎΠ³ΠΎΠ²Ρ‹ΠΉ сайт, Ρ‚ΠΎ React, со своими тСхнологиями ΠΈ зависимостями Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π»ΡƒΡ‡ΡˆΠΈΠΌ Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ эти Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ попросту Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ΡΡ.

Π‘Π»ΠΎΠ³ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠΉ собой SPA (Β«Single Page AppΒ»), одностраничноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰Π΅Π΅ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страниц Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ, Π΄ΠΎ сих ΠΏΠΎΡ€ являСтся пустой нишСй. Π’ свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, CMS Π²Π΅Π± прилоТСния, для создания Π±Π»ΠΎΠ³ΠΎΠ² Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ Π² сторону React.

МнС просто нравится JavaScript ΠΈ я Ρ…ΠΎΡ‡Ρƒ ΠΏΠΈΡΠ°Ρ‚ΡŒ всС Π½Π° JavaScript.

Волько с Π½Π΅Π΄Π°Π²Π½ΠΈΡ… ΠΏΠΎΡ€ Π²Π΅Π±-истории стало Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΌ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΏΠΎΠΊΠΈΠ΄Π°Ρ‚ΡŒ JavaScript. Π£ вас Π΅ΡΡ‚ΡŒ Node.js для выполнСния ΠΊΠΎΠ΄Π° Π½Π° сторонС сСрвСра. Π•ΡΡ‚ΡŒ мноТСство ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹Ρ‚Π°ΡΠΊΠΈΠ²Π°ΡŽΡ‚ CSS ΠΈΠ· миксов ΠΈ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ стили с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript. И с React-ΠΎΠΌ ваш HTML Ρ‚ΠΎΠΆΠ΅ хранится Π² JavaScript.

Π­Ρ‚ΠΎ всС Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Π½ΠΎ ΠΎΠΏΡΡ‚ΡŒ ΠΆΠ΅, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠΎΠ΅-Ρ‡Π΅Π³ΠΎ Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚Π΅. НС Π²ΠΎ всСх ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ… это трСбуСтся, Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ всС Π·Π°Π΄Π°Ρ‡ΠΈ Π½Π° сСгодняшний дСнь JavaScript, Π° вмСстС с Π½ΠΈΠΌ ΠΈ React, способСн Ρ€Π΅ΡˆΠ°Ρ‚ΡŒ.

Π­Ρ‚ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ я знаю.

Π’Ρ‹ ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ. ΠŸΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π΅. ВсС учатся. ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡ‚Π΅ ΠΈ Π²Ρ‹. Π§Π΅ΠΌ большС Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΈΠ²Π½Π΅Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠ΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

Но ΠΈΠ½ΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‚ язык, Ρ‚Π΅ инструмСнты ΠΈ Ρ‚Π΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²Ρ‹ ΡƒΠΆΠ΅ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΠΎΠ΄Π½Π°Ρ‚Π°ΡΠΊΠ°Π»ΠΈΡΡŒ, Ссли Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ с React, Ρ‚ΠΎ я Π½Π΅ Π±ΡƒΠ΄Ρƒ Ρ‚ΡƒΡ‚ вас ΠΏΠ΅Ρ€Π΅ΡƒΠ±Π΅ΠΆΠ΄Π°Ρ‚ΡŒ.

ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ спСциалисты.

НС ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Ρ€Π°Π½Π΅Π΅ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² Ρ‚ΠΎΠΌ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅. Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΡ‚ со Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ. Π― лишь Ρ…ΠΎΡ‡Ρƒ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΊΡ‚ΠΎ-Ρ‚ΠΎ Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ Ρ‚ΠΎΡ‚ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ для своСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° лишь ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅ΡŽΡ‚ΡΡ спСциалисты (спСциалист), Π·Π½Π°ΡŽΡ‰ΠΈΠ΅ этот Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ ΠΈ ΡƒΠΌΠ΅ΡŽΡ‰ΠΈΠ΅ с Π½ΠΈΠΌ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ.

Π’Ρ‹Π±Ρ€Π°Ρ‚ΡŒ React для своСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Ρƒ вас Π΅ΡΡ‚ΡŒ спСциалисты ΠΏΠΎ React, Π² этом Π½Π΅Ρ‚ Π½ΠΈΡ‡Π΅Π³ΠΎ ΠΏΠ»ΠΎΡ…ΠΎΠ³ΠΎ. Как Π·Π½Π°Ρ‚ΡŒ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠ°ΠΊ Ρ€Π°Π· ΠΎΠ½ идСально ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ для вашСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ стоит ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React JS ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ попытаСмся Π²Ρ‹ΡΡΠ½ΠΈΡ‚ΡŒ, ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° React JS становится всС Π±ΠΎΠ»Π΅Π΅ популярной Π² послСднСС врСмя ΠΈ ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊΠΈ Π΄Π΅Π»Π°ΡŽΡ‚ Π²Ρ‹Π±ΠΎΡ€ Π² ΠΏΠΎΠ»ΡŒΠ·Ρƒ React Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ. ΠœΡ‹ коснСмся Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ сущСствСнных прСимущСств, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ прСдоставлСны Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΠΈ Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊΠ°ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹Π±Π΅Ρ€ΡƒΡ‚ React JS Π² качСствС ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΠΏΡ€ΠΈ создании ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΈ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° React Π±Ρ‹Π»Π° Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅ Π²Ρ‹ΠΏΡƒΡ‰Π΅Π½Π° ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠ΅ΠΉ Facebook Π² 2013 Π³ΠΎΠ΄Ρƒ. Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ, насколько популярной эта тСхнология стала Π·Π° ΠΏΡ€ΠΎΡˆΠ΅Π΄ΡˆΠ΅Π΅ врСмя, Π΄Π°Π²Π°ΠΉΡ‚Π΅ обратимся ΠΊ опросу Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², ΠΏΡ€ΠΎΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌΡƒ сайтом StackOverflow Π² этом Π³ΠΎΠ΄Ρƒ. Π‘ΠΎΠ»Π΅Π΅ 50 000 Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² подСлились ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΎ своСй Ρ€Π°Π±ΠΎΡ‚Π΅ ΠΈ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… прСдпочтСниях. Помимо Π±ΠΎΠ»Π΅Π΅ ΠΈΠ»ΠΈ ΠΌΠ΅Π½Π΅Π΅ прСдсказуСмых Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±Ρ€ΠΈΡΠΎΠ²Ρ‹Π²Π°ΡŽΡ‚ состоянии IT-индустрии Π½Π° сСгодняшний дСнь, Π΅ΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈ ΠΊΠΎΠ΅-Ρ‡Ρ‚ΠΎ Π»ΡŽΠ±ΠΎΠΏΡ‹Ρ‚Π½ΠΎΠ΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ нСпосрСдствСнно React. Π­Ρ‚Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° стала ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· самых Π»ΡŽΠ±ΠΈΠΌΡ‹Ρ… ΠΈ вострСбованных Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, Π° Ρ‚Π°ΠΊΠΆΠ΅ самой Ρ‚Ρ€Π΅Π½Π΄ΠΎΠ²ΠΎΠΉ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠ΅ΠΉ Π½Π° StackOverflow:

Π”ΠΎΠ²ΠΎΠ»ΡŒΠ½ΠΎ вСский Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚ для Ρ‚ΠΎΠ³ΠΎ, ΠΊΡ‚ΠΎ задумываСтся ΠΎ Ρ‚ΠΎΠΌ, Π½Π΅ ΡΡ‚Π°Ρ‚ΡŒ Π»ΠΈ Π΅ΠΌΡƒ React Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠΌ, Π½Π΅ Ρ‚Π°ΠΊ Π»ΠΈ? Но Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π½Π΅ Π±ΡƒΠ΄Π΅ΠΌ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎΡΠΏΠ΅ΡˆΠ½Ρ‹Ρ… Π²Ρ‹Π²ΠΎΠ΄ΠΎΠ². ВмСсто этого, рассмотрим основныС возмоТности React, благодаря ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ эта Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° стала Ρ‚Π°ΠΊΠΎΠΉ популярной. Π‘ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΠ³ΠΎ, ΠΌΡ‹ попытаСмся Π²Ρ‹ΡΡΠ½ΠΈΡ‚ΡŒ, ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π»ΠΈ эти особСнности Π²Π°ΠΆΠ½Ρ‹ΠΌΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΈΠ»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Ρ‚Π°ΠΊΠΆΠ΅ принСсти Π²Ρ‹Π³ΠΎΠ΄Ρƒ ΠΈ Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊΠ°ΠΌ.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ React JS. ΠšΡ€Π°Ρ‚ΠΊΠΈΠΉ ΠΎΠ±Π·ΠΎΡ€

React это Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° для создания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов. Одной ΠΈΠ· Π΅Π΅ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… особСнностСй являСтся Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ JSX, язык программирования с Π±Π»ΠΈΠ·ΠΊΠΈΠΌ ΠΊ HTML синтаксисом, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ компилируСтся Π² JavaScript. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π΄ΠΎΠ±ΠΈΠ²Π°Ρ‚ΡŒΡΡ высокой ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Virtual DOM. C React Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠΌΠΎΡ€Ρ„Π½Ρ‹Π΅ прилоТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ ΠΈΠ·Π±Π°Π²ΠΈΡ‚ΡŒΡΡ ΠΎΡ‚ нСприятной ситуации, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ с Π½Π΅Ρ‚Π΅Ρ€ΠΏΠ΅Π½ΠΈΠ΅ΠΌ ΠΎΠΆΠΈΠ΄Π°Π΅Ρ‚, ΠΊΠΎΠ³Π΄Π° ΠΆΠ΅ Π½Π°ΠΊΠΎΠ½Π΅Ρ† Π·Π°Π²Π΅Ρ€ΡˆΠΈΡ‚ΡΡ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π΄Π°Π½Π½Ρ‹Ρ… ΠΈ Π½Π° экранС Π΅Π³ΠΎ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π° Π½Π°ΠΊΠΎΠ½Π΅Ρ† появится Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΏΠΎΠΌΠΈΠΌΠΎ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ. Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ с Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒΡŽ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Ρ‹ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹ Π·Π°Π½ΠΎΠ²ΠΎ Π² Π½ΠΎΠ²Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ…. Высокий ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΊΠΎΠ΄Π° ΠΏΠΎΠ²Ρ‹ΡˆΠ°Π΅Ρ‚ ΠΏΠΎΠΊΡ€Ρ‹Π²Π°Π΅ΠΌΠΎΡΡ‚ΡŒ тСстами, Ρ‡Ρ‚ΠΎ, Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ Π±ΠΎΠ»Π΅Π΅ высокому ΡƒΡ€ΠΎΠ²Π½ΡŽ контроля качСства. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ React Native ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ прилоТСния для Android ΠΈ iOS, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΎΠΏΡ‹Ρ‚ JavaScript ΠΈ React Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

Π­Ρ‚ΠΎ Π±Ρ‹Π»ΠΈ тСхничСскиС особСнности, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΡΠ»ΡƒΠΆΠΈΡ‚ΡŒ ΠΏΠΈΡ‰Π΅ΠΉ для Ρ€Π°Π·ΠΌΡ‹ΡˆΠ»Π΅Π½ΠΈΠΉ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ вопросу.

ΠšΠ°ΠΊΡƒΡŽ ΠΏΠΎΠ»ΡŒΠ·Ρƒ ΠΈΠ· React ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ·Π²Π»Π΅Ρ‡ΡŒ Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊ?
Π˜Ρ‚Π°ΠΊ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒΡΡ:

  • Virtual DOM ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ высоконагруТСнных ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ½ΠΈΠ·ΠΈΡ‚ΡŒ Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ возникновСния Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… нСудобств ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠ°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΎΠΏΡ‹Ρ‚;
  • ИспользованиС ΠΈΠ·ΠΎΠΌΠΎΡ€Ρ„Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ страниц быстрСС, Ρ‚Π΅ΠΌ самым позволяя ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Ρ‡ΡƒΠ²ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ сСбя Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠΌΡ„ΠΎΡ€Ρ‚Π½ΠΎ Π²ΠΎ врСмя Ρ€Π°Π±ΠΎΡ‚Ρ‹ с вашим ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ. ΠŸΠΎΠΈΡΠΊΠΎΠ²Ρ‹Π΅ систСмы ΠΈΠ½Π΄Π΅ΠΊΡΠΈΡ€ΡƒΡŽΡ‚ Ρ‚Π°ΠΊΠΈΠ΅ страницы Π»ΡƒΡ‡ΡˆΠ΅. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ ΠΊΠΎΠ΄ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ использован ΠΊΠ°ΠΊ Π² клиСнтской, Ρ‚Π°ΠΊ ΠΈ Π² сСрвСрной части прилоТСния, Π½Π΅Ρ‚ нСобходимости Π² Π΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»Π°. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ врСмя Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΈ Π·Π°Ρ‚Ρ€Π°Ρ‚Ρ‹ ΡΠ½ΠΈΠΆΠ°ΡŽΡ‚ΡΡ;
  • Благодаря ΠΏΠ΅Ρ€Π΅ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½ΠΈΡŽ ΠΊΠΎΠ΄Π° стало Π³ΠΎΡ€Π°Π·Π΄ΠΎ ΠΏΡ€ΠΎΡ‰Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ прилоТСния. Код, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹Π» написан Π²ΠΎ врСмя создания сайта, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ снова использован для создания мобильного прилоТСния. Если Π²Ρ‹ ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ сайт, Π½ΠΎ ΠΈ мобильноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π½Π΅Ρ‚ нСобходимости Π½Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ Π΄Π²Π΅ большиС ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ².

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ рассмотрим, Π·Π° счСт Ρ‡Π΅Π³ΠΎ Π΄ΠΎΡΡ‚ΠΈΠ³Π°ΡŽΡ‚ΡΡ Π²Ρ‹ΡˆΠ΅ΠΎΠΏΠΈΡΠ°Π½Π½Ρ‹Π΅ Π²Ρ‹Π³ΠΎΠ΄Ρ‹. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΠΎΠ΄Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠΈ Π±ΡƒΠ΄Π΅Ρ‚ нСдостаточно, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ всС возмоТности Π΄Π°Π½Π½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ. Но ΠΌΡ‹ сконцСнтрируСмся Π½Π° самых Π²Π°ΠΆΠ½Ρ‹Ρ… ΠΈΠ· Π½ΠΈΡ… Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΌΠΎΠ³ΡƒΡ‚ Π»ΠΈ React Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Ρ€Π΅ΡˆΠ°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ:

  1. Π£Π»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΎΠΏΡ‹Ρ‚Π° Π²Π°ΡˆΠΈΡ… сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ
  2. УвСличСния скорости Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ
  3. Использования Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Ρ‚Ρ€Π΅Π½Π΄ΠΎΠ²Ρ‹Ρ… Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ

Π˜Π·ΠΎΠΌΠΎΡ€Ρ„Π½Ρ‹Π΅ прилоТСния. ΠŸΠΎΠΉΠΌΠ°Ρ‚ΡŒ Π΄Π²ΡƒΡ… Π·Π°ΠΉΡ†Π΅Π²

Когда ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎΠ± ΠΈΠ·ΠΎΠΌΠΎΡ€Ρ„Π½Ρ‹Ρ… прилоТСниях ΠΈΠ»ΠΈ ΠΎΠ± ΠΈΠ·ΠΎΠΌΠΎΡ€Ρ„Π½ΠΎΠΌ JavaScript, ΠΌΡ‹ ΠΈΠΌΠ΅Π΅ΠΌ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ ΠΊΠΎΠ΄ ΠΊΠ°ΠΊ Π² сСрвСрной, Ρ‚Π°ΠΊ ΠΈ Π² клиСнтской части прилоТСния. Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ сайт Π² своСм Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, содСрТимоС страницы Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½ΠΎ с сСрвСра. Π’ случаС с SPA-прилоТСниями (Single Page Application), это ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Π½ΡΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ врСмя. Π’ΠΎ врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ видят Π»ΠΈΠ±ΠΎ ΠΏΡƒΡΡ‚ΡƒΡŽ страницу, Π»ΠΈΠ±ΠΎ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ. Учитывая, Ρ‡Ρ‚ΠΎ ΠΏΠΎ соврСмСнным стандартам ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΠ΅ Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ Π΄Π²ΡƒΡ… сСкунд ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ вСсьма Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ΠΌ нСудобством для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, сокращСниС Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΊΡ€Π°ΠΉΠ½Π΅ Π²Π°ΠΆΠ½Ρ‹ΠΌ. А Π²ΠΎΡ‚ Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° вСсомая ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°: поисковыС ΠΌΠ°ΡˆΠΈΠ½Ρ‹ Π½Π΅ ΠΈΠ½Π΄Π΅ΠΊΡΠΈΡ€ΡƒΡŽΡ‚ Ρ‚Π°ΠΊΠΈΠ΅ страницы Ρ‚Π°ΠΊ Ρ…ΠΎΡ€ΠΎΡˆΠΎ, ΠΊΠ°ΠΊ Π½Π°ΠΌ Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ Π±Ρ‹. ИсполнСниС JavaScript ΠΊΠΎΠ΄Π° Π½Π° сторонС сСрвСра ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹. Если Π²Ρ‹ создаСтС ΠΈΠ·ΠΎΠΌΠΎΡ€Ρ„Π½Ρ‹Π΅ прилоТСния, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·Π²Π»Π΅Ρ‡ΡŒ Π·Π°ΠΌΠ΅Ρ‚Π½ΡƒΡŽ Π²Ρ‹Π³ΠΎΠ΄Ρƒ, производя Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ Π½Π° сторонС сСрвСра. ПослС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы Π²Ρ‹ всС Π΅Ρ‰Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ‚ΡŒ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². Вакая Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° страниц ΠΊΠ°ΠΊ Π½Π° сСрвСрС, Ρ‚Π°ΠΊ ΠΈ Π½Π° ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π΅ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ΠΌ прСимущСствам, Ρ‚Π°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ индСксирования страниц поисковыми машинами ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΎΠΏΡ‹Ρ‚Π°. Π‘ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΠ³ΠΎ, Ρ‚Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ позволяСт ΡΠ½ΠΈΠ·ΠΈΡ‚ΡŒ врСмя, Π·Π°Ρ‚Ρ€Π°Ρ‡ΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ Π½Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ. ΠŸΡ€ΠΈ использовании Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… соврСмСнных Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ², Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΡ‚ΡŒΡΡ Π½Π° сторонС сСрвСра, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ для клиСнтской стороны прилоТСния. React Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π½Π° ΠΎΠ±Π΅ΠΈΡ… сторонах.

Virtual DOM. ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊ быстрСС

Document Object Model, ΠΈΠ»ΠΈ DOM, β€” это способ прСдставлСния ΠΈ взаимодСйствия с ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌΠΈ Π² HTML, XHTML ΠΈ XML Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ…. Богласно этой ΠΌΠΎΠ΄Π΅Π»ΠΈ, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ‚Π°ΠΊΠΎΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ прСдставляСт собой иСрархичСскоС Π΄Π΅Ρ€Π΅Π²ΠΎ элСмСнтов, Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΠΎΠ΅ DOM-Π΄Π΅Ρ€Π΅Π²ΠΎΠΌ. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ доступ ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ элСмСнтам нашСго Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈΡ… Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ. Когда ΠΌΡ‹ создаСм Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π½ΡƒΡŽ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ Π²Π΅Π±-страницу, ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ DOM обновлялся Ρ‚Π°ΠΊ быстро, ΠΊΠ°ΠΊ это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ послС измСнСния состояния ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ элСмСнта. Для Π΄Π°Π½Π½ΠΎΠΉ Π·Π°Π΄Π°Ρ‡ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΏΡ€ΠΈΠ΅ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ называСтся Β«dirty checkingΒ» ΠΈ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² рСгулярном опросС состояния Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² структурС Π΄Π°Π½Π½Ρ‹Ρ…. Как Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ³Π°Π΄Π°Ρ‚ΡŒΡΡ, подобная Π·Π°Π΄Π°Ρ‡Π° ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‚Π°Ρ‚ΡŒ самой настоящСй Π³ΠΎΠ»ΠΎΠ²Π½ΠΎΠΉ болью Π² случаС высоконагруТСнных ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Virtual DOM, Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, хранится Π² памяти. ИмСнно поэтому Π² ΠΌΠΎΠΌΠ΅Π½Ρ‚, ΠΊΠΎΠ³Π΄Π° «настоящий» DOM мСняСтся, React ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Virtual DOM Π² ΠΌΠ³Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ ΠΎΠΊΠ°. React «собираСт» Ρ‚Π°ΠΊΠΈΠ΅ измСнСния сравниваСт ΠΈΡ… с состояниСм DOM, Π° Π·Π°Ρ‚Π΅ΠΌ пСрСрисовываСт измСнившиСся ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹.

ΠŸΡ€ΠΈ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π΅ Π²Ρ‹ Π½Π΅ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅ рСгулярноС ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ DOM. ИмСнно поэтому ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ достигнута Π±ΠΎΠ»Π΅Π΅ высокая ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ React ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Ρ‚ΠΎΡ€ΠΎΠ΅ слСдствиС Π²Ρ‹Ρ‚Π΅ΠΊΠ°Π΅Ρ‚ ΠΈΠ· ΠΈΠ·ΠΎΠΌΠΎΡ€Ρ„Π½ΠΎΠΉ ΠΏΡ€ΠΈΡ€ΠΎΠ΄Ρ‹ React: Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ Π½Π° сторонС сСрвСра совсСм ΠΊΠ°ΠΊ Π½Π° сторонС ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°.

Как ΠΏΠ΅Ρ€Π΅ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ прилоТСния Π±ΠΎΠ»Π΅Π΅ эффСктивно

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ прилоТСния ΠΈΠΌΠ΅ΡŽΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ прСимущСства ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с сайтами. Π˜Ρ… ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±Π΅Π· соСдинСния с Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚ΠΎΠΌ. Они ΠΈΠΌΠ΅ΡŽΡ‚ доступ ΠΊ Ρ‚Π°ΠΊΠΈΠΌ возмоТностям устройства, ΠΊΠ°ΠΊ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ увСдомлСния. Π’Π°ΠΊΠΆΠ΅ ΠΎΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π±Ρ‹Ρ‚ΡŒ Π² ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅ с вашими ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌΠΈ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ 24/7. React Native β€” это Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ прилоТСния, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ React. Π›ΠΎΠ³ΠΈΠΊΠ° прилоТСния ΠΏΠΈΡˆΠ΅Ρ‚ΡΡ Π½Π° JavaScript, Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, программисту Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠ΅ΠΌΠΎΠ² Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°. ВсС Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ β€” Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ ΠΏΠΈΡΠ°Ρ‚ΡŒ спСцифичный для устройства ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, Ρ€Π°Π½Π΅Π΅ созданныС для Π²Π΅Π±-сайта ΠΊ Π½ΠΎΠ²ΠΎΠΉ срСдС обитания.

Если ΠΌΡ‹ сравним Π·Π°Ρ‚Ρ€Π°Ρ‚Ρ‹ Π½Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ Ρ€Π°Π·Π½Ρ‹Ρ… Π²ΠΈΠ΄ΠΎΠ² ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹:

  • Π’ случаС с Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ прилоТСниями Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Π΄Π΅ΡΡ‚ΡŒΡΡ Π½Π° довольно Π²Ρ‹ΡΠΎΠΊΡƒΡŽ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ, Π½ΠΎ ΡΡ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π±ΡƒΠ΄Π΅Ρ‚ довольно высокой;
  • Если Π²Ρ‹ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚Π΅Ρ‚Π΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ HTML5, CSS3 ΠΈ JavaScript, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ PhoneGap, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ½ΠΈΠ·ΠΈΡ‚ΡŒ ΡΡ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ. Но Π² этом случаС ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΠ΅Ρ‚Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π½ΠΈΠΆΠ΅;
  • Π’ случаС React Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΡΡ‚ΠΈΠ³Π½ΡƒΡ‚ΡŒ уровня ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, сравнимого с Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ прилоТСниями. ΠŸΡ€ΠΈ этом ΡΡ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ сравнима с ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ.

Если Π²Ρ‹ ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π½Π΅ Π²ΠΏΠΎΠ»Π½Π΅ ΡƒΠ²Π΅Ρ€Π΅Π½Ρ‹, Π±ΡƒΠ΄Π΅Ρ‚ Π»ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° мобильной вСрсии этого ΠΆΠ΅ прилоТСния Ρ…ΠΎΡ€ΠΎΡˆΠ΅ΠΉ ΠΈΠ΄Π΅Π΅ΠΉ, Π²ΠΎΡ‚ Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ. React Native позволяСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡƒΠΆΠ΅ ΠΈΠΌΠ΅ΡŽΡ‰ΡƒΡŽΡΡ Π»ΠΎΠ³ΠΈΠΊΡƒ Π²Π΅Π±-прилоТСния ΠΏΡ€ΠΈ создании мобильного прилоТСния. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠΌΠ°Π½Π΄Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‚ ΠΆΠ΅ ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹Π» использован Π² процСссС создания сайта вмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒ с чистого листа.

Помимо Π±ΠΎΠ»Π΅Π΅ быстрой Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, ΠΏΠ΅Ρ€Π΅ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° позволяСт ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ большого количСства ошибок. Если Π²Ρ‹ создаСтС Ρ…ΠΎΡ€ΠΎΡˆΠΎ спроСктированныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°Ρ‚Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ снова, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΈΡΠ°Ρ‚ΡŒ мСньшС ΠΊΠΎΠ΄Π°, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Ρ€Π΅ΡˆΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ с ΠΈΡ… ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½ΠΎΠ²Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс. Π§Π΅ΠΌ мСньшС Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, Ρ‚Π΅ΠΌ мСньшС Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ возникновСния Π½ΠΎΠ²Ρ‹Ρ… ошибок. К Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅, Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅ ваши ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹. Π’Ρ‹ ΡƒΠΆΠ΅ использовали ΠΈ тСстировали ΠΈΡ… ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ Π½Π°Π΄ Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ, Π° Π·Π½Π°Ρ‡ΠΈΡ‚ ΠΏΡ€ΠΈ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΠΎΠ²Π΅Π½ΠΈΠΈ ошибок смоТСтС ΠΏΡ€Π΅Π΄ΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρƒ ΠΈΡ… появлСния.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π½ΠΎ-ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ с Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒΡŽ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠ΅ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‰Π°ΡŽΡ‚ React Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ Π² Π½Π΅ΠΏΡ€Π΅Ρ€Ρ‹Π²Π½Ρ‹ΠΉ процСсс ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ. ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±Ρ‹Π»ΠΈ созданы Π²ΠΎ врСмя Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ Ρ‚Π΅ΠΌ ΠΈΠ»ΠΈ ΠΈΠ½Ρ‹ΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ, Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… зависимостСй. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π½ΠΈΡ‡Ρ‚ΠΎ Π½Π΅ ΠΌΠ΅ΡˆΠ°Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… снова ΠΈ снова Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ… Ρ€Π°Π·Π½ΠΎΠ³ΠΎ Ρ‚ΠΈΠΏΠ°. Π’Π΅ΡΡŒ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΉ ΠΎΠΏΡ‹Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ с Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒΡŽ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ Π½Π°Π΄ Π½ΠΎΠ²Ρ‹ΠΌ сайтом ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ ΠΏΡ€ΠΈ создании мобильного прилоТСния. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΠ΅Ρ€Π΅Π΄ΠΎΠ²Ρ‹Π΅ возмоТности, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Virtual DOM ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠΌΠΎΡ€Ρ„Π½Ρ‹ΠΉ JavaScript, React Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ с высокой ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒΡŽ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π²Ρ‹ΡΠΎΠΊΠΎΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ прилоТСния, нСсмотря Π½Π° ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ ΠΈΡ… слоТности. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ с Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒΡŽ Π·Π°Π½ΠΎΠ²ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡƒΠΆΠ΅ ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠΉΡΡ ΠΊΠΎΠ΄ ΠΏΠΎΠ²Ρ‹ΡˆΠ°Π΅Ρ‚ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ процСсс тСстирования, ΠΈ, ΠΊΠ°ΠΊ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚, ΠΏΠΎΠ½ΠΈΠΆΠ°Π΅Ρ‚ Π·Π°Ρ‚Ρ€Π°Ρ‚Ρ‹. Π’ΠΎΡ‚ Ρ„Π°ΠΊΡ‚, Ρ‡Ρ‚ΠΎ эта Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° разрабатываСтся ΠΈ поддСрТиваСтся высококвалифицированными Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ ΠΈ Π½Π°Π±ΠΈΡ€Π°Π΅Ρ‚ всС Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ ΠΏΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΡΡ‚ΡŒ с ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ Π³ΠΎΠ΄ΠΎΠΌ, Π΄Π°Π΅Ρ‚ основания Π½Π°Π΄Π΅ΡΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ тСндСнция ΠΊ дальнСйшим ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡΠΌ продолТится.

ΠžΠ±ΡŠΡΠ²ΡΠ½ΠΈΡ‚Π΅, Π·Π°Ρ‡Π΅ΠΌ Π½ΡƒΠΆΠ½Ρ‹ React, Angular ΠΈ Vue.js?

Π§Ρ‚ΠΎ-Ρ‚ΠΎ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΠΏΠΎΠΉΠΌΡƒ, Π·Π°Ρ‡Π΅ΠΌ всё это Π½ΡƒΠΆΠ½ΠΎ. ΠœΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ сайта (ΠΈΠ»ΠΈ Π΅Π³ΠΎ части) Π³Π΄Π΅ Π±Π΅Π· этого всСго Π½Ρƒ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½ΠΈΠΊΠ°ΠΊ? Пока Ρ‡Ρ‚ΠΎ понял, Ρ‡Ρ‚ΠΎ Ρ‡Π΅Ρ€Π΅Π· эти Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² html. Но Π·Π°Ρ‡Π΅ΠΌ?

ΠžΠ±ΡŠΡΠ²ΡΠ½ΠΈΡ‚Π΅, Π·Π°Ρ‡Π΅ΠΌ Π½ΡƒΠΆΠ½Ρ‹ Π°Π²Ρ‚ΠΎΠΌΠΎΠ±ΠΈΠ»ΠΈ?

Π§Ρ‚ΠΎ-Ρ‚ΠΎ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΠΏΠΎΠΉΠΌΡƒ, Π·Π°Ρ‡Π΅ΠΌ всё это Π½ΡƒΠΆΠ½ΠΎ. ΠœΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ€Π΅Π³ΠΈΠΎΠ½Π° (ΠΈΠ»ΠΈ Π΅Π³ΠΎ части) Π³Π΄Π΅ Π±Π΅Π· этого всСго Π½Ρƒ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½ΠΈΠΊΠ°ΠΊ? Пока Ρ‡Ρ‚ΠΎ понял, Ρ‡Ρ‚ΠΎ Ρ‡Π΅Ρ€Π΅Π· эти ΡˆΡ‚ΡƒΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΏΠΎ Π΄ΠΎΡ€ΠΎΠ³Π°ΠΌ. Но Π·Π°Ρ‡Π΅ΠΌ?

По сабТу: ΠΎΠ½ΠΈ Π½ΡƒΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Π½Π½ΠΎ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² html.

ΠžΠ±ΡŠΡΠ²ΡΠ½ΠΈΡ‚Π΅, Π·Π°Ρ‡Π΅ΠΌ Π½ΡƒΠΆΠ½Ρ‹ Π°Π²Ρ‚ΠΎΠΌΠΎΠ±ΠΈΠ»ΠΈ?

Ну Π² Π³ΠΎΡ€ΠΎΠ΄Π°Ρ…, Π³Π΄Π΅ Π΅ΡΡ‚ΡŒ ΠΌΠ΅Ρ‚Ρ€ΠΎ, ΠΌΠ½Π΅ Ρ‚ΠΎΠΆΠ΅ Π½Π΅ ясно, Π·Π°Ρ‡Π΅ΠΌ Π½ΡƒΠΆΠ½Ρ‹ Π°Π²Ρ‚ΠΎΠΌΠΎΠ±ΠΈΠ»ΠΈ (Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Ρƒ людСй).

Π’Ρ‹ ΠΏΡ€Π°Π². А Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ сайтов ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π·Π°ΠΌΠ΅Π½Π΅Π½ΠΎ ΠΏΠ°Π±Π»ΠΈΠΊΠ°ΠΌΠΈ Π²ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅.

НС, Π½Ρƒ я ΠΆ Π½Π΅ Π³ΠΎΠ²ΠΎΡ€ΡŽ, Ρ‡Ρ‚ΠΎ всС эти Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Π½Π΅ Π½ΡƒΠΆΠ½Ρ‹. Наоборот Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ Π±Ρ‹ ΠΎΡΠ²ΠΎΠΈΡ‚ΡŒ. ΠŸΡ€ΠΎΡΡ‚ΠΎ я Π½Π΅ Π²Ρ€ΡƒΠ±Π°ΡŽΡΡŒ, Π·Π°Ρ‡Π΅ΠΌ Ρ‡Π΅Ρ€Π΅Π· js Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² html, Ссли ΠΎΠ½ Π½Π΅ с сСрвСра ΠΏΡ€ΠΈΡˆΠ΅Π».

Π Π΅Π½Π΄Π΅Ρ€ΠΈΡ‚ΡŒ Π½Π° сторонС сСрвСра β€” довольно Ρ‚Π°ΠΊΠΈ Π·Π°Ρ‚Ρ€Π°Ρ‚Π½ΠΎ.

ΠŸΡ€ΠΎΡΡ‚ΠΎ я Π½Π΅ Π²Ρ€ΡƒΠ±Π°ΡŽΡΡŒ, Π·Π°Ρ‡Π΅ΠΌ Ρ‡Π΅Ρ€Π΅Π· js Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² html, Ссли ΠΎΠ½ Π½Π΅ с сСрвСра ΠΏΡ€ΠΈΡˆΠ΅Π».

Π’ΠΎΡ‚ Π½Π°ΠΆΠ°Π» ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΊΠ½ΠΎΠΏΠΎΡ‡ΠΊΡƒ Β«ΡΠΊΡ€Ρ‹Ρ‚ΡŒ мСню». Π’Ρ‹ Π΅Π³ΠΎ скрыл. Π‘Π΅Π· всякого взаимодСйствия с сСрвСром. РСшил ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π·Π°Π»Π΅Π·Ρ‚ΡŒ Π² мСню, Π½Π°ΠΆΠ°Π» ΠΎΠΏΡΡ‚ΡŒ Π½Π° ΠΊΠ½ΠΎΠΏΠΎΡ‡ΠΊΡƒ, Ρ‚Ρ‹ мСню ΠΏΠΎΠΊΠ°Π·Π°Π». Π‘Π΅Π· всяких ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½Ρ‹Ρ… запросов. Π’ΠΎΡ‚ Π·Π°Ρ‚Π΅ΠΌ ΠΈ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΡ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· js, Ρ‡Ρ‚ΠΎΠ±Ρ‹ страница Π½Π° дСйствия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Π»Π°.

Π’Ρ‹ ΠΏΡ€Π°Π². А Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ сайтов ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π·Π°ΠΌΠ΅Π½Π΅Π½ΠΎ ΠΏΠ°Π±Π»ΠΈΠΊΠ°ΠΌΠΈ Π²ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅.

А Ρ‚Π°ΠΊ скоро ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ Π² Π§Π΅Π±ΡƒΡ€Π½Π΅Ρ‚Π΅.

Π’ΠΎΡ‚ Π½Π°ΠΆΠ°Π» ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΊΠ½ΠΎΠΏΠΎΡ‡ΠΊΡƒ Β«ΡΠΊΡ€Ρ‹Ρ‚ΡŒ мСню». Π’Ρ‹ Π΅Π³ΠΎ скрыл. Π‘Π΅Π· всякого взаимодСйствия с сСрвСром. РСшил ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π·Π°Π»Π΅Π·Ρ‚ΡŒ Π² мСню, Π½Π°ΠΆΠ°Π» ΠΎΠΏΡΡ‚ΡŒ Π½Π° ΠΊΠ½ΠΎΠΏΠΎΡ‡ΠΊΡƒ, Ρ‚Ρ‹ мСню ΠΏΠΎΠΊΠ°Π·Π°Π». Π‘Π΅Π· всяких ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½Ρ‹Ρ… запросов. Π’ΠΎΡ‚ Π·Π°Ρ‚Π΅ΠΌ ΠΈ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΡ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· js, Ρ‡Ρ‚ΠΎΠ±Ρ‹ страница Π½Π° дСйствия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Π»Π°.

Π­Ρ‚ΠΎ всё дСлаСтся Π½Π° HTML ΠΈ CSS. Π‘Π΅Π· дТаваскриптов Π²ΠΎΠ±Ρ‰Π΅. Или я тСбя Π½Π΅ Ρ‚Π°ΠΊ понял.

Ну Π² самом простом случаС β€” дСлаСшь ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«ΡΠΊΡ€Ρ‹Ρ‚ΡŒ мСню» ΠΈΠ· Ρ‚Π΅Π³Π° A, Π² Π½Π΅Π³ΠΎ Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π΅ΡˆΡŒ список-мСню ΠΈΠ· Ρ‚Π΅Π³ΠΎΠ² UL/LI. Π’ css пишСшь:

МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ чСкбокс ΠΈ :checked, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€. Масса Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ².

Π― Π½Π΅ Ρ„ΠΎΡ€Π½Ρ‚Π΅Π½Π΄ Π΄Π΅Π²Π΅Π»ΠΎΠΏΠ΅Ρ€ Π½ΠΎ ΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π» React. Волько ΠΎΠ΄ΠΈΠ½ кСйс ΠΎΡ‚ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄Π°Π»Π΅ΠΊ ΠΎΡ‚ js. Π£ мСня Π±Ρ‹Π»Π° модСль (динамичСски ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΆΠ°Π΅ΠΌΡ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅), Π΅Ρ‘ Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ Π²ΠΎ view Π² Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅, ΠΊΠ°ΠΊ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ? Π’ Π½Π°Ρ‡Π°Π»Π΅ я ΠΏΠΎΠ΄ΡƒΠΌΠ°Π» ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ свой вСлосипСд для Π±ΠΈΠ½Π΄ΠΈΠ½Π³Π° Π΄Π°Π½Π½Ρ‹Ρ… Π² dom Π΄Π΅Ρ€Π΅Π²Π΅, Π½ΠΎ быстро нашСл knockoutjs. ВсС Π² Π½Π΅ΠΌ Π±Ρ‹Π»ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ, ΠΊΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ html ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ структуры Π΄Π°Π½Π½Ρ‹Ρ…. ReactJS ΠΌΠ½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ» ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π½ΡƒΡŽ Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΡŽ view ΠΎΡ‚ ΠΌΠΎΠ΄Π΅Π»ΠΈ.

Π­Ρ‚ΠΎ Π½Π΅ Π³ΠΈΠ±ΠΊΠΎ ΠΈ Π½Π΅ сСмантично.

ВсС Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹Π΅ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΈ Ρ‚Π°ΠΊ Π΄Π΅Π»Π°ΡŽΡ‚.

Π­Ρ‚ΠΎ Π½Π΅ Π³ΠΈΠ±ΠΊΠΎ ΠΈ Π½Π΅ сСмантично.

ΠžΡ…, ΠΏΠΎΠΆΠ΅Ρ‡ΠΊΠΈ Ρ‚Ρ‹ ΠΌΠΎΠΉ, Π½Ρƒ.

Π― ΠΏΡ€ΠΎ всю массу Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ², Π° Π½Π΅ ΠΏΡ€ΠΎ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ. ВсСравно Ρ‡ΠΈΡ‚Π΅Ρ€ ))

Всё ΠΌΠΎΠΆΠ½ΠΎ ΠΈ Π±Π΅Π· Π½ΠΈΡ…, я Π΄Π°ΠΆΠ΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ Π²Π½Π°Ρ‡Π°Π»Π΅ Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Π΄Π΅Π»Π°Ρ‚ΡŒ всё ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ, Π° ΠΏΠΎΡ‚ΠΎΠΌ Ρ‚Ρ‹ ΠΈ сам поймСшь Π·Π°Ρ‡Π΅ΠΌ всё это.

Π’ΡƒΡ‚ стоит ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ простоС ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ: Ссли Π²Π°ΠΌ Π½Π΅ понятно, Π·Π°Ρ‡Π΅ΠΌ это Π½ΡƒΠΆΠ½ΠΎ, β€” Π·Π½Π°Ρ‡ΠΈΡ‚ ΠΎΠ½ΠΎ Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ.

Π’ΠΎΠ±Ρ‰Π΅ΠΌ, ΠΎ Ρ‡Ρ‘ΠΌ это я. МСню (Π² Ρ‚ΠΎΠΌ числС ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ΅) строится Π½Π° html/css. НС смотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ я ΠΏΠ°Ρ€Ρƒ Π»Π΅Ρ‚ ΠΊΠ°ΠΊ ΠΎΡΠ½ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΈΡˆΡƒ чисто Π½Π° js, этого Ρ„Π°ΠΊΡ‚Π° ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚ΡŒ Π½Π΅ ΠΌΠΎΠ³Ρƒ. А бСрутся ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню ΠΎΡ‚ΠΊΡƒΠ΄Π°? Π›ΠΈΠ±ΠΎ Π·Π°Π΄Π°Π½Ρ‹ Тёстко Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΎΠΉ Π² ΠΏΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠ΅ΠΌ случаС, Π»ΠΈΠ±ΠΎ Π΄Ρ‘Ρ€Π³Π°ΡŽΡ‚ΡΡ ΠΈΠ· Π±Π°Π·Ρ‹ Π΄Π°Π½Π½Ρ‹Ρ… с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ (Π’ΠΠ”ΠΠœ!) сСрвСрных ЯП. Π― Π»ΠΈΡ‡Π½ΠΎ Π½Π΅ Π²ΠΈΠΆΡƒ смысла Π΄Ρ‘Ρ€Π³Π°Ρ‚ΡŒ ΠΈΠ· Π‘Π” Π΄Π°Π½Π½Ρ‹Π΅, скаТСм, Π½Π° PHP, Π³Π΅Π½Π΅Ρ€ΠΈΡ‚ΡŒ ΠΈΠ· Π½ΠΈΡ… JSON, ΠΎΡ‚Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρƒ, Π½Π° ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JS ΠΈΠ· JSON Π³Π΅Π½Π΅Ρ€ΠΈΡ‚ΡŒ HTML с Ρ‚ΠΎΠΉ ΠΆΠ΅ подвязкой ΠΈΠ· CSS, ΠΊΠΎΠ³Π΄Π° ΠΌΠΎΠΆΠ½ΠΎ минуя JS/JSON сразу ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ Π½Π° сторонС сСрвСра Π½Π° PHP ΠΈ (sic!) Π·Π°ΠΊΠ΅ΡˆΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Ρ‘.

Ну Π° Ρ‚ΡƒΡ‚ я с Ρ‚ΠΎΠ±ΠΎΠΉ согласСн Π½Π° всС 146%.

Π₯отя ΠΌΠ½Π΅ Π²ΠΎΡ‚ Π½Π΅Π΄Π°Π²Π½ΠΎ ΠΏΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΈΠ»Π΅Ρ‚Π΅Π»ΠΎ β€” Π·Π°ΠΏΠΈΠ»ΠΈΠ²Π°Ρ‚ΡŒ Π½Π° vue. Π₯отя Ρ€Π°Π΄ΡƒΠ΅Ρ‚ Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ SPA, Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π°ΠΌ, Π³Π΄Π΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ красиво/ΡƒΠ΄ΠΎΠ±Π½ΠΎ Π·Π°ΠΏΠΈΠ»ΠΈΡ‚ΡŒ, Ρ‚.Π΅. Π½Π΅ ΠΏΠ΅Ρ€Π΅Π³ΠΈΠ±Π°Ρ‚ΡŒ ΠΈ Π½Π΅ ΡƒΠ΄Π°Ρ€ΡΡ‚ΡŒΡΡ Π² крайности.

Π’ΡƒΡ‚ стоит ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ простоС ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ: Ссли Π²Π°ΠΌ Π½Π΅ понятно, Π·Π°Ρ‡Π΅ΠΌ это Π½ΡƒΠΆΠ½ΠΎ, β€” Π·Π½Π°Ρ‡ΠΈΡ‚ ΠΎΠ½ΠΎ Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ.

Π­Ρ‚ΠΈ ваши фротэнд Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ ΠΆΡ€ΡƒΡ‚ ΠΏΠ°ΠΌΡΡ‚ΡŒ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°, быстрСС Ρ‡Π΅ΠΌ Π³ΠΎΠ»ΠΎΠ΄Π½Ρ‹Π΅ свиньи ΠΎΠ±Π³Π»Π°Π΄Ρ‹Π²Π°ΡŽΡ‚ чСловСчСский Ρ‚Ρ€ΡƒΠΏ. А ΠΎΡ‚ колстэков Π² случаС эксСпшона Π³Π΄Π΅-Ρ‚ΠΎ Π² Π½Π΅Π΄Ρ€Π°Ρ… Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°, ΠΏΠ»Π°Ρ‡Π΅Ρ‚ сам Π‘Π°Ρ‚Π°Π½Π°. И Ρ‚Ρ‹ Π½Π΅ ΠΏΠΎΠΏΡ€ΠΎΡΠΈΡˆΡŒ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π° ΠΏΡ€ΠΈΡΠ»Π°Ρ‚ΡŒ Ρ‚Π΅Π±Π΅ ΠΎΡ‚Ρ‡Ρ‘Ρ‚ ΠΎ ΠΏΠ°Π΄Π΅Π½ΠΈΠΈ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ выглядит Π±ΡƒΠ΄Ρ‚ΠΎ посланиС ΠΈΠ· Π΄Π°Π»Ρ‘ΠΊΠΎΠΉ Π³Π°Π»Π°ΠΊΡ‚ΠΈΠΊΠΈ, вСдь Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ ΠΌΠΈΠ½ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Π½ Π½Π° ΠΏΡ€ΠΎΠ΄Π°ΠΊΡˆΠ΅Π½Π΅ ΠΈ ΠΈΠΌΠ΅Π½Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² выглядят, соотвСтствСнно, Π²Ρ‹Ρ€Π²ΠΈΠ³Π»Π°Π·Π½ΠΎ ΠΈ Π½Π΅ нСсут ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠ²Π½ΠΎΠΉ Π½Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ.

КаТдой Π·Π°Π΄Π°Ρ‡Π΅ своС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅. Π’ΠΎΡ‚ многостраничный список, Ρ€Π°Π·Π±ΠΈΡ‚Ρ‹ΠΉ ΠΏΠΎ 50 записСй Π½Π° страницу β€” Π»ΠΈΠ±ΠΎ Π΄Π΅Ρ€Π³Π°Ρ‚ΡŒ сСрвСр Π½Π° Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΡŽ всСй страницы, Π»ΠΈΠ±ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° ΠΎΡ‚Π΄Π°Ρ‡Ρƒ JSON. Π’Ρ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠ΅Π½Π΅Π΅ Π·Π°Ρ‚Ρ€Π°Ρ‚Π½ΠΎ. Но ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΈ Π·Π° ΠΈ ΠΏΡ€ΠΎΡ‚ΠΈΠ² Π²ΠΎΠΎΠ±Ρ‰Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ.

Π’Ρ‹ Ρ‚Π°ΠΊ ΠΆΠ΅ Π»Π΅Π³ΠΊΠΎ моТСшь ΠΊΠ΅ΡˆΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ эту постраничку постранично.

Π’Ρ‹ сравнил ΠΊΠΎΡΡ‚Ρ‹Π»ΡŒΠ½ΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ хипстСры ΠΏΠΎ Π΄Π²Π΅ Π½Π΅Π΄Π΅Π»ΠΈ Π΄Π΅Π»Π°ΡŽΡ‚ Ρ„ΠΎΡ€ΠΌΠΎΡ‡ΠΊΡƒ Π½Π° 5 ΠΈΠ½ΠΏΡƒΡ‚ΠΎΠ² с Π°Π²Ρ‚ΠΎΠΌΠΎΠ±ΠΈΠ»Π΅ΠΌ? Однако.

КаТдой Π·Π°Π΄Π°Ρ‡Π΅ своС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅. Π’ΠΎΡ‚ многостраничный список, Ρ€Π°Π·Π±ΠΈΡ‚Ρ‹ΠΉ ΠΏΠΎ 50 записСй Π½Π° страницу β€” Π»ΠΈΠ±ΠΎ Π΄Π΅Ρ€Π³Π°Ρ‚ΡŒ сСрвСр Π½Π° Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΡŽ всСй страницы, Π»ΠΈΠ±ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° ΠΎΡ‚Π΄Π°Ρ‡Ρƒ JSON. Π’Ρ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠ΅Π½Π΅Π΅ Π·Π°Ρ‚Ρ€Π°Ρ‚Π½ΠΎ. Но ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΈ Π·Π° ΠΈ ΠΏΡ€ΠΎΡ‚ΠΈΠ² Π²ΠΎΠΎΠ±Ρ‰Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ.

Π”Π°, Ρ‚ΡƒΡ‚, согласСн, Π½Π΅ Π½Π°Π΄ΠΎ всё мСню сразу Π²Ρ‹Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρƒ, ΠΈ ΠΏΠ΅Ρ€Π΅Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ страницу β€” Ρ‚ΠΎΠΆΠ΅ Π½Π΅ Π½Π°Π΄ΠΎ. Π’ Π΄Π°Π»Ρ‘ΠΊΠΎΠΌ ΠΌΠΎΡ…Π½Π°Ρ‚ΠΎΠΌ Π³ΠΎΠ΄Ρƒ для ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… Π·Π°Π΄Π°Ρ‡ ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Π»ΠΈ AJAX, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎ сСй дСнь прСкрасно с Π½Π΅ΠΉ справляСтся ΠΈ ΠΏΠ°Ρ€ΡΠΈΡ‚ΡŒ JSON ΠΈΠ· строки Π² Π΄Π΅Ρ€Π΅Π²ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ²/массивов Π΄Π°Π²Π½ΠΎ Π½Π°ΡƒΡ‡ΠΈΠ»ΠΈΡΡŒ всС соврСмСнныС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹. ΠžΡΡ‚Π°Ρ‘Ρ‚ΡΡ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΡƒΡŽ Ρ€Π΅ΠΊΡƒΡ€ΡΠΈΠ²Π½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, которая ΠΎΡ‚ ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠ³ΠΎ UL ΠΏΡ€ΠΎΠΉΠ΄Ρ‘Ρ‚ ΠΏΠΎ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΌ ΠΈ Π² соотвСтствии с JSON Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ ΠΈΡ… Ρ‚Π΅Π³Π°ΠΌΠΈ LI с содСрТимым. Но это всё Π½Π΅ тянСт для использованиС монстра Ρ‚ΠΈΠΏΠ° Angular ΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ…. Π­Ρ‚ΠΎ Π½Π° Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π΄Π°ΠΆΠ΅ jQuery ΡƒΠΆΠ΅ Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚.

Π–ΠΈΠ·Π½ΡŒ кСша ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‚Π°Ρ‚ΡŒ слишком ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠΉ, Ссли Π΄Π°Π½Π½Ρ‹Π΅ часто ΠΈΠ·ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ.

Π­Ρ‚ΠΎ всё дСлаСтся Π½Π° HTML ΠΈ CSS. Π‘Π΅Π· дТаваскриптов Π²ΠΎΠ±Ρ‰Π΅.

МоТно ΠΏΠΎΡˆΠ°ΠΌΠ°Π½ΠΈΡ‚ΡŒ с CSS ΠΈ HTML, ΠΌΠΎΠΆΠ½ΠΎ бэкэнд Π½Π° крСстах Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ. МоТно ΠΌΠ½ΠΎΠ³ΠΎ Ρ‡Π΅Π³ΠΎ Ρ€ΡƒΠΊΠ°ΠΌΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ. Но Π½Π° vue это Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‰Π΅.

РазумССтся, Ρ€Π°Π΄ΠΈ ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ скрытия мСню, Ρ‚Π°Ρ‰ΠΈΡ‚ΡŒ ΠΆΠΈΡ€Π½ΡƒΡŽ Π»ΠΈΠ±Ρƒ Π½Π΅Ρ‚ смысла. Но Ссли Ρ‚Π΅Π±Π΅ Π½ΡƒΠΆΠ½ΠΎ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ скрытиС мСню, Π° Π΅Ρ‰Ρ‘ Ρ‡Ρ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ ΠΈΠ· 100500 Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ², Ρ‚ΠΎ ΠΊΠΎΠ»Π±Π°ΡΠΈΡ‚ΡŒ это всё Ρ€ΡƒΠΊΠ°ΠΌΠΈ Π½Π΅Ρ‚ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ смысла.

ΠΊΠΎΠ³Π΄Π° ΠΌΠΎΠΆΠ½ΠΎ минуя JS/JSON сразу ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ Π½Π° сторонС сСрвСра Π½Π° PHP ΠΈ (sic!) Π·Π°ΠΊΠ΅ΡˆΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Ρ‘.

И, ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ vue, этому Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΠΌΠ΅ΡˆΠ°Π΅Ρ‚.

И, ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ vue, этому Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΠΌΠ΅ΡˆΠ°Π΅Ρ‚.

МодСль-Π’ΠΈΠ΄-ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€, МодСль-Π’ΠΈΠ΄-ΠœΠΎΠ΄Π΅Π»ΡŒΠ’ΠΈΠ΄Π°, МодСль-Π’ΠΈΠ΄-ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚Π΅Π»ΡŒ, активная модСль, пассивная модСль, пассивный Π²ΠΈΠ΄, ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€-супСрвизор. чСтырёхклятаяфигня. ΠΌΠ½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π°Π΄ΠΎ, Π° Π½Π΅ Π² сортах ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ΠΎΠ² Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒΡΡ. Π•ΡΡ‚ΡŒ нСкоторая Π³Ρ€Π°Π½ΡŒ, пСрСходя Ρ‡Π΅Ρ€Π΅Π· ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Ρ‚Ρ‹ ΠΏΠ΅Ρ€Π΅ΡΡ‚Π°Ρ‘ΡˆΡŒ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄ для людСй, Π° Π½Π°Ρ‡ΠΈΠ½Π°Π΅ΡˆΡŒ Π±ΠΈΡ‚ΡŒ ΠΌΠΎΡ€Π΄Ρ‹ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Ρƒ Π² ΠΊΡƒΡ€ΠΈΠ»ΠΊΠ΅ Π·Π° поклонСния Ρ€Π°Π·Π½Ρ‹ΠΌ шаблонам проСктирования.

Π― сравнил Π³Ρ€ΠΎΠ± Π½Π° Ρ‡Π΅Ρ‚Ρ‹Ρ€Ρ‘Ρ… колёсах, ΠΏΠΎΠ΄ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ хипстСры Π»Π΅ΠΆΠ°Ρ‚ ΠΏΠΎ Π΄Π²Π΅ Π½Π΅Π΄Π΅Π»ΠΈ, Π½Π΅ вылСзая ΠΈΠ· Π³Π°Ρ€Π°ΠΆΠ° с Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠΌ. Π”Π°.

ΠΌΠ½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π°Π΄ΠΎ, Π° Π½Π΅ Π² сортах ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ΠΎΠ² Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒΡΡ.

И Ρ‡Ρ‚ΠΎ Ρ‚Π΅Π±Π΅ ΠΌΠ΅ΡˆΠ°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ?

Π•ΡΡ‚ΡŒ нСкоторая Π³Ρ€Π°Π½ΡŒ, пСрСходя Ρ‡Π΅Ρ€Π΅Π· ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Ρ‚Ρ‹ ΠΏΠ΅Ρ€Π΅ΡΡ‚Π°Ρ‘ΡˆΡŒ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄ для людСй, Π° Π½Π°Ρ‡ΠΈΠ½Π°Π΅ΡˆΡŒ Π±ΠΈΡ‚ΡŒ ΠΌΠΎΡ€Π΄Ρ‹ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Ρƒ Π² ΠΊΡƒΡ€ΠΈΠ»ΠΊΠ΅ Π·Π° поклонСния Ρ€Π°Π·Π½Ρ‹ΠΌ шаблонам проСктирования.

Ну Ρ‚Π°ΠΊ Π½Π΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈ эту Π³Ρ€Π°Π½ΡŒ.

КСша шаблонов ΠΈΠ»ΠΈ кСша Π΄Π°Π½Π½Ρ‹Ρ…? Π₯отя Π½Π΅ Π²Π°ΠΆΠ½ΠΎ, ΠΈ Ρ‚Π°ΠΌ ΠΈ Ρ‚Π°ΠΌ это Ρ€Π΅ΡˆΠ°Π΅Ρ‚ΡΡ Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ измСнСния.

А Ссли ΠΊΠΎΠ»-Π²ΠΎ элСмСнтов Π½Π° страничкС задаСтся ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ(скаТСм Π² настройках ΠΊΠ°ΠΊ Ρ‚ΡƒΡ‚), Ρ‚ΠΎ Π½Π΅ получится.

И Ρ‡Ρ‚ΠΎ Ρ‚Π΅Π±Π΅ ΠΌΠ΅ΡˆΠ°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ?

Как Ρ‡Ρ‚ΠΎ. Π‘Π΅Ρ€ΡƒΡ‚ мСня (фронтэндщика), ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Ρ‚ΠΎ парня (бэкэндщика) Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° Ρ‚Π°ΠΌ, тСстСра Π½Π° ΠΏΡ€ΠΎΡΡ‚Π΅Π½ΡŒΠΊΠΈΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΠΊ, ΠΈ ставят Π² Π½Π°Π΄Π·ΠΈΡ€Π°Π½ΠΈΠ΅ Π½Π° ΠΏΠΎΠ» ставки Ρ‚ΠΈΠΌΠ»ΠΈΠ΄Π°. Π’ΠΈΠΌΠ»ΠΈΠ΄ Π²Ρ‡Π΅Ρ€Π° Ρ‡ΠΈΡ‚Π°Π» Ρ…Π°Π±Ρ€Ρƒ ΠΈ наткнулся Ρ‚Π°ΠΌ Π½Π° ΠΎΡ‡Π΅Ρ€Π΅Π΄Π½ΠΎΠΉ Vue, ΠΎΠ½ ΡƒΠ·Π½Π°Π» ΠΈΠ· ΡΡ‚Π°Ρ‚ΡŒΠΈ, Ρ‡Ρ‚ΠΎ Vue ΠΊΡ€ΡƒΡ‡Π΅, Ρ‡Π΅ΠΌ Angular, поэтому Π½ΠΎΠ²Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΌΡ‹ (Π²Π΅Ρ€Π½Π΅Π΅ я, ΠΎΠ½ Ρ‚ΠΎ Π½ΠΈΡ‡Π΅Π³ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚) Π±ΡƒΠ΄Π΅ΠΌ ΠΏΠΈΡΠ°Ρ‚ΡŒ Π½Π° Vue, Π° старый β€” ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Π½Π° ангулярС. А Π΅Ρ‰Ρ‘ ΠΎΠ½ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Π», Ρ‡Ρ‚ΠΎ PHP β€” это нСдостаточно ΠΏΠΎ-хипстСрски ΠΈ Π½Π΅ потянСт наш Ρ…Π°ΠΉΠ»ΠΎΠ°Π΄ ΠΏΠΎ ΠΏΡ€ΠΎΠ΄Π°ΠΆΠ΅ спиннСров Π² НиТнСзадрыщСнскС, поэтому бэкэндщик Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΈΡΠ°Ρ‚ΡŒ Ρ‚ΠΎΠΆΠ΅ Π½Π° JS, Π° Π½Π΅ Π½Π° ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½ΠΎΠΌ Π΅ΠΌΡƒ PHP, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Ρ‚ΠΎΡ‚ обязан ΠΏΠΎ Ρ…ΠΎΠ΄Ρƒ Π΄Π΅Π»Π° Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π² Π½ΠΎΠ΄Π΅, npm, ΠΈ ΠΊΠ΅ΠΉ-вэлью Π‘Π”, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊ хипсторы Π΄Π΅Π»Π°ΡŽΡ‚. Один Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ Ρ‚ΠΈΡ…ΠΎΠ½ΡŒΠΊΠΎ сидит Π² ΡƒΠ³ΠΎΠ»ΠΊΠ΅ ΠΈ ΠΏΠ»Π°Ρ‡Π΅Ρ‚, обнимая свой Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π½Π΅ Π΄Π°ΠΉ Π±ΠΎΠ³ Ρ‚ΠΈΠΌΠ»ΠΈΠ΄ ΡƒΠ·Π½Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ бСсплатный GIMP.

Π‘ΠΌΠ΅Π½ΠΈ Ρ€Π°Π±ΠΎΡ‚Ρƒ, Π΄ΡƒΠΌΠ°ΡŽ Π΅Ρ‰Ρ‘ Π΅ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ мСст Π³Π΄Π΅ достаточно ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ мСню css.

Π’ΠΎΠ³Π΄Π° срСзы ΠΊΠ΅ΡˆΠΈΡ€ΡƒΠΉ. Π― понимаю, для Ρ…Π΅Ρ€Π»ΠΎΠ°Π΄ ΠΌΠ°Π³Π°Π·ΠΈΠ½Π° с Π½ΠΈΠΈΠΏΠ°Ρ†Π° ΠΌΠ΅Π³Π° Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°ΠΌΠΈ это ΡƒΠΆΠ΅ Π·Π°Ρ‚Ρ€Π°Ρ‚Π½ΠΎ объСмами для хранСния ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… срСзов ΠΈ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠ², Π½ΠΎ Π² сСрСднячкС это прСкрасно Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΈ ΠΆΡ€Π°Ρ‚ΡŒ Π½Π΅ просит.

Ну Ρ‚Π°ΠΊ Π½Π΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈ эту Π³Ρ€Π°Π½ΡŒ.

Π― ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽ Β«ΠΌΠΎΠΉ ΠΊΡ€ΡƒΠ³Β» ΠΈ ΡΠΌΠΎΡ‚Ρ€ΡŽ вакансии.

Π’Π°ΠΊ-Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ Ρƒ нас Ρ‚Π°ΠΌ ΠΏΠΎ CSS?

Less, Sass, Scss, Haml. ΠΏΠΎΠ³ΠΎΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ? Π§Π΅Ρ‚Ρ‹Ρ€Π΅ языка стилСй, ΠΊΡ€ΠΎΠΌΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ? Ну ΠΎΠΊ.

А Ρ‡Ρ‚ΠΎ Ρƒ нас Ρ‚Π°ΠΌ ΠΏΠΎ JS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°ΠΌ? jQuery, React, Redux, Angular, Vue, Backbone. ΠΊΠ°ΠΊ я, Ρ‡Ρ‘Ρ€Ρ‚ возьми, это всё ΠΈΠ·ΡƒΡ‡Ρƒ?

А это Π΅Ρ‰Ρ‘, ΠΌΠ°Ρ‚Π΅Ρ€ΡŒ боТья, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅? CoffeeScript, TypeScript β€” Π΅Ρ‰Ρ‘ Π΄Π²Π° языка для фронтэнда, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² ΠΈΡ‚ΠΎΠ³Π΅ ΡΠΊΠΎΠΌΠΈΠ»ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π² JavaScript?

Π’Π°ΠΌ Π½Π΅ каТСтся, Ρ‡Ρ‚ΠΎ слишком ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·Π²Π΅Π»ΠΎΡΡŒ ΡƒΡ‚ΠΈΠ»ΠΈΡ‚ для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠ³ΠΎ ΠΊΡ€ΡƒΠ³Π° Π·Π°Π΄Π°Ρ‡, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π°Π½ΡŒΡˆΠ΅ Ρ€Π΅ΡˆΠ°Π»ΡΡ трСмя-чСтырмя? Π­Ρ‚ΠΎ ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΏΡΡ‚ΡŒΠ΄Π΅ΡΡΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Ρ… ΠΌΠΎΠ»ΠΎΡ‚ΠΊΠΎΠ² с Ρ€Π°Π·Π½Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ Ρ€ΡƒΡ‡ΠΊΠΈ β€” ΠΈ ΠΏΠΎΠΊΠ° всС Ρ†Π²Π΅Ρ‚Π° Π½Π΅ Π²Ρ‹ΡƒΡ‡ΠΈΡˆΡŒ, ΠΊ забиванию Π³Π²ΠΎΠ·Π΄Π΅ΠΉ Π½Π΅ ΠΏΠΎΠ΄ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ!

Π‘Π°Π»ΡŒΠ·Π°ΠΌ Π² ΡƒΡˆΠΈ. Но ΠΎΠ½ щас скаТСт Ρ‡Ρ‚ΠΎ Ρ‚Ρ‹ постарСл, ΠΈ Ρ‡Ρ‚ΠΎ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ врСмя ΠΌΠΎΠ»ΠΎΠ΄Ρ‹Ρ… спСрмотоксикозников.

Ну Ρ‚Π°ΠΊ Тизнь ΠΏΡ€ΠΎΡ„. Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Ρ‰ΠΈΠΊΠ° тяТСла. ΠŸΠΎΡ‚ΠΎΠΌΡƒ я Ρ‚ΡƒΠ΄Π° ΠΈ Π½Π΅ Π»Π΅Π·Ρƒ.

Но это Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·ΠΈΠ΅ Π½Π΅ отмСняСт Ρ‚ΠΎΠ³ΠΎ Ρ„Π°ΠΊΡ‚Π°, Ρ‡Ρ‚ΠΎ vue, ΠΏΡ€ΠΈ Ρ€Π°Π·ΡƒΠΌΠ½ΠΎΠΌ Π΅Π³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ, ΠΎΠ±Π»Π΅Π³Ρ‡Π°Π΅Ρ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ.

Top 23 Best Free JavaScript Frameworks for Web Developers 2017

Π•ΡΡ‚ΡŒ Π΅Ρ‰Ρ‘ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ Free ΠΈ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ Top. Π― Π½Π΅ зря сказал ΠΏΡ€ΠΎ ΠΏΡΡ‚ΡŒΠ΄Π΅ΡΡΡ‚ Ρ†Π²Π΅Ρ‚ΠΎΠ² рукояток ΠΌΠΎΠ»ΠΎΡ‚ΠΊΠΎΠ².

Haml β€” Π½Π΅ язык стилСй, Π° ΡˆΠ°Π±Π»ΠΎΠ½ΠΈΠ·Π°Ρ‚ΠΎΡ€. Sass ΠΈ Scss β€” Π΄Π²Π° Π΄ΠΈΠ°Π»Π΅ΠΊΡ‚Π° ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ языка. jQuery, React, Redux β€” Π½Π΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ (Vue ΠΈ Backbone Ρ€Π°Π·Π²Π΅ Ρ‡Ρ‚ΠΎ с натяТкой). Redux Ρ‚Π°ΠΊ Π²ΠΎΠΎΠ±Ρ‰Π΅ просто Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° state machine, Π½Π΅ зависящая ΠΎΡ‚ view-слоя. CoffeeScript устарСл, TypeScript ΠΎΡ‚ соврСмСнного JavaScript отличаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΈΠΏΠΈΠ·Π°Ρ†ΠΈΠ΅ΠΉ. Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ Π²Ρ‹Π±ΠΈΡ€Π°ΠΉ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡ€Π° ΠΈ ΡƒΡ‡ΠΈ. Π—Π°Ρ‡Π΅ΠΌ Ρ‚Π΅Π±Π΅ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ ΠΌΠΎΠ»ΠΎΡ‚ΠΊΠΈ, Ссли Π½ΡƒΠΆΠ½Ρ‹ ΠΌΠΎΠ»ΠΎΡ‚ΠΎΠΊ, ΠΎΡ‚Π²Ρ‘Ρ€Ρ‚ΠΊΠ° ΠΈ плоскогубцы?

Π”Π° Π² этом случаС ΠΏΡ€ΠΎΡ‰Π΅ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ ΠΊΠ΅ΡˆΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° сторонС прилоТСния, Π° ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ всС Π½Π° Π±Π΄ ΠΈ Π΅Π΅ кСши.

Π Π΅Π½Π΄Π΅Ρ€ΠΈΡ‚ΡŒ Π½Π° сторонС сСрвСра β€” довольно Ρ‚Π°ΠΊΠΈ Π·Π°Ρ‚Ρ€Π°Ρ‚Π½ΠΎ.

ВсС Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹Π΅ люди ΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΊΠ΅ΡˆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ.

А Π±Π΄ Π² любом случаС провСряСт Ρ‚ΠΎ ΠΆΠ΅ самоС β€” Ρ„ΠΈΠ»Π΅ΠΌΡ‚Π°ΠΉΠΌ Ρ„Π°ΠΉΠ»Π° ΠΈΠ»ΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎΠ΅ ΠΏΠΎΠ»Π΅ Π² структурС Π² памяти/Ρ„Π°ΠΉΠ»Π΅. Но Π² Π±Π΄ Π½Π΅Ρ‚ шаблонов.

ВсС Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹Π΅ люди ΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΊΠ΅ΡˆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ.

Π’Ρ‹ Π½Π΅ Π·Π°ΠΊΡΡˆΠΈΡ€ΡƒΠ΅ΡˆΡŒ всС ΠΌΠΈΠ»Π»ΠΈΠ°Ρ€Π΄Ρ‹ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² стСйта, Π² зависимости ΠΎΡ‚ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·Π½Ρ‹ΠΉ ΠΎΡ‚Ρ€Π΅Π½Π΄Π΅Ρ€Π΅Π½Π½Ρ‹ΠΉ DOM для Ρ€Π°Π·Π½Ρ‹Ρ… ΡŽΠ·Π΅Ρ€ΠΎΠ².

Π—Π°Ρ‡Π΅ΠΌ Ρ‚Π΅Π±Π΅ ΡƒΡ‡ΠΈΡ‚ΡŒ всё, Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ Ссли ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π° ΠΈΠ· пСрСчислСнного (less, jquery, backbone, coffeescript) β€” Ρ‚Ρ€ΡƒΠΏΡ‹?

НС, Π½Ρƒ, смотря какая Π·Π°Π΄Π°Ρ‡Π° стоит.

Когда я Π² 1997 Π³ΠΎΠ΄Ρƒ, Π±ΡƒΠ΄ΡƒΡ‡ΠΈ школьником, сдСлал свой ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ хомяк, Π½ΠΈΠΊΡ‚ΠΎ ΠΈ Π² ΡΡ‚Ρ€Π°ΡˆΠ½ΠΎΠΌ снС ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ сСбС Π½Π΅ ΠΌΠΎΠ³, Ρ‡Ρ‚ΠΎ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ с ΠΊΡƒΡ‡Π΅ΠΉ JS-прослоСк, находящихся ΠΌΠ΅ΠΆΠ΄Ρƒ сСрвСрными скриптами ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, понадобится ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ с ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ.

ΠšΡƒΠ΄Π°-Ρ‚ΠΎ Π½Π΅ Ρ‚ΡƒΠ΄Π° ΡƒΡˆΠ΅Π» Π²Π΅Π±.

Π—Π°Ρ‡Π΅ΠΌ Ρ‚Π΅Π±Π΅ ΡƒΡ‡ΠΈΡ‚ΡŒ всё, Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ Ссли ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π° ΠΈΠ· пСрСчислСнного (less, jquery, backbone, coffeescript) β€” Ρ‚Ρ€ΡƒΠΏΡ‹?

Π‘ΠΊΠ°ΠΆΠ΅ΠΌ Ρ‚Π°ΠΊ. МнС β€” ΡƒΠΆΠ΅ Π½Π΅Π·Π°Ρ‡Π΅ΠΌ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π²Π²ΠΈΠ΄Ρƒ Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎ я Π΄Π°Π²Π½ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΡƒΡŽΡΡŒ Π²Π΅Π±ΠΎΠΌ, я всС эти ΡˆΡ‚ΡƒΠΊΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΎ знаю. Ну, Ссли Π±Ρ‹Ρ‚ΡŒ совсСм чСстным, Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²Ρ‹Π΅ Π΄Π²Π΅ β€” Π½Π° ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ, Π° ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ β€” Π½Π° Ρ‡Π΅Ρ‚Π²Ρ‘Ρ€ΠΎΡ‡ΠΊΡƒ, ΠΌΠΎΠΆΠ΅Ρ‚, с минусом, Π½ΠΎ Π½Π΅ ΡΡƒΡ‚ΡŒ. Π•Ρ‰Ρ‘ Π² ΠΌΠΎΠΈΡ… Π°ΠΌΠ±Π°Ρ€Π°Ρ… бСзумия Π΅ΡΡ‚ΡŒ воспоминания ΠΎ Marionette, Dart, LiveScript, Π΅Ρ‰Ρ‘ я Π½Π° Ρ„Π»Π΅ΡˆΠ΅ писал, Π½ΠΎ застал Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ ActionScript, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ‚ΠΎΠΆΠ΅ ΠΈΠ· сСмСйства ECMA*, Π½Ρƒ прочая фигня.

А Π²ΠΎΡ‚ Π½ΠΎΠ²ΠΈΡ‡ΠΊΡƒ Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ? Если Ρ‚Ρ‹ Π±Π΅Ρ€Ρ‘ΡˆΡŒ, ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΡˆΡŒ список вакансий, Π° Ρ‚Π°ΠΌ ΠΏΠΎΠ»Π½ΠΎ ΠΈΡ… с Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π·Π½Π°Ρ‚ΡŒ jQuery Ρ‚ΠΎΡ‚ ΠΆΠ΅. вСдь Π½Π΅ смотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ сСйчас ΠΌΠ½ΠΎΠ³ΠΎ ΡƒΠΌΠ΅ΡŽΡ‚, Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ хотят Ρ‡Ρ‚ΠΎΠ±Ρ‹ сайт Ρ€Π°Π±ΠΎΡ‚Π°Π» ΠΈ Π² IE8. И Π² вакансиях Π΅ΡΡ‚ΡŒ less. И бэкбон, ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΠ΅ ΠΌΡ‘Ρ€Ρ‚Π²Ρ‹Π΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ. Π― Π±Ρ‹ с ΡƒΠ΄ΠΎΠ²ΠΎΠ»ΡŒΡΡ‚Π²ΠΈΠ΅ΠΌ сСйчас писал Π½Π° мэйнстрим яваскриптС, Π½ΠΎ Π½Π° ΠΌΠΎΠ΅ΠΉ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ Ρ€Π°Π±ΠΎΡ‚Π΅ ΠΎΡ‚ мСня Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Π½Π΅ мСньшС IE10 ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π΅Π΄Π°Π²Π½ΠΎ я Π²Ρ‹Π±ΠΈΠ» >=IE11.

Пока Ρ‡Ρ‚ΠΎ понял, Ρ‡Ρ‚ΠΎ Ρ‡Π΅Ρ€Π΅Π· эти Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² html.

ΠΠ΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ понял. Если Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΎ ангулярС/Ρ€Π΅Π°ΠΊΡ‚Π΅ β€” Ρ‚ΠΎ это Π½Π΅ Π²Π΅Π±-Ρ„Ρ€Π΅ΠΉΠΌΠΎΡ€Π²ΠΊΠΈ. Π­Ρ‚ΠΎ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ графичСскиС Ρ‚ΡƒΠ»ΠΊΠΈΡ‚Ρ‹ Π²Ρ€ΠΎΠ΄Π΅ Qt. И Π½ΡƒΠΆΠ½Ρ‹ ΠΎΠ½ΠΈ Ρ€ΠΎΠ²Π½ΠΎ Π·Π° Ρ‚Π΅ΠΌ ΠΆΠ΅ самым.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊΠΈ:

http://favicon.tech/kogda-proektu-neobhodim-react/
http://xbsoftware.ru/blog/pochemu-stoit-ispolzovat-react-js-razrabotke-prilozhenij/
http://www.linux.org.ru/forum/web-development/13551545

Π—Π°Ρ‡Π΅ΠΌ Π½ΡƒΠΆΠ΅Π½ инструмСнт Storybook ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π½Π°ΠΌ ΠΆΠΈΡ‚ΡŒ

ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ слоТных ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ²Ρ‹Ρ… интСрфСйсов встаСт вопрос дальнСйшСго ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ и сопровоТдСния ΠΊΠΎΠ΄ΠΎΠ²ΠΎΠΉ Π±Π°Π·Ρ‹ Π²Π΅Π±-сСрвиса. Π‘ΠΎΒ Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ количСство UI-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² растСт, наряду с этим возрастаСт ΠΈΒ ΠΏΠΎΡ€ΠΎΠ³ вхоТдСния Π²Β ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Β β€” Π΅Π³ΠΎ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ ΠΈΒ ΠΎΡ‚Π»Π°Π΄ΠΊΠ° Π·Π°Ρ‚Ρ€ΡƒΠ΄Π½ΡΡŽΡ‚ΡΡ.

ΠŸΡ€ΠΈΠ²Π΅ΡΡ‚ΠΈ мысли и структуру ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° в порядок ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Storybook. Π­Ρ‚ΠΎΡ‚ инструмСнт для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов позволяСт Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ части интСрфСйса ΠΈΠ·ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ от основного прилоТСния, Ρ‡Ρ‚ΠΎ ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ тСстированиС и позволяСт ΠΎΡ‚Π»Π°Π΄ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ с различными Π΄Π°Π½Π½Ρ‹ΠΌΠΈ. Для ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ взаимодСйствия ΡΒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ Storybook прСдоставляСт ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π²Π΅Π±-интСрфСйс.

Одной ΠΈΠ·Β ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… особСнностСй Storybook являСтся то, Ρ‡Ρ‚ΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ практичСски ΡΒ Π»ΡŽΠ±Ρ‹ΠΌ инструмСнтариСм, Π±ΡƒΠ΄ΡŒΒ Ρ‚ΠΎ React.js, Vue.js ΠΈΠ»ΠΈ Angular. Π’Π°ΠΊΠΆΠ΅ сущСствуСт мноТСство ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°ΡΡˆΠΈΡ€ΡΡŽΡ‚ Π΅Π³ΠΎ интСрфСйс ΠΈΒ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с компонСнтами.

ΠžΡΠ½ΠΎΠ²Π½Ρ‹ΠΌΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌΠΈ взаимодСйствия Π²Β Storybook ΡΠ²Π»ΡΡŽΡ‚ΡΡ истории. ИмСнно ΠΎΠ½ΠΈ ΡΠ²ΡΠ·Ρ‹Π²Π°ΡŽΡ‚ срСду Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΈΒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹. Π§Ρ‚ΠΎΠ±Ρ‹ Storybook ΠΌΠΎΠ³ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΡ‚ΡŒ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹ от историй, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠ΅ с прСфиксом .stories.js. Π­Ρ‚ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΊΠ°ΠΊ и любоС Π΄Ρ€ΡƒΠ³ΠΎΠ΅, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ, Ρ€Π°ΡΡˆΠΈΡ€ΠΈΠ² ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡŽ инструмСнта.

ПослС создания истории ΠΎΠ½Π° появляСтся Π²Β ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΌ интСрфСйсС вмСстС с отрСндСрСнным состояниСм ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°. Π€Π°ΠΉΠ»Ρ‹ .stories.js Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ в сСбя ряд историй, Π³Π΄Π΅ каТдая ΠΈΠ·Β Π½ΠΈΡ…Β β€” это Ρ€Π΅Π½Π΄Π΅Ρ€-функция, Π²Β ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ отраТаСтся состояниС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°. Π₯ΠΎΡ€ΠΎΡˆΠΈΠΌ Ρ‚ΠΎΠ½ΠΎΠΌ считаСтся, Ссли ΠΎΠ΄ΠΈΠ½ Ρ„Π°ΠΉΠ» истории описываСт ΠΎΠ΄ΠΈΠ½ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π²Β Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… состояниях.

ΠžΒ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π²Π½Π΅Π΄Ρ€ΠΈΡ‚ΡŒ Storybook в свой ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, Π²Ρ‹Β ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ ΠΈΠ·Β Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ, ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΉ Π²Π°ΡˆΠ΅ΠΌΡƒ стСку. В свои ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ ΠΌΡ‹Β Π½Π°Ρ‡Π°Π»ΠΈ Π²Π½Π΅Π΄Ρ€ΡΡ‚ΡŒ Π΅Π³ΠΎ на основС ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ с учСтом ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ стСка. Π˜Β ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π²ΡΡ‚Ρ€Π΅Ρ‚ΠΈΠ»ΠΈΡΡŒ с нСсколькими слоТностями.

НапримСр, ΠΏΡ€ΠΈ Π²Π½Π΅Π΄Ρ€Π΅Π½ΠΈΠΈ Storybook в сборки React-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ стало ясно, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ² Π΅ΠΌΡƒ Π½Π΅Β Π·Π½Π°ΠΊΠΎΠΌΡ‹. Π’Β Π±Π°Π·ΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ Webpack для Storybook отсутствовали ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ Π²Β ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π»ΠΎΠ°Π΄Π΅Ρ€Ρ‹. Π’Β Π½Π°ΡˆΠ΅ΠΌ случаС это Π±Ρ‹Π»ΠΈ stylus-loader ΠΈΒ css-loader ΡΒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Π½Π°Π±ΠΎΡ€ΠΎΠΌ ΠΎΠΏΡ†ΠΈΠΉ для ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ css-modules.

Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ схоТих ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ Π²Π°ΠΌ удастся Ρ€Π΅ΡˆΠΈΡ‚ΡŒ ΠΏΡƒΡ‚Π΅ΠΌ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ Π±Π°Π·ΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ Storybook. За это ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ»Π΅ webpackFinal Π²Β Ρ„Π°ΠΉΠ»Π΅ .storybook/main.js. Π’Π°ΠΆΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹Β Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌ, Π°Β Π½Π΅Β ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ замСняСм ΡƒΠΌΠΎΠ»Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΡƒΡŽ webpack-ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡŽ, хотя ΠΈΒ Ρ‚Π°ΠΊΠΎΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ΅Π½. Π Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ описываСтся Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ, присвоСнной полю webpackFinal. В качСствС Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ² ΠΎΠ½Π° ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡŽ webpack ΠΏΠΎΒ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈΒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ с мСтаинформациСй, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠΉ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ Storybook.

НСбольшой ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡŽ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ здСсь.

Π₯ΠΎΡ‚ΠΈΡ‚Π΅ Π΅Ρ‰Π΅ большС полСзностСй ΠΎΡ‚Β Π½Π°ΡˆΠ΅Π³ΠΎ ΠΎΡ‚Π΄Π΅Π»Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ? Π—Π°Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ Π²Β Telegram ΠΈΒ ΠΏΠΎΠ΄ΠΏΠΈΡΡ‹Π²Π°ΠΉΡ‚Π΅ΡΡŒ Π½Π°Β ΠΊΠ°Π½Π°Π» Chulakov Dev. Новости-ΠΌΠΎΠ»Π½ΠΈΠΈ, Π³Π°ΠΉΠ΄Ρ‹-Π»ΠΎΠ½Π³Ρ€ΠΈΠ΄Ρ‹Β β€” рСгулярно дСлимся самым интСрСсным ΠΈΠ·Β ΠΌΠΈΡ€Π° frontend- ΠΈΒ backend-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

Π—Π°Ρ‡Π΅ΠΌ Π½ΡƒΠΆΠ΅Π½ key Π² React-списках?

ВсС, ΠΊΡ‚ΠΎ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ свою Ρ€Π°Π±ΠΎΡ‚Ρƒ с React, Π΄ΡƒΠΌΠ°ΡŽ, ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°Π»ΠΈΡΡŒ с Ρ‚Π°ΠΊΠΈΠΌ warning:

Warning. Each child in a list should have a unique Β«keyΒ» prop.

ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΉ элСмСнт Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства Β«keyΒ»

Π­Ρ‚Π° ошибка ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² списках <li>, Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈ Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтах, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Β«ΠΌΠ°ΠΏΠΈΡ‚Π΅Β» ΠΈΠ· ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ (строки Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, изобраТСния, Π±Π»ΠΎΠΊΠΈ с ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ, Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Ρ‚.Π΄.).

Для ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, отслСТивания ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠΌΠ΅Π½Π½ΠΎ элСмСнты измСнились Π² DOM, React Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρƒ Π½ΠΈΡ… Π±Ρ‹Π» ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠ»ΡŽΡ‡.

Π’Π°ΠΊ Π΄Π΅Π»Π°Ρ‚ΡŒ Π½Π΅ рСкомСндуСтся

const Todos = (todos) => {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  )
}

Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Ρ‹ΡˆΠ΅, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° map, ΠΌΡ‹ ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΠΌ вСсь массив todos, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ состоит ΠΈΠ· ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² ΠΈ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΈ Π²Ρ‹Π²ΠΎΠ΄ΠΈΠΌ элСмСнт списка с тСкстом этого таска ΠΈ Π·Π°Π΄Π°Π΅ΠΌ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ key ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ элСмСнту li.

Π’ ΠΌΠ΅Ρ‚ΠΎΠ΄Π΅ .map() ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ index β€” (индСкс Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅ΠΌΠΎΠ³ΠΎ элСмСнта Π² массивС), Π½ΠΎ Ρ‚Π°ΠΊ Π΄Π΅Π»Π°Ρ‚ΡŒ Π½Π΅ рСкомСндуСтся :

const Todos = (todos) => {
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo.text}</li>
      ))}
    </ul>
  )
}

Всё Π΄Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ порядка располоТСния элСмСнтов Π² спискС, это ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ ΠΈ ΠΏΡƒΡ‚Π°Π½ΠΈΡ†Ρƒ Π² самом ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅ ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚Π΅ Π½ΠΎΠ²Ρ‹Π΅ элСмСнты Π² список ΠΈΠ»ΠΈ ΡƒΠ΄Π°Π»ΠΈΡ‚Π΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ….

Π›ΡƒΡ‡ΡˆΠΈΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ, Π² Ρ‚ΠΎΠΌ случаС Ссли Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ id, Π±ΡƒΠ΄Π΅Ρ‚ использованиС модуля shortid, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ сгСнСрируСт ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠ»ΡŽΡ‡

import shortid from 'shortid';

const Todos = (todos) => {
  return (
    <ul>
      {todos.map(todo => (
        <li key={shortid.generate()}>{todo.text}</li>
      ))}
    </ul>
  )
}

ΠšΠ»ΡŽΡ‡ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… элСмСнтов ΠΎΠ΄Π½ΠΎΠ³ΠΎ уровня. Π’.Π΅. Ссли Ρƒ вас нСсколько списков ul Π½Π° страницС, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт li Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ key, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… своСго ul

Π’Π°ΡˆΠΈ вопросы ΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ:

ΠŸΠΎΡ‡Π΅ΠΌΡƒ Π½Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ React Native

Если Π²Ρ‹ слСдитС Π·Π° послСдними новостями Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, Ρ‚ΠΎ навСрняка Π·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊΠΎΠΉ Π°ΠΆΠΈΠΎΡ‚Π°ΠΆ творится Π²ΠΎΠΊΡ€ΡƒΠ³ React Native. ВсС Π½Π°Ρ‡Π°Π»ΠΎΡΡŒ с Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Facebook прСдставил Π½ΠΎΠ²Ρ‹ΠΉ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎΠ΄ Android ΠΈ iOS. Π‘Ρ‚ΠΎΠ»ΡŒ авторитСтная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° обСспСчила Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ React Native ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹Π΅ стартовыС условия. Ну Π° дальшС всС понСслось, ΠΊΠ°ΠΊ снСТный ΠΊΠΎΠΌ. БСгодня ΠΌΡ‹ наблюдаСм Ρ†Π΅Π»Ρ‹ΠΉ ряд Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ² основанных Π½Π° Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π΅ React Native. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Π²Π΅Π±-интСрфСйсов ΡƒΠΆΠ΅ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΉ.

Π‘ ΠΌΠΎΠΌΠ΅Π½Ρ‚Π° Π²Ρ‹Ρ…ΠΎΠ΄Π° React Native ΠΌΡ‹ стали свидСтСлями мноТСства ΠΏΠΎΠΏΡ‹Ρ‚ΠΎΠΊ совмСщСния JS, HTML ΠΈ CSS для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Достаточно ΡƒΠΏΠΎΠΌΡΠ½ΡƒΡ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ, ΠΊΠ°ΠΊ Apache Cordova ΠΈ Ionic. БСзусловно, ΠΎΠ½ΠΈ ТизнСспособны. Однако ΠΈΡ… ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ‚ ΠΎΠ΄ΠΈΠ½ сущСствСнный нСдостаток. И Apache Cordova, ΠΈ Ionic Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π²Π½ΡƒΡ‚Ρ€ΠΈ WebView, Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰Π΅Π³ΠΎ API Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹. Π’ Π΄Π²ΡƒΡ… словах, это ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ сниТСнию ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

React Native β€” это совсСм другая история. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ собствСнный API, ΠΈ оборачивая Π΅Π³ΠΎ Π² React ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° позволяСт Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ прилоТСния Π΅Π΄Π²Π° ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠΌΡ‹Π΅ ΠΎΡ‚ Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ…. Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Apache Cordova ΠΈ Ionic, React Native ΡƒΠ΄Π°Π»ΠΎΡΡŒ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° ΠΊ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ интСрфСйсов Π±Π΅Π· нСобходимости ΠΆΠ΅Ρ€Ρ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ.

Π—Π²ΡƒΡ‡ΠΈΡ‚ красиво, Π½ΠΎ нСдостаточно ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΌΡ‹ Ρ€Π΅ΡˆΠΈΠ»ΠΈ ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ Π²ΠΎΠ΅Π΄ΠΈΠ½ΠΎ всС прСимущСства ΠΈ нСдостатки React Native, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΠΎΠ΄Π±ΠΈΡ‚ΡŒ баланс ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹Π²ΠΎΠ΄.

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° React Native

ΠŸΠ»Π°Ρ‚ΠΈΠΌ мСньшС β€” ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ большС

ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΈ самый Π³Π»Π°Π²Π½Ρ‹ΠΉ плюс: ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΡŽ React Native, Π²Ρ‹ ΠΏΠ»Π°Ρ‚ΠΈΡ‚Π΅ Π·Π° Π΄Π²Π° прилоТСния ΠΏΠΎ Ρ†Π΅Π½Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ. Π‘Ρ‚ΠΎΠΏ. Π”Π°ΠΆΠ΅ Π·Π° Ρ‚Ρ€ΠΈ. НС Π·Π°Π±Ρ‹Π²Π°Π΅ΠΌ ΠΏΡ€ΠΎ Windows mobile. БСзусловно, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΡ‚ΡŒΡΡ с Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ слоТностями Π½Π° этапС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, Π½ΠΎ Π² 99% случаях ΠΎΠ½ΠΈ с Π»ΠΈΡ…Π²ΠΎΠΉ ΠΎΠΊΡƒΠΏΠ°ΡŽΡ‚ΡΡ.

ΠœΠΎΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Π°Ρ обратная связь

React Native позволяСт ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ измСнСния ΠΈΠ· мСню Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°, просто ΠΎΠ±Π½ΠΎΠ²ΠΈΠ² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ быстро. ВсС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ: ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ», ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠ΄ΠΎΠΆΠ΄ΠΈΡ‚Π΅ ΠΏΠ°Ρ€Ρƒ сСкунд, ΠΈ вуаля – обновлСния Π³ΠΎΡ‚ΠΎΠ²Ρ‹.

ΠŸΡ€ΠΈ Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ ΠΆΠ΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ приходится ΠΏΠ΅Ρ€Π΅ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ всС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. А это Ρ‚Ρ€Π°Ρ‚Π° Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, усилий, рСсурсов β€” сами ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚Π΅.

ΠžΠ±Ρ‰ΠΈΠΉ инструмСнтарий для web ΠΈ mobile

По сути, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ шаблоном для построСния Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π½Π° React JS. ΠŸΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ Ρ€Π°Π·Π½ΠΈΡ†Ρ‹ Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π½Π΅ сущСствуСт. ΠžΡΡ‚Π°Π½Π΅Ρ‚ΡΡ лишь ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΏΡƒΡ‚ΡŒ установки ΠΈ Ρ€ΠΎΡƒΡ‚ΠΈΠ½Π³ прилоТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ‚ΠΎΡ€Π° React Native.

Π’ ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΌ различия ΠΎΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚. Π’Π°ΠΌ Π΄Π°ΠΆΠ΅ Π½Π΅ потрСбуСтся webpack, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Babel ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² React Native ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. ВсС это Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ сокращаСт Π²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ Π·Π°Ρ‚Ρ€Π°Ρ‚Ρ‹. Π”Π°ΠΉΡ‚Π΅ своим JavaScript Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ всСго ΠΏΠ°Ρ€Ρƒ Π΄Π½Π΅ΠΉ, ΠΈ ΠΎΠ½ΠΈ прСподнСсут Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π²Π°ΠΌ Π½Π° Π±Π»ΡŽΠ΄Π΅Ρ‡ΠΊΠ΅.

И Π΅Ρ‰Π΅. Π’ процСссС Ρ€Π°Π±ΠΎΡ‚Ρ‹ с React Native ΠΌΡ‹ использовали Redux. И Ρ…ΠΎΡ‚ΠΈΠΌ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π²Π΅Π΄Π΅Ρ‚ сСбя Ρ‚ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

ΠŸΠΎΡ‡Ρ‚ΠΈ одинаковая кодовая Π±Π°Π·Π° для iOS ΠΈ Android

Π•ΡΡ‚ΡŒ Π½ΡŽΠ°Π½ΡΡ‹. ΠŸΡ€Π΅ΠΆΠ΄Π΅ всСго, это касаСтся iOS. НапримСр, scrolling to the input, Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰ΠΈΠΉ использования Π½ΠΈΠ·ΠΊΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ³ΠΎ API. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Native Picker ΠΏΠΎΡ…ΠΎΠΆ Π½Π° стандартный select input Π² Android, Π½ΠΎ Π² iOS выглядит ΠΏΠΎ-Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ. Π’ ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΌ всС ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ‡Π½ΠΎ. И Π½ΠΈΠΊΠ°ΠΊΠΈΡ… ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ с Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ интСрфСйсов ΠΏΠΎΠ΄ Ρ€Π°Π·Π½Ρ‹Π΅ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹.

Π”Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ способ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ UI

Один ΠΈΠ· Π³Π»Π°Π²Π½Ρ‹Ρ… плюсов React Native. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Flexbox Β«ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈΒ» Π΄Π΅Π»Π°Π΅Ρ‚ написаниС UI Π³ΠΎΡ€Π°Π·Π΄ΠΎ ΠΌΠ΅Π½Π΅Π΅ Π±ΠΎΠ»Π΅Π·Π½Π΅Π½Π½Ρ‹ΠΌ ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с ΠΈΠΌΠΏΠ΅Ρ€Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌ стилСм Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹.

НСдостатки React Native

Учитывая, Ρ‡Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ±Π»ΠΈΡ‡Π½Ρ‹ΠΉ Ρ€Π΅Π»ΠΈΠ· React Native состоялся ΠΎΠΊΠΎΠ»ΠΎ Ρ‚Ρ€Π΅Ρ… Π»Π΅Ρ‚ Π½Π°Π·Π°Π΄, Π²ΠΏΠΎΠ»Π½Π΅ СстСствСнно, Ρ‡Ρ‚ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΡƒ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ Ρ…Π²Π°Ρ‚Π°Ρ‚ΡŒ ΡΡ‚Π°Π±ΠΈΠ»ΡŒΠ½ΠΎΡΡ‚ΠΈ. Однако Π΅ΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ нСдостатки. О Π½ΠΈΡ… β€” ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅.

ΠŸΡ€ΠΎΡ‚Π΅ΠΊΠ°ΡŽΡ‰ΠΈΠ΅ абстракции

ΠŸΡ€ΠΈ нСобходимости ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠ°ΠΊΠ΅Ρ‚ с Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌ API ΠΏΠΎΠ΄ ΠΊΠ°ΠΏΠΎΡ‚ΠΎΠΌ (написанном Π½Π° Java ΠΈΠ»ΠΈ Objective C), Π²Π°ΠΌ придСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ инструмСнт β€” rnpm. РаньшС ΠΎΠ½ поставлялся ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ, Π½ΠΎ постСпСнно Π±Ρ‹Π» ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ Π² React Native. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° ΠΆΠ΅ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π½Π΅ всСгда Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚. НапримСр, ΠΊΠΎΠ³Π΄Π° Π½ΡƒΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠ°ΠΊΠ΅Ρ‚ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ, Π½Π°ΠΌ лишь остаСтся Π½Π°Π΄Π΅ΡΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ прСдоставили ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΡƒΡŽ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ. Π’ Ρ‚Π°ΠΊΠΎΠΌ случаС процСсс установки сводится ΠΊ добавлСнию Java ΠΈΠ»ΠΈ Objective C ΠΊΠΎΠ΄Π° (Π² зависимости ΠΎΡ‚ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹). Однако Ссли Π²Ρ‹ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ с Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ Ρ€Π°Π½Π΅Π΅, придСтся ΠΏΡ€ΠΈΠ±Π΅Π³Π½ΡƒΡ‚ΡŒ ΠΊ β€œΡ‡Π΅Ρ€Π½ΠΎΠΉ магии”.

ΠΠ΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ использования Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Ρ… дСвайсов Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²ΠΎ врСмя тСстирования, Π½ΠΎ ΠΈ ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅

ВСроятно, это выглядит слишком ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½Ρ‹ΠΌ. Но ΠΌΡ‹ настаиваСм: Π½Π΅ стоит ΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ лишь Π½Π° эмуляторы. Π”Π°ΠΆΠ΅ нСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π²Ρ‹ΡΠ²Π»ΡΡ‚ΡŒ массу ΠΌΠ΅Π»ΠΊΠΈΡ… нСсоотвСтствий интСрфСйса. НС рискуйтС, ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ устройствами Π½Π° протяТСнии всСго ΠΏΠ΅Ρ€ΠΈΠΎΠ΄Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ прилоТСния.

Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π·Π½Π°Ρ‚ΡŒ ΠΈ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎ-настоящСму эффСктивным β€” это Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ. НС самая простая Π·Π°Π΄Π°Ρ‡Π°, особСнно для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². Но с Π½Π΅ΠΉ Π½Π΅ΠΏΡ€Π΅ΠΌΠ΅Π½Π½ΠΎ придСтся ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΡ‚ΡŒΡΡ.

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π½Π° ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ Π²Ρ‹Π»Π΅Π·Π»Π° ошибка Π² React Native, ΠΈ Π²Π°ΠΌ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Π»Π°ΡΡŒ ΠΏΠΎΠΌΠΎΡ‰ΡŒ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². А ΠΎΠ½ΠΈ Π²Π½Π΅Π·Π°ΠΏΠ½ΠΎ Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ прСдставлСния ΠΎΠ± этом Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ΅. Или нСдостаточно с Π½ΠΈΠΌ Π·Π½Π°ΠΊΠΎΠΌΡ‹. Π˜ΠΌΠ΅ΠΉΡ‚Π΅ это Π²Π²ΠΈΠ΄Ρƒ ΠΏΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ React Native для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ прилоТСния.

React Native packager ΠΈΠ½ΠΎΠ³Π΄Π° тСряСт соСдинСниС

Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΡ‚ΠΈ, Ссли Π²Ρ‹ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ врСмя Π½Π΅ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠΆΠ°Π»ΠΈ ΠΊΠΎΠ΄. ΠžΡ‚ΡΠΎΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ устройство ΠΈ вновь Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ packager β€” это Π½Π΅ΡƒΠ΄ΠΎΠ±Π½ΠΎ. И Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ нюанс. Иногда Π² Π½Π°Ρ‡Π°Π»Π΅ Ρ€Π°Π±ΠΎΡ‚Ρ‹ стоит ΡΠ±Ρ€ΠΎΡΠΈΡ‚ΡŒ кэш Ρ‡Π΅Ρ€Π΅Π· `npm start β€” β€”reset-cache`.

ΠŸΡ€ΠΈΠ³ΠΎΡ‚ΠΎΠ²ΡŒΡ‚Π΅ΡΡŒ ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°ΡŽΡ‚ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ прилоТСния

Π­Ρ‚ΠΎΡ‚ ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΠΈΠΌΠ΅Π΅Ρ‚ довольно опосрСдованноС ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ ΠΊ React Native. Но Ссли Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ Π½Π°Π΄ ΠΏΡƒΠ±Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ прилоТСниями, Π²Π°ΠΌ придСтся Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ ΠΈΡ… Ρ€Π°Π·Π²Π΅Ρ€Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ. И Ссли для Android эта ΠΏΡ€ΠΎΡ†Π΅Π΄ΡƒΡ€Π° проста, ΠΊΠ°ΠΊ Π»ΠΎΠΏΠ°Ρ‚Π°, Ρ‚ΠΎ для iOS ΠΎΠ½Π° Π·Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ прСвращаСтся Π² сущий ΠΊΠΎΡˆΠΌΠ°Ρ€. К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ Π² нашСй ΠΊΠΎΠΌΠ°Π½Π΄Π΅ Π΅ΡΡ‚ΡŒ ΠΎΠΏΡ‹Ρ‚Π½Ρ‹Π΅ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ, всСгда Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΠΏΠΎΠΌΠΎΡ‡ΡŒ с ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ сСртификатов, ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ² устройств ΠΈ построСниСм Π±ΠΈΠ»Π΄ΠΎΠ² с XCode. А Ссли ΠΈΡ… Π½Π΅Ρ‚?

Π”Ρ€ΡƒΠ³ΠΎΠ΅ Π΄Π΅Π»ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Ρ‹ Π² Π²Ρ‹Π±ΠΎΡ€Π΅ инструмСнтов для Ρ€Π°Π·Π²Π΅Ρ€Ρ‚ΠΊΠΈ React Native ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π‘Ρ€Π΅Π΄ΠΈ самых интСрСсных ΠΌΡ‹ Π±Ρ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΠ»ΠΈ CodePush Microsoft. Он ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΠ΅Ρ‚ комплСксный ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ React Native ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡŽ ΠΈ Π²ΠΈΠ΄ΠΈΡ‚ Π΅Π³ΠΎ со всСми JavaScript ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²Π°ΠΌ Π½Π΅ приходится ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· вСсь Ρ†ΠΈΠΊΠ» Π±ΠΈΠ»Π΄/Ρ€Π΅Π»ΠΈΠ·/Ρ€Π΅Π²ΡŒΡŽ. ВмСсто этого Π²Ρ‹ просто β€œΠΏΡƒΡˆΠΈΡ‚Π΅β€ обновлСния, Π° CodePush Microsoft заботится ΠΎΠ± ΠΈΡ… доставкС ΠΊΠΎΠ½Π΅Ρ‡Π½Ρ‹ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ. НСтрудно Π΄ΠΎΠ³Π°Π΄Π°Ρ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ экономит массу Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.

Π’Ρ‹Π²ΠΎΠ΄Ρ‹

React Native стоит ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Ссли:

  • Π’Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ»ΠΎΠΆΠΈΡ‚ΡŒΡΡ Π² ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ срок ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π±ΡŽΠ΄ΠΆΠ΅Ρ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ прилоТСния для ΠΎΠ±Π΅ΠΈΡ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ;
  • ΠŸΠ΅Ρ€Π΅Π΄ Π²Π°ΠΌΠΈ Π½Π΅ стоит Ρ†Π΅Π»ΡŒ Π² создании Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ слоТного интСрфСйса (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΡ€ΡƒΡ‚Ρ‹Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ) ΠΈΠ»ΠΈ эта Ρ†Π΅Π»ΡŒ Π² Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π½Π΅ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Π½Π°;
  • ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ Π·Π°Ρ‚ΠΎΡ‡Π΅Π½ΠΎ ΠΏΠΎΠ΄ использованиС собствСнного API. Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС Π²Π°ΠΌ придСтся Π΄ΠΎΠΏΠΈΠ»ΠΈΠ²Π°Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, React Native ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‚Π°Ρ‚ΡŒ основным инструмСнтом Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Ссли:

  • Π’Ρ‹ ΠΈΠΌΠ΅Π΅Ρ‚Π΅ ΠΎΠΏΡ‹Ρ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎΠ΄ iOS ΠΈ/ΠΈΠ»ΠΈ Android;
  • Π’Ρ‹ ΠΈΠΌΠ΅Π΅Ρ‚Π΅ ΠΎΠΏΡ‹Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с соврСмСнными вСрсиями JavaScript ΠΈ ReactJS.

Если всС это Ρ‚Π°ΠΊ, использованиС React Native ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ эффСктивнСС, Ρ‡Π΅ΠΌ Ρ€Π°Π±ΠΎΡ‚Π° с Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ. НаконСц, ΠΌΡ‹ сошлСмся Π½Π° собствСнный ΠΎΠΏΡ‹Ρ‚ ΠΈ Ρ‚Π΅ΠΌΠΏΡ‹ развития этого Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° ΠΈ скаТСм: React Native β€” ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π² 2017 Π³ΠΎΠ΄Ρƒ.

Когда Π½ΡƒΠΆΠ΅Π½ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚?

Π’Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, ΠΊΠΎΠ³Π΄Π° ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ Π½ΡƒΠΆΠ½Ρ‹ HTML ΠΈ CSS, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ всС. Когда Π²Ρ‹ достигнСтС JavaScript, довольно ясно: ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ ΠΈΠ»ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ JavaScript. РаньшС это Π±Ρ‹Π»ΠΎ довольно ясно, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΠ»ΠΈ Π΄ΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ. ΠœΡ‹ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΠ»ΠΈΡΡŒ ΠΊ jQuery, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ с DOM, Ajax ΠΈ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ кросс-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript. ΠœΡ‹ использовали ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄Π°Ρ‚ΡŒ Π½Π°ΠΌ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π½Π΅ Π±Ρ‹Π»ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² JavaScript.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΏΠΎΡ‚Ρ€Π΅Π±Π½ΠΎΡΡ‚ΡŒ Π² этих Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°Ρ… исчСзаСт, ΠΈ ΠΌΡ‹ наблюдаСм массовый рост числа Π½ΠΎΠ²Ρ‹Ρ… Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ², я Π±Ρ‹ сказал, Ρ‡Ρ‚ΠΎ Π½Π΅ Ρ‚Π°ΠΊ ясно , ΠΊΠΎΠ³Π΄Π° ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ . Π’ ΠΊΠ°ΠΊΠΎΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π½Π°ΠΌ понадобится React?

Π― просто ΡΠΎΠ±ΠΈΡ€Π°ΡŽΡΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React Π² качСствС заполнитСля здСсь для своСго Ρ€ΠΎΠ΄Π° Π±ΠΎΠ»ΡŒΡˆΠΈΡ… Π²Π΅Ρ‰Π΅ΠΉ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° JavaScript. Vue, Ember, Svelte… Ρ‡Ρ‚ΠΎ ΡƒΠ³ΠΎΠ΄Π½ΠΎ. Π― понимаю, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π½Π΅ всС ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅, Π½ΠΎ ΠΊΠΎΠ³Π΄Π° ΠΈΡ… Π΄ΠΎΡΡ‚Π°Ρ‚ΡŒ, я Π½Π°Ρ…ΠΎΠΆΡƒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Ρ‚ΡƒΠΌΠ°Π½Π½Ρ‹ΠΌ.

Π’ΠΎΡ‚ ΠΌΠΎΠ΅ ΠΌΠ½Π΅Π½ΠΈΠ΅.

βœ… ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΌ ΠΌΠ½ΠΎΠ³ΠΎ ΡˆΡ‚Π°Ρ‚ΠΎΠ².

Π”Π°ΠΆΠ΅ «состояниС» — слово расплывчатоС. ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅ сСбС Ρ‚Π°ΠΊΠΈΠ΅ Π²Π΅Ρ‰ΠΈ:

  • Какой элСмСнт Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π°ΠΊΡ‚ΠΈΠ²Π΅Π½
  • ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠ»ΠΈ Π½Π΅Ρ‚
  • Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π²Ρ…ΠΎΠ΄Π°
  • КакиС Ρ€Π°Π·Π΄Π΅Π»Ρ‹ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Ρ‹
  • Когда ΠΎΠ±Π»Π°ΡΡ‚ΡŒ загруТаСтся
  • ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ вошСл Π² систСму, ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΎΠ½ ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ‚
  • ΠŸΡƒΠ±Π»ΠΈΠΊΡƒΠ΅Ρ‚ΡΡ Π»ΠΈ Ρ‚ΠΎ, Π½Π°Π΄ Ρ‡Π΅ΠΌ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ, ΠΈΠ»ΠΈ Ρ‡Π΅Ρ€Π½ΠΎΠ²ΠΈΠΊ

Π¨Ρ‚Π°Ρ‚ ΠΏΠΎ Ρ‚ΠΈΠΏΡƒ «бизнСс-Π»ΠΎΠ³ΠΈΠΊΠ°Β», с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΌΡ‹ рСгулярно сталкиваСмся.БостояниС Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ прямым содСрТаниСм:

  • ВсС ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ ΠΊ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΈ ΠΈΡ… ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅
  • ВСкущая просматриваСмая ΡΡ‚Π°Ρ‚ΡŒΡ ΠΈ всС Π΅Π΅ ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Π΅
  • Массив статСй ΠΈ ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Ρ… для этих
  • Бписок Π°Π²Ρ‚ΠΎΡ€ΠΎΠ²
  • Π–ΡƒΡ€Π½Π°Π» активности послСдних дСйствий ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ

React Π½Π΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π²Π°ΠΌ, , ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ это состояниС, ΠΎΠ½ просто Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚: я знаю, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΠΌΠ΅Ρ‚ΡŒ Π΄Π΅Π»ΠΎ с с состояниСм, поэтому Π΄Π°Π²Π°ΠΉΡ‚Π΅ просто Π²Ρ‹Π·ΠΎΠ²Π΅ΠΌ это состояниС ΠΈ Π½Π°ΠΉΠ΄Π΅ΠΌ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹Π΅ способы для установки ΠΈ получСния этого состояния.

Π”ΠΎ React Ρƒ нас ΠΌΠΎΠ³Π»ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΈ с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния состояния, Π½ΠΎ, ΠΏΠΎ большСй части, ΠΌΡ‹ Π½Π΅ рассматривали Π΅Π³ΠΎ ΠΊΠ°ΠΊ ΠΏΡ€ΡΠΌΡƒΡŽ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡŽ.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ‹ ΡΠ»Ρ‹ΡˆΠ°Π»ΠΈ Ρ„Ρ€Π°Π·Ρƒ Β«Π΅Π΄ΠΈΠ½Ρ‹ΠΉ источник истины»? Часто ΠΌΡ‹ ΠΎΡ‚Π½ΠΎΡΠΈΠ»ΠΈΡΡŒ ΠΊ ΠΌΠΎΠ΄Π΅Π»ΠΈ DOM ΠΊΠ°ΠΊ ΠΊ СдинствСнному источнику истины. НапримСр, ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ, ΠΌΠΎΠΆΠ½ΠΎ Π»ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡƒ Π½Π° вашСм Π²Π΅Π±-сайтС. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ, являСтся Π»ΠΈ $ (". Form input [type = 'submit']). (": Disabled ") , ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ вся ваша бизнСс-Π»ΠΎΠ³ΠΈΠΊΠ°, которая ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Π΅Π»ΠΎ с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈΠ»ΠΈ Π½Π΅Ρ‚ Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ» ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ этой ΠΊΠ½ΠΎΠΏΠΊΠΈ.Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΊΠ½ΠΎΠΏΠΊΠ° фактичСски стала источником истины для состояния вашСго прилоТСния.

Или, скаТСм, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ имя ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Π°Π²Ρ‚ΠΎΡ€Π° коммСнтария ΠΊ ΡΡ‚Π°Ρ‚ΡŒΠ΅. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ‹ Π½Π°ΠΏΠΈΡˆΠ΅Ρ‚Π΅ $ (". Comments> ul> li: first> h4.comment-author) .text () , ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ DOM — СдинствСнноС мСсто, Π³Π΄Π΅ эта информация извСстна.

React ΠΊΠ°ΠΊ Π±Ρ‹ сообщаСт Π½Π°ΠΌ:

  1. Π”Π°Π²Π°ΠΉΡ‚Π΅ Π½Π°Ρ‡Π½Π΅ΠΌ Π΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎΠ±ΠΎ всСм этом ΠΊΠ°ΠΊ ΠΎ состоянии.
  2. Π― сдСлаю ΠΎΠ΄Π½ΠΎ Π»ΡƒΡ‡ΡˆΠ΅: состояниС — это Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ JSON, поэтому с Π½ΠΈΠΌ Π»Π΅Π³ΠΊΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΈ, вСроятно, ΠΎΠ½ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с вашСй сСрвСрной Ρ‡Π°ΡΡ‚ΡŒΡŽ.
  3. И Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ Π΅Ρ‰Π΅ Π»ΡƒΡ‡ΡˆΠ΅: Π²Ρ‹ создаСтС свой HTML, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π±ΠΈΡ‚Ρ‹ этого состояния, ΠΈ Π²Π°ΠΌ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ придСтся ΠΈΠΌΠ΅Ρ‚ΡŒ Π΄Π΅Π»ΠΎ с DOM Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ, я сдСлаю всС это Π·Π° вас (ΠΈ, вСроятно, сдСлаю Ρ€Π°Π±ΠΎΡ‚Ρƒ Π»ΡƒΡ‡ΡˆΠ΅ / быстрСС, Ρ‡Π΅ΠΌ Ρƒ вас Π±Ρ‹ Π±Ρ‹Π»ΠΎ.)

βœ… Для Π±ΠΎΡ€ΡŒΠ±Ρ‹ со спагСтти.

Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ связано с Ρ‚Π΅ΠΌ, ΠΎ Ρ‡Π΅ΠΌ ΠΌΡ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ.

Код

Β«Π‘ΠΏΠ°Π³Π΅Ρ‚Ρ‚ΠΈΒ» — это ΠΊΠΎΠ³Π΄Π° организация ΠΈ структура ΠΊΠΎΠ΄Π° ΡƒΡˆΠ»ΠΈ ΠΎΡ‚ вас. ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅ сСбС Ρ„ΠΎΡ€ΠΌΡƒ Π½Π° вашСм сайтС. Π’ Π½Π΅ΠΌ Π΅ΡΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ элСмСнты бизнСс-Π»ΠΎΠ³ΠΈΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ с Π²Ρ…ΠΎΠ΄Π½Ρ‹ΠΌΠΈ Π΄Π°Π½Π½Ρ‹ΠΌΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ.Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π΅ΡΡ‚ΡŒ числовой Π²Π²ΠΎΠ΄, ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ рядом с Π½ΠΈΠΌ отобраТаСтся Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ вычислСния. Π€ΠΎΡ€ΠΌΠ° Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½Π° ​​и Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΎΠ²Π΅Ρ€Π΅Π½Π°, поэтому, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, этот ΠΊΠΎΠ΄ находится Π² Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ мСстС. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ‹ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ Ρ„ΠΎΡ€ΠΌΡƒ Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° Π½Π΅ ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ вСсь JavaScript Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½ Π² Π΄Ρ€ΡƒΠ³ΠΎΠ΅ мСсто, ΠΈ эта Π»ΠΎΠ³ΠΈΠΊΠ° находится Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ мСстС. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΊΠΎΠ³Π΄Π° Ρ„ΠΎΡ€ΠΌΠ° Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½Π°, Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ Π΄Π°Π½Π½Ρ‹Π΅ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ, ΠΈ это ΠΏΠΎΡ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ Π»ΠΎΠ³ΠΈΠΊΠΈ ΠΈ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ. Π—Π΄Π΅ΡΡŒ Π½Π΅Ρ‚ Π½ΠΈΡ‡Π΅Π³ΠΎ ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ, Π½ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ это ΠΌΠΎΠΆΠ΅Ρ‚ быстро Π·Π°ΠΏΡƒΡ‚Π°Ρ‚ΡŒ.Как Π½ΠΎΠ²Ρ‹ΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, глядя Π½Π° эту Ρ„ΠΎΡ€ΠΌΡƒ, рассуТдаСт ΠΎΠ±ΠΎ всСм, Ρ‡Ρ‚ΠΎ происходит?

React поощряСт использованиС встраивания Π²Π΅Ρ‰Π΅ΠΉ Π² ΠΌΠΎΠ΄ΡƒΠ»ΠΈ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, эта Ρ„ΠΎΡ€ΠΌΠ°, скорСС всСго, Π±ΡƒΠ΄Π΅Ρ‚ Π»ΠΈΠ±ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΌ, Π»ΠΈΠ±ΠΎ ΡΠΎΡΡ‚ΠΎΡΡ‚ΡŒ ΠΈΠ· Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΌΠ΅Π½ΡŒΡˆΠΈΡ… ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ… Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ Π»ΠΎΠ³ΠΈΠΊΡƒ, которая ΠΈΠΌΠ΅Π΅Ρ‚ ΠΊ Π½Π΅ΠΌΡƒ прямоС ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅.

React Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚: Π½Ρƒ, Π²Ρ‹ Π½Π΅ ΡΠΎΠ±ΠΈΡ€Π°Π΅Ρ‚Π΅ΡΡŒ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ ΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ Π·Π° DOM Π½Π° ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΈ ΠΏΡ€ΠΎΡ‡Π΅Π³ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ DOM ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ‚ ΠΌΠ½Π΅, ΠΈ Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Π½ΠΈΠΌ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ .ΠŸΠΎΡ‡Π΅ΠΌΡƒ Π±Ρ‹ Π²Π°ΠΌ Π½Π΅ Π½Π°Ρ‡Π°Ρ‚ΡŒ Π΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎΠ± этих Π²Π΅Ρ‰Π°Ρ… ΠΊΠ°ΠΊ ΠΎ части состояния, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ состояниС, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, Π° я Π·Π°ΠΉΠΌΡƒΡΡŒ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ, пСрСрисовывая Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ.

Π‘Π»Π΅Π΄ΡƒΠ΅Ρ‚ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ React сам ΠΏΠΎ сСбС Π½Π΅ Ρ€Π΅ΡˆΠ°Π΅Ρ‚ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ спагСтти. Π’Ρ‹ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠΌΠ΅Ρ‚ΡŒ состояниС Π²ΠΎ всСвозмоТных странных мСстах, ΠΏΠ»ΠΎΡ…ΠΎ Π½Π°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π²Π΅Ρ‰ΠΈ ΠΈ странным ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΡΠ²ΡΠ·Ρ‹Π²Π°Ρ‚ΡŒ ΠΈΡ….

По ΠΌΠΎΠ΅ΠΌΡƒ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠΌΡƒ ΠΎΠΏΡ‹Ρ‚Ρƒ, ΠΈΠΌΠ΅Π½Π½ΠΎ Redux Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ±ΠΈΠ²Π°Π΅Ρ‚ спагСтти. Redux Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚: я Π±ΡƒΠ΄Ρƒ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ всСх Π²Π°ΠΆΠ½Ρ‹Ρ… состояний, ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ глобально, Π° Π½Π΅ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ Π·Π° ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΌ.Π― Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΉ источник истины. Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ состояниС, здСсь задСйствована цСрСмония (я ΡΠ»Ρ‹ΡˆΠ°Π», Ρ‡Ρ‚ΠΎ это называСтся Ρ‚Π°ΠΊ, ΠΈ ΠΌΠ½Π΅ это нравится). Π•ΡΡ‚ΡŒ Ρ€Π΅Π΄ΡƒΠΊΡ‚ΠΎΡ€Ρ‹, ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹Π΅ дСйствия ΠΈ Ρ‚ΠΎΠΌΡƒ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅. ВсС измСнСния ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ Π·Π° Ρ†Π΅Ρ€Π΅ΠΌΠΎΠ½ΠΈΠ΅ΠΉ.

Если Π²Ρ‹ ΠΏΠΎΠΉΠ΄Π΅Ρ‚Π΅ ΠΏΠΎ ΠΏΡƒΡ‚ΠΈ Redux (ΠΈ, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π΅ΡΡ‚ΡŒ Π΅Π³ΠΎ Π²Π°Ρ€ΠΈΠ°Ρ†ΠΈΠΈ), Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ΠΉ ΠΊΠΎΠ΄. Π“ΠΎΡ€Π°Π·Π΄ΠΎ слоТнСС ΡΠ»ΠΎΠΌΠ°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ, ΠΈ Π΅ΡΡ‚ΡŒ Ρ‡Π΅Ρ‚ΠΊΠΈΠ΅ слСды, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊ всС взаимосвязано.

βœ… Много управлСния DOM.

Ручная ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° DOM, вСроятно, самая большая ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π° спагСтти-ΠΊΠΎΠ΄Π°.

  1. Π’ΡΡ‚Π°Π²ΡŒΡ‚Π΅ HTML сюда!
  2. Π’Ρ‹Ρ€Π²ΠΈ Ρ‡Ρ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ здСсь!
  3. Π‘Π»Π΅Π΄ΠΈΡ‚Π΅ Π·Π° этим событиСм!
  4. ΠŸΡ€ΠΈΠ²ΡΠΆΠΈΡ‚Π΅ сюда Π½ΠΎΠ²ΠΎΠ΅ событиС!
  5. Новый входящий ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚! ВпрыснитС снова! Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Ρƒ Π½Π΅Π³ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹Π΅ привязки событий!

ВсС это ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΎΠΈΡΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π² любоС врСмя ΠΈΠ· любого мСста Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΠ»ΠΎΡΡŒ Π² спагСтти. ΠžΡ‚ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΉ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΎΡ‚ΠΊΠ°Π·Π°Π»ΠΈΡΡŒ, ΠΈ ΠΎΠ½Π° Π²Π΅Ρ€Π½ΡƒΠ»Π°ΡΡŒ Π² Π”ΠžΠœ ΠΊΠ°ΠΊ источник истины.Π’Ρ€ΡƒΠ΄Π½ΠΎ Ρ‚ΠΎΡ‡Π½ΠΎ Π·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ происходит с Π»ΡŽΠ±Ρ‹ΠΌ Π·Π°Π΄Π°Π½Π½Ρ‹ΠΌ элСмСнтом, поэтому всС просто ΡΠΏΡ€Π°ΡˆΠΈΠ²Π°ΡŽΡ‚ DOM, Π΄Π΅Π»Π°ΡŽΡ‚ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΈΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, ΠΈ ΡΠΊΡ€Π΅Ρ‰ΠΈΠ²Π°ΡŽΡ‚ ΠΏΠ°Π»ΡŒΡ†Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½ΠΈΠΊΠΎΠΌΡƒ Π½Π΅ ΠΌΠ΅ΡˆΠ°Ρ‚ΡŒ.

React Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚: Π²Ρ‹ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚Π΅ Π΄Π΅Π»ΠΎ с DOM Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ. Π£ мСня Π΅ΡΡ‚ΡŒ Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ DOM, ΠΈ я занимаюсь этим. Бобытия привязаны нСпосрСдствСнно ΠΊ элСмСнтам, ΠΈ Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ свСрх Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ нСпосрСдствСнно обрабатываСтся Π² этом ΠΌΠΎΠ΄ΡƒΠ»Π΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΊΠ°ΠΊ Π±Ρ‹ Ρ†Π΅Ρ€Π΅ΠΌΠΎΠ½ΠΈΠ°Π»ΡŒΠ½ΠΎ Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒ Π²Π΅Ρ‰ΠΈ Π² модулях Π±ΠΎΠ»Π΅Π΅ высокого порядка, Π½ΠΎ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΉΡ‚ΠΈ ΠΏΠΎ слСду Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠ΅ΠΊ .

Π‘Π»ΠΎΠΆΠ½ΠΎΠ΅ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ DOM — Π΄Ρ€ΡƒΠ³ΠΎΠ΅ Π΄Π΅Π»ΠΎ. ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅ сСбС Ρ‡Π°Ρ‚-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. НовыС сообщСния Ρ‡Π°Ρ‚Π° ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΡΠ²ΠΈΡ‚ΡŒΡΡ ΠΈΠ·-Π·Π° Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π² Π±Π°Π·Π΅ Π΄Π°Π½Π½Ρ‹Ρ… Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π΅ΡΡ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ… участников Ρ‡Π°Ρ‚Π°, ΠΈ появилось нСсколько Π½ΠΎΠ²Ρ‹Ρ… сообщСний. Или Π²Ρ‹ сами написали Π½ΠΎΠ²ΠΎΠ΅ сообщСниС! Или страница загруТаСтся Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅, Π° старыС сообщСния ΠΈΠ·Π²Π»Π΅ΠΊΠ°ΡŽΡ‚ΡΡ ΠΈΠ· локального Ρ…Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰Π° Π΄Π°Π½Π½Ρ‹Ρ…, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π΅ΡΡ‚ΡŒ Ρ‡Ρ‚ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ. Π’ΠΎΡ‚ Π²Π΅Ρ‚ΠΊΠ° Π² Π’Π²ΠΈΡ‚Ρ‚Π΅Ρ€Π΅, которая ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΠΎΠ½ΡΡ‚ΡŒ это.

❌ ΠŸΡ€ΠΎΡΡ‚ΠΎ Ρ‚Π°ΠΊ. Π­Ρ‚ΠΎ новая Π³ΠΎΡ€ΡΡ‡Π½ΠΎΡΡ‚ΡŒ.

Π£Ρ‡ΠΈΡ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Ρ€Π°Π΄ΠΈ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Ρ‡Π΅ΠΌΡƒ-Ρ‚ΠΎ, — это Π·Π΄ΠΎΡ€ΠΎΠ²ΠΎ. Π‘Π΄Π΅Π»Π°ΠΉ это.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° для ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ² ΠΈ Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ.

Π‘Π»ΠΎΠ³, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, , вСроятно, Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π½ΠΈ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ ΠΈ Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ Π½ΠΈ для ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· сцСнариСв, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ сдСлали Π±Ρ‹ React подходящим. И ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚, ΠΎΠ½, вСроятно, Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΈ , ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π²Π²ΠΎΠ΄ΠΈΡ‚ слоТныС Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΈ зависимости для Ρ‡Π΅Π³ΠΎ-Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ этого.

И Π΅Ρ‰Π΅, сСрая Π·ΠΎΠ½Π°. Если этот Π±Π»ΠΎΠ³ прСдставляСт собой SPA («одностраничноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅Β», Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π±Π΅Π· обновлСния Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ построСн Π½Π° основС Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ· Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½ΠΎΠΉ CMS ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΡ€ΠΈΡ‡ΡƒΠ΄Π»ΠΈΠ²ΡƒΡŽ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ Π½Π° сторонС сСрвСра… Π½Ρƒ, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ, это снова тСрритория React.

CMS Π²Π΅Π±-прилоТСния, которая Π΄Π΅Π»Π°Π΅Ρ‚ этот Π±Π»ΠΎΠ³? ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ, Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Π²Ρ‹Π±ΠΎΡ€ для React ΠΈΠ·-Π·Π° всСго состояния.

❌ Π― просто люблю JavaScript ΠΈ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΈΡΠ°Ρ‚ΡŒ всС Π½Π° JavaScript.

Π›ΡŽΠ΄ΡΠΌ говорят, Ρ‡Π΅Ρ€Ρ‚ возьми, я ΠΆΠ΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ» людям: ΠΈΠ·ΡƒΡ‡Π°ΠΉΡ‚Π΅ JavaScript. Π­Ρ‚ΠΎ ΠΎΠ³Ρ€ΠΎΠΌΠ½Ρ‹ΠΉ.Он ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ Π² дСйствиС всС Π²ΠΈΠ΄Ρ‹ Π²Π΅Ρ‰Π΅ΠΉ. Π’ Π½Π΅ΠΌ Π΅ΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‡ΠΈΠ΅ мСста. ВсС Ρ€Π°Π²Π½ΠΎ Π½Π΅ ΠΏΠΎΠΉΠ΄Π΅Ρ‚.

Волько Π² Π½Π΅Π΄Π°Π²Π½Π΅ΠΉ истории Π²Π΅Π±-поиска стало Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΌ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΏΠΎΠΊΠΈΠ΄Π°Ρ‚ΡŒ JavaScript. Π£ вас Π΅ΡΡ‚ΡŒ Node.js Π½Π° сторонС сСрвСра. Π•ΡΡ‚ΡŒ мноТСство ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹Π΄Π΅Ρ€Π³ΠΈΠ²Π°ΡŽΡ‚ CSS ΠΈΠ· смСси ΠΈ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ стили с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript. А с React ваш HTML Ρ‚ΠΎΠΆΠ΅ находится Π½Π° JavaScript.

Π’Π΅ΡΡŒ JavaScript! ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ JavaScript!

Π­Ρ‚ΠΎ ΠΊΡ€ΡƒΡ‚ΠΎ ΠΈ всС Ρ‚Π°ΠΊΠΎΠ΅, Π½ΠΎ ΠΎΠΏΡΡ‚ΡŒ ΠΆΠ΅, Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Ρ‚Ρ‹ моТСшь, Π½Π΅ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ Ρ‚Ρ‹ Π΄ΠΎΠ»ΠΆΠ΅Π½. НС всС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ этого ΠΈ, скорСС всСго, Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚.

☯️ Π’ΠΎΡ‚ Ρ‡Ρ‚ΠΎ я знаю.

(Π•ΡΡ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΈΡ‡Π½Ρ‹Π΅ смайлы для ДА ΠΈ НЕВ, Π½ΠΎ ΠœΠžΠ–Π•Π’ Π‘Π«Π’Π¬ ТСстчС!)

Π’Ρ‹ ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ. ΠŸΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠ΅. ВсС. ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉ ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ. Π§Π΅ΠΌ большС Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ обоснованныС Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ Π²Ρ‹ смоТСтС ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ Π² ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΡƒΡŽ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

Но ΠΈΠ½ΠΎΠ³Π΄Π° Π½ΡƒΠΆΠ½ΠΎ ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΈΠ· Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Ρ‚Ρ‹ знаСшь, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ я Π½Π΅ ΡΠΎΠ±ΠΈΡ€Π°ΡŽΡΡŒ тСбя Π·Π° это ΡƒΠ±ΠΈΠ²Π°Ρ‚ΡŒ.

☯️ Π’ΠΎΡ‚ Π³Π΄Π΅ Ρ€Π°Π±ΠΎΡ‚Π°.

НС ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ прямо ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, какая тСхнология ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² ΠΊΠ°ΠΊΠΎΠΌ-Π»ΠΈΠ±ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅.НадСюсь, со Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ Ρƒ вас появится влияниС Π½Π° это, Π½ΠΎ Π½Π° это Π½ΡƒΠΆΠ½ΠΎ врСмя. ИдСн Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° ΠΏΡ€ΠΎΠ²Π΅Π»Π° 2 Π³ΠΎΠ΄Π° с Π­ΠΌΠ±Π΅Ρ€, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΌ Π±Ρ‹Π»Π° Ρ€Π°Π±ΠΎΡ‚Π°. Π’ этом Π½Π΅Ρ‚ Π½ΠΈΡ‡Π΅Π³ΠΎ ΠΏΠ»ΠΎΡ…ΠΎΠ³ΠΎ. ВсСм Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ»Π°Ρ‚ΠΈΡ‚ΡŒ, ΠΈ Π­ΠΌΠ±Π΅Ρ€, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, идСально подошла Π±Ρ‹ для этих ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².

ΠŸΠΎΡ‡Π΅ΠΌΡƒ Π²Π°ΠΌ слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React.js для Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ

Если Π²Ρ‹ Π½ΠΎΠ²ΠΈΡ‡ΠΎΠΊ Π² React.js, Π²Π°ΠΌ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ интСрСсно, ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΎΠ½ Ρ‚Π°ΠΊ популярСн ΠΈ ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² своих прилоТСниях. Если Π΄Π°, Ρ‚ΠΎ Π²Ρ‹ ΠΏΠΎΠΏΠ°Π»ΠΈ Π² Π½ΡƒΠΆΠ½ΠΎΠ΅ мСсто.

Π”Π°Π²Π°ΠΉΡ‚Π΅ обсудим, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ React.js Ρ‚Π°ΠΊΠΈΠΌ Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΈ ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² своих ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ….

  • ΠšΡ€Π°Ρ‚ΠΊΠ°Ρ история React.js
  • ΠŸΠΎΡ‡Π΅ΠΌΡƒ стоит ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React?
  • React Π³ΠΈΠ±ΠΊΠΈΠΉ
  • React ΠΈΠΌΠ΅Π΅Ρ‚ большой ΠΎΠΏΡ‹Ρ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ
  • React ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ / рСсурсы Facebook
  • React Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ ΡˆΠΈΡ€ΠΎΠΊΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ сообщСства
  • React ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΡƒΡŽ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ
  • React Π»Π΅Π³ΠΊΠΎ ΠΏΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

ΠšΡ€Π°Ρ‚ΠΊΠ°Ρ история React.js

Facebook создал React.js Π² 2011 Π³ΠΎΠ΄Ρƒ для собствСнного использования. Как Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, Facebook сСгодня являСтся ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΠΊΡ€ΡƒΠΏΠ½Π΅ΠΉΡˆΠΈΡ… Π²Π΅Π±-сайтов ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй Π² ΠΌΠΈΡ€Π΅.

Π’ 2012 Π³ΠΎΠ΄Ρƒ Π΅Π³ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ Π½Π°Ρ‡Π°Π» ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Instagram, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ являСтся Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅ΠΉ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠ΅ΠΉ Facebook.

Π’ 2013 Π³ΠΎΠ΄Ρƒ Facebook сдСлал React.js ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ. ΠŸΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ сообщСство Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΎΡ‚ΠΊΠ»ΠΎΠ½ΠΈΠ»ΠΎ Π΅Π³ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ использовал Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ ΠΈ JavaScript Π² ΠΎΠ΄Π½ΠΎΠΌ Ρ„Π°ΠΉΠ»Π΅. Но ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ всС большС людСй экспСримСнтировали с этим, ΠΎΠ½ΠΈ Π½Π°Ρ‡Π°Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π½ΠΎ-ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ для раздСлСния ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ.

Π’ 2014 Π³ΠΎΠ΄Ρƒ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΊΡ€ΡƒΠΏΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Π½Π°Ρ‡Π°Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React.js Π² своих производствСнных срСдах.

Π’ 2015 Π³ΠΎΠ΄Ρƒ Facebook Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‚ΠΊΡ€Ρ‹Π» React Native с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ. Π­Ρ‚ΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°, которая позволяСт Π½Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ собствСнныС ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ прилоТСния Π½Π° Android ΠΈ iOS с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ React.js.

Π’ 2016 Π³ΠΎΠ΄Ρƒ с вСрсии 15 React.js Π½Π°Ρ‡Π°Π» ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сСмантичСскоС ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ вСрсиями. Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠΎΠ³Π»ΠΎ донСсти Π΄ΠΎ сообщСства Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², Ρ‡Ρ‚ΠΎ React Π±ΠΎΠ»Π΅Π΅ стабилСн.

БСгодня React.js ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΌΠ½ΠΎΠ³ΠΈΠΌΠΈ компаниями ΠΈΠ· списка Fortune 500 .Π£ Facebook Π΅ΡΡ‚ΡŒ ΡˆΡ‚Π°Ρ‚Π½Ρ‹Π΅ сотрудники ΠΏΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ React. Они рСгулярно Π²Ρ‹ΠΏΡƒΡΠΊΠ°ΡŽΡ‚ исправлСния ошибок, ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ, сообщСния Π² Π±Π»ΠΎΠ³Π°Ρ… ΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ стоит ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React?

Π’Π°ΠΌ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ интСрСсно, Π·Π°Ρ‡Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React.js. Π’ ΠΊΠΎΠ½Ρ†Π΅ ΠΊΠΎΠ½Ρ†ΠΎΠ², ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ использованиС JavaScript ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ»ΠΎΡΡŒ Π² послСдниС Π³ΠΎΠ΄Ρ‹, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ нас Π΅ΡΡ‚ΡŒ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ², доступных Π½Π° Ρ€Ρ‹Π½ΠΊΠ΅, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Angular ΠΈ Vue.js. Π˜Ρ‚Π°ΠΊ, ΠΏΠΎΡ‡Π΅ΠΌΡƒ React?

Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим ΡˆΠ΅ΡΡ‚ΡŒ основных ΠΏΡ€ΠΈΡ‡ΠΈΠ½ использования React.js.

React Π³ΠΈΠ±ΠΎΠΊ

React Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π°ΠΉΠ½ΠΎ Π³ΠΈΠ±ΠΎΠΊ.Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ Π΅Π³ΠΎ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚Π΅, Π²Ρ‹ смоТСтС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π½Π° самых Ρ€Π°Π·Π½Ρ‹Ρ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ… для создания качСствСнных ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов. React — это Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°, Π° НЕ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ. Π•Π³ΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅Ρ‡Π½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ» React ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ Π² Ρ‚Π°ΠΊΠΎΠΉ Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ инструмСнт.

React Π±Ρ‹Π» создан с СдинствСнной Ρ†Π΅Π»ΡŒΡŽ: ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ для Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ React ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ ΡƒΠ³ΠΎΠ΄Π½ΠΎ Π² вашСм Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠ½ΠΎΠΏΠΊΠ°, тСкст, ΠΌΠ΅Ρ‚ΠΊΠ° ΠΈΠ»ΠΈ сСтка.

Но ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ роста популярности React Π΅Π³ΠΎ экосистСма Ρ‚Π°ΠΊΠΆΠ΅ Ρ€Π°ΡΡˆΠΈΡ€ΠΈΠ»Π°ΡΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ…Π²Π°Ρ‚ΠΈΡ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ использования.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ статичСский сайт с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ React, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚Π°ΠΊΠΈΠ΅ инструмСнты, ΠΊΠ°ΠΊ Gatsby. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React Native для создания ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Ρ‹ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Π΅ прилоТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π°ΠΊΠΎΠ³ΠΎ инструмСнта, ΠΊΠ°ΠΊ Electron, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π° Mac ΠΈ Windows с Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠ΅ΠΉ React.js.

React Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ сСрвСрный Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ своих ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π°ΠΊΠΈΡ… инструмСнтов, ΠΊΠ°ΠΊ Next.js. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React.js для создания Π²Π΅Π±-сайта Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈ 360-градусного ΠΎΠΏΡ‹Ρ‚Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ React VR.

Β«Π£Ρ‡ΠΈΡ‚ΡŒΡΡ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π· ΠΈ ΠΏΠΈΡΠ°Ρ‚ΡŒ Π²Π΅Π·Π΄Π΅Β» — Reactjs.org

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React Π² своих ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… прилоТСниях. React Π±Ρ‹Π» Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ этого. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½Π΅Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ вашСго ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ прилоТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ React, ΠΈ Ссли это ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ сработаСт, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ всСго вашСго прилоТСния Π² React.js. Facebook использовал Ρ‚ΠΎΡ‚ ΠΆΠ΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄.

«ОсновноС прСимущСство использования Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Π½Π°Π΄ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠΌ состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Π»Π΅Π³ΠΊΠΈΠ΅, ΠΈ Π΅ΡΡ‚ΡŒ свобода Π²Ρ‹Π±ΠΎΡ€Π° Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… инструмСнтов. Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ состоит ΠΈΠ· Ρ†Π΅Π»ΠΎΠΉ экосистСмы для создания прилоТСния, ΠΈ Ρƒ вас Π½Π΅Ρ‚ простой способ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π»ΡŽΠ±Ρ‹Π΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ инструмСнты Π²Π½Π΅ Framework.Β«

React ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°

Π’Π°ΡˆΠ° ΠΊΠΎΠΌΠ°Π½Π΄Π° Π²Π»ΡŽΠ±ΠΈΡ‚ΡΡ Π² React, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ Π½Π°Ρ‡Π½ΡƒΡ‚ ΠΏΠΈΡΠ°Ρ‚ΡŒ Π² Π½Π΅ΠΌ ΠΊΠΎΠ΄. Π‘ΠΎΡ‡Π΅Ρ‚Π°Π½ΠΈΠ΅ быстрой Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΈ нСбольшого API React создаСт фантастичСскиС возмоТности для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ².

API React ΠΎΡ‡Π΅Π½ΡŒ прост Π² освоСнии. ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ°Π»ΠΎ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΉ для изучСния.Π’ΠΎΡ‚ нСбольшой ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° React:

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ React

Π’Π°ΠΌ просто Π½ΡƒΠΆΠ½ΠΎ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ React. Π‘ΠΎΠΎΠ±Ρ‰Π΅Π½ΠΈΠ΅ — это ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚Ρ‹ (Π²Π²ΠΎΠ΄) ΠΈ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ JSX.

JSX — это ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ синтаксис, ΠΏΠΎΡ…ΠΎΠΆΠΈΠΉ Π½Π° HTML, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅Ρ‚ Π²Ρ‹Π·ΠΎΠ²Ρ‹ API React ΠΈ, Π½Π°ΠΊΠΎΠ½Π΅Ρ†, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ HTML.

Π’Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½Ρ‹Π΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Angular ΠΈ Vue, Ρ€Π°ΡΡˆΠΈΡ€ΡΡŽΡ‚ возмоТности HTML. Они ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ JavaScript Π²Π½ΡƒΡ‚Ρ€ΠΈ HTML. Они создали Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ HTML, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π°Π΄Π΅Π»ΡΡŽΡ‚ Π΅Π³ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ возмоТностями.

Основная ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° этого ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ эти Π½ΠΎΠ²Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ HTML ΠΈΠ»ΠΈ всСгда ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΡƒΡŽ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ.

Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ†ΠΈΠΊΠ»Π° Π² Angular.ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π½Π° Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ * ngFor :

Angular Loops Example (Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: Angular)

А Π²ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ†ΠΈΠΊΠ»Π° Π² Vue.js. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π½Π° Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ v-for :

Vue Loops Example (Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: vuejs.org)

React ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ HTML (JSX) Π²Π½ΡƒΡ‚Ρ€ΠΈ JavaScript. МнС нравится этот ΠΏΠΎΠ΄Ρ…ΠΎΠ΄, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ здСсь Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠΌΠ΅Ρ‚ΡŒ Π΄Π΅Π»ΠΎ с чистым JavaScript ΠΈ HTML.

Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ†ΠΈΠΊΠ»Π° Π² React.js

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Ρ†ΠΈΠΊΠ»ΠΎΠ² React (Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: Reactjs.org)

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ React NumberList ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ чистый ΠΊΠΎΠ΄ JavaScript (функция ΠΊΠ°Ρ€Ρ‚Ρ‹).ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ JSX — это простой Ρ…ΠΎΡ€ΠΎΡˆΠΎ извСстный HTML-Ρ‚Π΅Π³ Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ². Ѐункция Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° просто ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ NumberList Π² ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠΌ элСмСнтС HTML-Ρ„Π°ΠΉΠ»Π°.

Π§Ρ‚ΠΎ Π΅Ρ‰Π΅ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΊΠ°ΠΊ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ, Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с чистым JavaScript ΠΈ HTML ΠΈ ΠΏΡ€ΠΈ этом ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ интСрфСйс?

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Когда я Π³ΠΎΠ²ΠΎΡ€ΡŽ «чистый JavaScriptΒ», это Π½Π΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ JavaScript Π² React. React — это Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° JavaScript, ΠΈ Ρƒ Π½Π΅Π΅ Π΅ΡΡ‚ΡŒ слой ΠΏΠΎΠ²Π΅Ρ€Ρ… Javascript.НО, ΠΊΠ°ΠΊ я ΡƒΠΆΠ΅ сказал, React API ΠΎΡ‡Π΅Π½ΡŒ малСнький ΠΈ простой Π² освоСнии. Angular ΠΈ Vue Π½Π°Π²ΡΠ·Ρ‹Π²Π°ΡŽΡ‚ Π²Π°ΠΌ свои ΠΏΡ€Π°Π²ΠΈΠ»Π°. React Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ‚ΡƒΠ°Π»Π΅Π½. Он ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Π°Π½ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ JavaScript Π² стилС React.

React.js Ρ‚Π°ΠΊΠΆΠ΅ прСдоставляСт Π½Π°ΠΌ ΠΏΠ°ΠΊΠ΅Ρ‚ create-react-app, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΠΊ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅.

React ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ / рСсурсы Facebook

React ΡˆΠΈΡ€ΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, Π½Π° Π²Π΅Π±-сайтС Facebook ΠΈ Π² Instagram. Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ Facebook Π³Π»ΡƒΠ±ΠΎΠΊΠΎ ΠΏΡ€ΠΈΠ²Π΅Ρ€ΠΆΠ΅Π½ этому.Π’ своСй производствСнной срСдС ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π±ΠΎΠ»Π΅Π΅ 50 тысяч ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React. Π§Π΅Ρ‚Ρ‹Ρ€Π΅ основных участника React Π½Π° GitHub — ΡˆΡ‚Π°Ρ‚Π½Ρ‹Π΅ сотрудники Facebook.

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ участники React.js

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠΎΠΌΠ°Π½Π΄Π° React Π²Π΅Π΄Π΅Ρ‚ Π±Π»ΠΎΠ³, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ постоянно прСдоставляСт Π²Π°ΠΌ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ выпускС.

Из-Π·Π° Π³Π»ΡƒΠ±ΠΎΠΊΠΎΠΉ привСрТСнности Facebook ΠΊ React Π² производствСнной срСдС, ΠΊΠΎΠ³Π΄Π° Π² React происходят критичСскиС измСнСния, Facebook постоянно прСдоставляСт Codemod, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚ эти измСнСния.

Codemod — это инструмСнт ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ строки, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚ измСнСния Π² вашСй ΠΊΠΎΠ΄ΠΎΠ²ΠΎΠΉ Π±Π°Π·Π΅.Когда новая спСцификация Π²Ρ…ΠΎΠ΄ΠΈΡ‚ Π² React, Codemod автоматичСски замСняСт старыС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π±ΠΎΠ»Π΅Π΅ Π½ΠΎΠ²ΠΎΠΉ спСцификациСй.

Π‘ 2015 Π³ΠΎΠ΄Π° ΠΏΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΡΡ‚ΡŒ React Π½Π΅ΡƒΠΊΠ»ΠΎΠ½Π½ΠΎ росла. Π£ Π½Π΅Π³ΠΎ ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ΅ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ сообщСство, Π° Π΅Π³ΠΎ Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΉ Π½Π° GitHub насчитываСт Π±ΠΎΠ»Π΅Π΅ 164 тысяч Π·Π²Π΅Π·Π΄. Π­Ρ‚ΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· 5 Π»ΡƒΡ‡ΡˆΠΈΡ… Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠ΅Π² Π½Π° GitHub.

Π Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΉ React Git. ΠŸΠ°ΠΊΠ΅Ρ‚ NPM

React Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΌΠΈΠ»Π»ΠΈΠΎΠ½Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΎΠΊ СТСнСдСльно.

Π‘ΠΎΠ»Π΅Π΅ 9 тысяч ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ сообщили Π½Π° Stackshare, Ρ‡Ρ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ React. Π’Ρ‹ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ ΠΈΠ· списка Fortune 500.

ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΡ… React

Reactiflux — это сообщСство, ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ созданноС для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² React. Π‘ΠΎΠ»Π΅Π΅ 110 тысяч Ρ‡Π»Π΅Π½ΠΎΠ² сообщСства ΡƒΡ‡Π°ΡΡ‚Π²ΡƒΡŽΡ‚ Π² Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ ΠΈ распространСнии ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ, связанных с React.

StackOverflow — ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых популярных Π²Π΅Π±-сайтов срСди Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π·Π°Π΄Π°Π½ΠΎ Π±ΠΎΠ»Π΅Π΅ 250 тысяч вопросов ΠΎ React ΠΈ связанных Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°Ρ….

РСакция Π½Π° Stackoverflow

Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях Π²Π°ΠΌ Π΄Π°ΠΆΠ΅ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ свои ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹. Π’ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ ΡƒΠΆΠ΅ доступно мноТСство бСсплатных ΠΈ Π·Ρ€Π΅Π»Ρ‹Ρ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ².

Π’ΠΎΡ‚ нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ²:

  • Microsoft создала Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Fluent UI, которая Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ свой UI (Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ‚ офис).
  • Material-UI ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ React, Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΡŽΡ‰ΠΈΠ΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ Google ΠΏΠΎ Material UI.
  • React-Bootstrap содСрТит ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ React, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠΏΡ€ΠΎΡ‰Π°ΡŽΡ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ с Bootstrap.
  • Π’Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ список ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Awesome React Π½Π° GitHub, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΉΡ‚ΠΈ большС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React.

Π•ΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΆΠ΅ Π·Ρ€Π΅Π»Ρ‹Π΅ связанныС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ / Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ с React.

  • Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚ΠΈΠ·Π°Ρ†ΠΈΡ, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ React Router. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ слоТной систСмой Π΄Π°Π½Π½Ρ‹Ρ…, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Redux ΠΈ MobX.
  • Для автоматичСского тСстирования ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Jest, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ‚Π°ΠΊΠΆΠ΅ находится Π² Facebook.
  • Для Π²Ρ‹Π·ΠΎΠ²ΠΎΠ² RESTful API ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ GraphQL.
  • Для Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡƒΠ·Π»Π° Π½Π° сторонС сСрвСра ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Express.js.

ВсС эти Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΈ инструмСнты Π²Π°ΠΆΠ½Ρ‹, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π² React, Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ мноТСство справок ΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ для всСго.

React ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΡƒΡŽ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ

Команда React поняла, Ρ‡Ρ‚ΠΎ JavaScript Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ быстро, Π½ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ DOM замСдляСт Π΅Π³ΠΎ. React ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚ измСнСния DOM. И ΠΎΠ½ нашСл Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ эффСктивный ΠΈ ΠΈΠ½Ρ‚Π΅Π»Π»Π΅ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ способ обновлСния DOM.

Π”ΠΎ React Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ² ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ Π½Π΅ΡƒΠΌΠ½ΠΎ обновляли DOM, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚Ρ€Π°Π·ΠΈΡ‚ΡŒ Π½ΠΎΠ²ΠΎΠ΅ состояниС. Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²Π΅Π»ΠΎ ΠΊ измСнСниям Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ части страницы.

React отслСТиваСт значСния состояния ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ DOM.Когда состояниС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° измСняСтся, React сравниваСт ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π΅ состояниС DOM с Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ½Π° Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ новая DOM. ПослС этого ΠΎΠ½ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ Π½Π°ΠΈΠΌΠ΅Π½Π΅Π΅ Π·Π°Ρ‚Ρ€Π°Ρ‚Π½Ρ‹ΠΉ способ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ DOM.

Π­Ρ‚ΠΎ Π½Π΅ каТСтся ΠΎΡ‡Π΅Π½ΡŒ простым, Π½ΠΎ React ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ справляСтся с этим Π·Π° кулисами. Он ΠΈΠΌΠ΅Π΅Ρ‚ мноТСство прСимущСств, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ мусора ΠΌΠ°ΠΊΠ΅Ρ‚Π°, ΠΊΠΎΠ³Π΄Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ Π²Ρ‹Ρ‡ΠΈΡΠ»ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ всСго ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ элСмСнта DOM.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах, ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ высокоэффСктивными.Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ экономия заряда Π±Π°Ρ‚Π°Ρ€Π΅ΠΈ ΠΈ мощности процСссора ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½Π°.

ΠŸΡ€ΠΎΡΡ‚Π°Ρ модСль программирования React позволяСт Π΅ΠΌΡƒ автоматичСски ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ состояниС ΠΏΡ€ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ Π΄Π°Π½Π½Ρ‹Ρ…. Π­Ρ‚ΠΎ происходит Π² памяти, поэтому быстро.

Π Π°Π·ΠΌΠ΅Ρ€ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ React Ρ‚Π°ΠΊΠΆΠ΅ Π½Π΅Π²Π΅Π»ΠΈΠΊ. Π­Ρ‚ΠΎ мСньшС 6 ΠšΠ‘ (ΠΌΠ΅Π½Π΅Π΅ 3 ΠšΠ‘ ΠΏΡ€ΠΈ сТатии с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ gzip). Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ мСньшС, Ρ‡Π΅ΠΌ Ρƒ ΠΊΠΎΠ½ΠΊΡƒΡ€Π΅Π½Ρ‚ΠΎΠ².

React Π»Π΅Π³ΠΊΠΎ Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

Π”ΠΈΠ·Π°ΠΉΠ½ React ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π΅Π½ для тСстирования.

  • Π’Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎΠ΅ тСстированиС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса — это Ρ…Π»ΠΎΠΏΠΎΡ‚ ΠΏΠΎ настройкС.Π‘ Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, для тСстирования Π² React Π²Π°ΠΌ потрСбуСтся ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ°Π»ΠΎ ΠΈΠ»ΠΈ совсСм Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ.
  • Π’Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ наличия Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² для тСстирования, Π½ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ быстро ΠΈ Π»Π΅Π³ΠΊΠΎ ΠΏΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ React с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ строки ΡƒΠ·Π»Π°.
  • Π’Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎΠ΅ тСстированиС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса выполняСтся ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ. Но тСстированиС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ строки происходит быстро, ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ количСство Π½Π°Π±ΠΎΡ€ΠΎΠ² тСстов Π·Π° Ρ€Π°Π·.
  • Π’Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎΠ΅ тСстированиС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса часто Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ Π² обслуТивании. React test ΠΌΠΎΠΆΠ½ΠΎ быстро Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π°ΠΊΠΈΡ… инструмСнтов, ΠΊΠ°ΠΊ Jest & Enzyme.

Π’ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ доступно мноТСство Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ² для тСстирования JavaScript, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для тСстирования React.js (ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это Ρ‚Π°ΠΊΠΆΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° JavaScript). НСкоторыС популярныС срСды тСстирования: Mocha, Jasmine, Tape, QUnit ΠΈ AVA.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

React — ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ инструмСнт для создания ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ…, Π²Π΅Π±-ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ.

ΠŸΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΡΡ‚ΡŒ ΠΈ ΠΏΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΡΡ‚ΡŒ React растут дСнь ΠΎΡ‚ΠΎ дня Π½Π΅ зря. ΠšΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π° React ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ Π»ΡƒΡ‡ΡˆΠ΅ ΠΎΡΠ²ΠΎΠΈΡ‚ΡŒ JavaScript — язык, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ сСгодня приходится ΠΏΠΎΡ‡Ρ‚ΠΈ 90% Π΄ΠΎΠ»ΠΈ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

Бпасибо, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Π»ΠΈ эту ΡΡ‚Π°Ρ‚ΡŒΡŽ. ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ мСня ΠΊ LinkedIn ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π² ΠΌΠΎΠ΅ΠΌ Π±Π»ΠΎΠ³Π΅.

Π£Ρ‡Π΅Π±Π½ΠΎΠ΅ пособиС ΠΏΠΎ

React: ΠΊΠΎΠ³Π΄Π° ΠΈ Π·Π°Ρ‡Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React — Software Consulting

React — это Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° JavaScript, созданная Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ ΠΈΠ· Facebook ΠΈ Instagram. Они использовали Π΅Π³ΠΎ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов для своих Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Π»Π΅Ρ‚, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π² 2013 Π³ΠΎΠ΄Ρƒ выпустили Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ Reach с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ. Π‘ Ρ‚Π΅Ρ… ΠΏΠΎΡ€ ΠΏΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΡΡ‚ΡŒ React выросла ΠΈ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ являСтся Π»ΠΈΠ΄Π΅Ρ€ΠΎΠΌ Π² ΠΌΠΈΡ€Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Javascript.Π­Ρ‚ΠΎ руководство ΠΏΠΎ React ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ вас с React, ΠΊΠ°ΠΊ ΠΎΠ½ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΈ ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ слСдуСт Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

Π’Π°ΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ React — это Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°, Π° Π½Π΅ ΠΏΠΎΠ»Π½Ρ‹ΠΉ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, ΠΊΠ°ΠΊ Angular ΠΈΠ»ΠΈ Vue. ИмСнно эта простота Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Π³ΠΎ ΠΎΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΈΠΌ Π² ΠΎΠ±ΡƒΡ‡Π΅Π½ΠΈΠΈ. Однако Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ сторонними Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°ΠΌΠΈ для получСния ΠΌΠΎΡ‰Π½Ρ‹Ρ… возмоТностСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΊΠΎΠ½ΠΊΡƒΡ€ΠΈΡ€ΡƒΡŽΡ‚ с большими Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°ΠΌΠΈ. React — это интСрфСйсная Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°, ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ ориСнтированная Π½Π° созданиС слоТных ΠΈ Π³ΠΈΠ±ΠΊΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов для Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.Π˜Π·ΡƒΡ‡ΠΈΠ² React.js, Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚Π΅ ΠΆΠ΅ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ ΠΊ React Native для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

ΠŸΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹, Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰ΠΈΠ΅ Ρ€Π΅Π°ΠΊΡ†ΠΈΠΈ

НС ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ нуТдаСтся ΠΈΠ»ΠΈ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React. Как Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ соблазн Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ Π±Π»Π΅ΡΡ‚ΡΡ‰ΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ ΠΈΠ·ΡƒΡ‡ΠΈΠ»ΠΈ. Однако React — это ΠΌΠΎΡ‰Π½Ρ‹ΠΉ инструмСнт, особСнно ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ вмСстС с Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ с ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½Π°ΠΌΠΈ ΠΏΠΎΡ‚ΠΎΠΊΠ°, Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ Redux ΠΈΠ»ΠΈ MobX. Если это ΠΎΡ‡Π΅Π½ΡŒ простоС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ Π±ΡƒΠ΄Π΅Ρ‚ написаниС Π΅Π³ΠΎ нСпосрСдствСнно Π½Π° JavaScript.

Если ваш ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя мноТСство ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ, часто ΠΌΠ΅Π½ΡΡŽΡ‰ΠΈΠΌΠΈΡΡ состояниями — Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ / Π½Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ элСмСнты Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, раскрытыС / свСрнутыС Ρ€Π°Π·Π΄Π΅Π»Ρ‹ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°, динамичСскиС Π²Ρ…ΠΎΠ΄Ρ‹, Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ / ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π»ΠΎΠ³ΠΈΠ½ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈ ΠΏΡ€Π°Π²Π° доступа — Ρ‚ΠΎΠ³Π΄Π° ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ для React. . React ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ этими ΠΈΠ·ΠΌΠ΅Π½ΡΡŽΡ‰ΠΈΠΌΠΈΡΡ состояниями ΠΈ динамичСски ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ прСдставлСния Π½Π° основС ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ состоянии.

Π”Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ Ρ…Π°Ρ€Π°ΠΊΡ‚Π΅Ρ€ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

React позволяСт ΠΎΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΎ ΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒΡΡ с этими слоТными структурами ΠΈ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΡΠΈΡ‚ΡƒΠ°Ρ†ΠΈΡŽ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ роста прилоТСния Π² ΠΌΠ°ΡΡˆΡ‚Π°Π±Π΅ ΠΈ объСмС.

Π’ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ DOM

Π­Ρ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ — ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΌΠΎΠΌΠ΅Π½Ρ‚ΠΎΠ² React. Π‘ΠΎΠ»ΡŒΡˆΠ°Ρ Ρ‡Π°ΡΡ‚ΡŒ Π΅Π³ΠΎ эффСктивности достигаСтся Π·Π° счСт использования React Virtual DOM. React Ρ…Ρ€Π°Π½ΠΈΡ‚ Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ копию DOM страницы Π·Π° кулисами. Когда происходит ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅, React сравниваСт Ρ‚Π΅ΠΊΡƒΡ‰ΡƒΡŽ модСль DOM с входящим ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ, ΠΎΡ‡Π΅Π½ΡŒ остороТно обновляя Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π±Ρ‹Π»ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΎ. Π­Ρ‚ΠΎ заставляСт Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π΅Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ страницы, Π° Π½Π΅ всю страницу. Π­Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ React Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»Π΅Π΅ эффСктивным ΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для слоТных ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… часто происходят измСнСния.

ΠœΠ½ΠΎΠ³ΠΎΡ€Π°Π·ΠΎΠ²Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

Π£Ρ‡Π΅Π±Π½ΠΈΠΊ No React Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π½Ρ‹ΠΌ Π±Π΅Π· упоминания ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΡΠ²Π»ΡΡŽΡ‚ΡΡ пСрвоклассными Ρ‡Π»Π΅Π½Π°ΠΌΠΈ React, ΠΈ компонСнтная Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Π½ΠΈΠΊΡƒΠ΄Π° Π½Π΅ дСнСтся. React ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ созданиС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒ Π² любоС врСмя, ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ Π² Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹. Π­Ρ‚ΠΎ экономит ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π±Ρ‹Π»ΠΎ создано ΠΎΠ΄Π½Π°ΠΆΠ΄Ρ‹, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ использовано Π² Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… мСстах ΠΏΠΎ всСму ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡŽ. Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ускоряСт процСсс внСсСния ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚.Π”ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ… ΠΊΠ°ΠΊ ΠΎ Π±Π»ΠΎΠΊΠ°Ρ… Π»Π΅Π³ΠΎ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΎΠ΅Π΄ΠΈΠ½ΡΡŽΡ‚ΡΡ вмСстС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ вашС Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π»Π΅Π³ΠΊΠΎ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ нСсколькими прилоТСниями ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ ΠΈ роста вашСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

Бинтаксис JSX

Π₯отя Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ Javascript с React, синтаксис JSX позволяСт Ρ€Π°ΡΡˆΠΈΡ€ΠΈΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ. Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚Π΅ JSX, Π½Π° самом Π΄Π΅Π»Π΅ становится ΠΏΡ€ΠΎΡ‰Π΅ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄ для React, ΠΈ React ΠΌΠΎΠΆΠ΅Ρ‚ Π»Π΅Π³ΠΊΠΎ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ этот ΠΊΠΎΠ΄ JSX Π² совмСстимый Ρ„ΠΎΡ€ΠΌΠ°Ρ‚.JSX позволяСт Π²Π°ΠΌ ΡΠΌΠ΅ΡˆΠΈΠ²Π°Ρ‚ΡŒ ваш HTML прямо с Javascript Π±Π΅Π· нСобходимости Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ„Π°ΠΉΠ»Π°Ρ… шаблонов. Π­Ρ‚ΠΎ позволяСт Π²Π°ΠΌ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ свой ΠΊΠΎΠ΄ Π½Π° основС логичСских сообраТСний (Ρ‡ΠΈΡ‚Π°ΠΉ: ΠΏΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ), Π° Π½Π΅ ΠΏΠΎ тСхнологиям.

Redux ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ

React становится особСнно ΠΌΠΎΡ‰Π½Ρ‹ΠΌ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ Π΅Π³ΠΎ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°ΠΌΠΈ. Один ΠΈΠ· самых популярных — Redux. Redux слСдуСт ΡƒΠΏΡ€ΠΎΡ‰Π΅Π½Π½ΠΎΠΌΡƒ ΡˆΠ°Π±Π»ΠΎΠ½Ρƒ ΠΏΠΎΡ‚ΠΎΠΊΠ° ΠΈ прСдоставляСт Π΅Π΄ΠΈΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ состояний, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π²Ρ‹ Ρ…Ρ€Π°Π½ΠΈΡ‚Π΅ всС Π΄Π°Π½Π½Ρ‹Π΅ вашСго прилоТСния.Он становится Π΅Π΄ΠΈΠ½Ρ‹ΠΌ источником достовСрной ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ состоянии вашСго прилоТСния ΠΈ ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ наблюдСниС Π·Π° ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ Π΄Π°Π½Π½Ρ‹ΠΌΠΈ ΠΈ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠΌΠΈ. Π—Π°Ρ‚Π΅ΠΌ React выполняСт ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½Ρ‹ΠΉ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ с Π»ΡŽΠ±Ρ‹ΠΌΠΈ измСнСниями Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅ Π΄Π°Π½Π½Ρ‹Ρ….

Π•Ρ‰Π΅ ΠΎΠ΄Π½Π° полСзная Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰Π°Ρ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡŽ проСктирования, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡƒΡŽ Π½Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ…, — Storybook. Storybook позволяСт ΠΈΠ·ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π΄Π΅Π»Π°Ρ‚ΡŒ это позволяСт Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ ΠΌΠ½ΠΎΠ³ΠΎΠΊΡ€Π°Ρ‚Π½ΠΎΠ³ΠΎ использования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ привязаны ТСстко ΠΊ контСксту, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΆΠΈΡ‚ΡŒ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.Он Ρ‚Π°ΠΊΠΆΠ΅ прСдоставляСт ΠΎΡ‚Π»ΠΈΡ‡Π½ΡƒΡŽ ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΊΡƒ для общСния Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Π½Π° Ρ€Π°Π²Π½Ρ‹Ρ… условиях.

Π Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° Ρ€ΠΎΠ΄Π½ΠΎΠΉ

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ бонусом для изучСния Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ React являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ прилоТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ React Native. Π•ΡΡ‚ΡŒ нСбольшоС прСпятствиС ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π²Π΅Ρ‰Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ. Однако ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ прилоТСния React Native ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡ€ΡƒΡŽΡ‚ Javascript, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΏΠΈΡˆΠ΅Ρ‚Π΅, Π² собствСнный ΠΊΠΎΠ΄, благодаря Ρ‡Π΅ΠΌΡƒ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅ΠΌΡ‹Π΅ Π²Π°ΠΌΠΈ прилоТСния выглядят Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ прилоТСния, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Π½Π° ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡƒ.

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° сообщСства ΠΈ инструмСнты Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°

НаконСц, React ΠΈΠΌΠ΅Π΅Ρ‚ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Π±Π°Π·Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΈ Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ со стороны ΠΈΠ½ΠΆΠ΅Π½Π΅Ρ€ΠΎΠ² Facebook.Π­Ρ‚ΠΎ растущая ΠΈ Ρ€Π°Π·Π²ΠΈΠ²Π°ΡŽΡ‰Π°ΡΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°. Если Ρƒ вас Π΅ΡΡ‚ΡŒ вопросы ΠΈΠ»ΠΈ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ·Π°ΠΈΠΌΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ для запуска ΠΈ Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, сообщСство с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ React ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚. Π’Π°ΠΊΠΆΠ΅ Π»Π΅Π³ΠΊΠΎ Π½Π°ΠΉΡ‚ΠΈ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ бСсплатноС ΡƒΡ‡Π΅Π±Π½ΠΎΠ΅ пособиС ΠΏΠΎ React, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΠΊ написанию ΠΊΠΎΠ΄Π°. ΠœΡ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ ΠΏΠΎ ссылкС Π² ΠΊΠΎΠ½Ρ†Π΅ этой ΡΡ‚Π°Ρ‚ΡŒΠΈ.

Π£ Π½ΠΈΡ… Ρ‚Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ инструмСнты Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° для ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ ΠΈ ΠΎΡ‚Π»Π°Π΄ΠΊΠΈ Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‚ΠΎΡ‡Π½ΠΎ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ происходит с вашим ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ наблюдСниС Π·Π° Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ DOM.Π­Ρ‚ΠΎ позволяСт ΠΎΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΎ Π΄ΠΈΠ°Π³Π½ΠΎΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ ΠΈ Π΄Π²Π°ΠΆΠ΄Ρ‹ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ, всС Π»ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ шаги Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ этого ΡƒΡ‡Π΅Π±Π½ΠΎΠ³ΠΎ пособия ΠΏΠΎ React

ΠœΡ‹ надССмся, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ»ΠΎΡΡŒ это Π²Π²ΠΎΠ΄Π½ΠΎΠ΅ руководство ΠΏΠΎ React, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚ΡΡ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ React, ΠΊΠΎΠ³Π΄Π° Π΅Π³ΠΎ слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

НачнитС Ρ€Π°Π±ΠΎΡ‚Ρƒ с React, посмотрСв Π²ΠΈΠ΄Π΅ΠΎ ΠΏΠΎ запросу «Руководство ΠΏΠΎ React для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…Β». Π—Π΄Π΅ΡΡŒ Π²Ρ‹ смоТСтС ΠΏΠΎΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠΈ этой Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Javascript.

Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° ΠΏΠΎΠΌΠΎΡ‰ΡŒ Π² Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° React, ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с нашСй ΠΊΠΎΠ½ΡΡƒΠ»ΡŒΡ‚Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΎΠΉ React, Π³Π΄Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΠΎΠΌΠΎΡ‰ΡŒ экспСртов Π² создании Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… интСрфСйсов Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

ΠŸΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΡΡ‚ΡŒ React ΠΈ ΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React — Scotch.io

Π•ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ вСских ΠΏΡ€ΠΈΡ‡ΠΈΠ½, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ React стал Ρ‚Π°ΠΊΠΈΠΌ популярным. Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, насколько популярСн React, Ρ‡Ρ‚ΠΎ нравится людям ΠΈ ΠΊΠΎΠ³Π΄Π° Π½Π°ΠΌ слСдуСт / Π½Π΅ слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React.

Π£ React ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… прСимущСств, Π½ΠΎ основныС ΠΈΠ· Π½ΠΈΡ…:

  • ЧистоС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ . Боздавая свои прСдставлСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ React, Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΉ ΠΈ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ для ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ использования ΠΊΠΎΠ΄.
  • БильноС сообщСство .Если Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ Ρ‚Π°ΠΊΠΎΠΉ ΠΏΠ°ΠΊΠ΅Ρ‚, ΠΊΠ°ΠΊ ΠΊΠ°Ρ€Ρ‚Π° ΠΈΠ»ΠΈ Π³Ρ€Π°Ρ„ΠΈΠΊ, ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠΏΠΎΡ€ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΠ°ΠΊΠ΅Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ. БильноС сообщСство ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ρƒ вас Π΅ΡΡ‚ΡŒ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ спСктр ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ сразу ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. МСньшС писСм для вас!
  • Высокая ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ . React для ΠΌΠ°Π»Ρ‹Ρ… ΠΈ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ быстро благодаря Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ DOM, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚.

Богласно опросу stateofjs.com 2018, Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ популярныС аспСкты React:

МногиС ΠΊΡ€ΡƒΠΏΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ React Π² производствС.Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΠΎΠ±Π½Π°Π΄Π΅ΠΆΠΈΠ²Π°Π΅Ρ‚, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Ρ€Π΅ΡˆΠ°Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React для своих собствСнных ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ², Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΈ ΠΌΠ°Π»Ρ‹Ρ…. Π’ΠΎΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· ΠΊΡ€ΡƒΠΏΠ½Π΅ΠΉΡˆΠΈΡ… сайтов, созданных с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ React:

  • Netflix
  • Facebook
  • Instagram
  • Airbnb
  • Cloudflare
  • Dropbox
  • BBC
  • Π€Π»ΠΈΠΏΠ±ΠΎΡ€Π΄
  • Imgur
  • Π’ΠΎΠ²Π°Ρ€ΠΈΡ‰ΠΈ ΠΏΠΎ ΠΏΠΎΡ‡Ρ‚Π΅
  • Reddit
  • И этот список ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ!

Π•Ρ‰Π΅ ΠΎΠ΄Π½Π° Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ Π²Π΅Ρ‰ΡŒ Π² ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠΈ React — это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эти знания для создания ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ с React Native.

  • Facebook ΠΈ Instagram
  • Walmart
  • Bloomberg
  • тСсла
  • Wix

Π’ 2019 Π³ΠΎΠ΄Ρƒ React являСтся ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· (Ссли Π½Π΅ самым) популярным JavaScript-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠΌ.

Богласно опросам StackOverflow Π·Π° 2018 Π³ΠΎΠ΄, React Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ 3-Π΅ мСсто Π² Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³Π΅ самых популярных.

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ Tailwind CSS с нуля

React Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ 2-Π΅ мСсто срСди Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΎΠ½ понравился:

Он Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ ΠΏΠ΅Ρ€Π²ΠΎΠ΅ мСсто Π² спискС самых вострСбованных инструмСнтов:

Богласно stateofjs.com Π·Π° 2018 Π³ΠΎΠ΄, React высоко ΠΎΡ†Π΅Π½ΠΈΠ²Π°Π΅Ρ‚ количСство ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ использовали Π΅Π³ΠΎ ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ снова .

  • 64,8% использовали ΠΈ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ снова
  • Волько 6,7% ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ большС Π½Π΅ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΈΠΌ

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΏΠΎ Π·Π²Π΅Π·Π΄Π°ΠΌ GitHub (Π·Π²Π΅Π·Π΄Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ Π»ΡƒΡ‡ΡˆΠΈΠΌ Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΎΠΌ ранТирования. НаТатиС Π½Π° Π·Π²Π΅Π·Π΄ΠΎΡ‡ΠΊΡƒ Π½Π΅ всСгда соотвСтствуСт использованию Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΉ ΠΆΠΈΠ·Π½ΠΈ) React Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Π²Ρ‚ΠΎΡ€ΠΎΠ΅ мСсто послС Vue для Π·Π²Π΅Π·Π΄ Π² Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°Ρ… / Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°Ρ… JavaScript.

  • РСакция: 119,425 Π·Π²Ρ‘Π·Π΄
  • Π Π΅ΠΉΡ‚ΠΈΠ½Π³: 124,544 Π·Π²Ρ‘Π·Π΄
  • Π£Π³Π»ΠΎΠ²ΠΎΠΉ: 44,175 Π·Π²Π΅Π·Π΄

React выдСляСтся Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ это чистый JavaScript.Если Ρƒ вас Π΅ΡΡ‚ΡŒ ΠΊΠΎΠΌΠ°Π½Π΄Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² JavaScript, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π½Π°ΡŽΡ‚ всС тонкости языка, Ρ‚ΠΎ это ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚.

JavaScript-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ смогут:

  • ΠžΠ±Π½ΡΡ‚ΡŒ JS
  • ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ сборки Π½Π° чистом JavaScript
  • ПониманиС стиля с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS-in-JS

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, это быстрыС прСдполоТСния. Π­Ρ‚ΠΎ Π½Π΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ JavaScript Π±ΡƒΠ΄Π΅Ρ‚ слоТно Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°ΠΌΠΈ. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ JavaScript прСуспСли Π±Ρ‹ Π² любой ΠΈΠ· Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ² Ρ‚ΠΈΠΏΠΎΠ² JavaScript.

Бамая большая Ρ€Π°Π·Π½ΠΈΡ†Π° Π² Ρ‚ΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° НЕ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React, — это ΠΊΠΎΠ³Π΄Π° ваша ΠΊΠΎΠΌΠ°Π½Π΄Π° состоит Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΠ· Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² JavaScript. Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ΅.

Бамая большая ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Π½Π΅ Π²Ρ‹Π±ΠΈΡ€Π°ΡŽΡ‚ React, Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Π½Π΅ самыС ΡΠΈΠ»ΡŒΠ½Ρ‹Π΅ Π² чистом JavaScript. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ‹ Π½Π΅ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React , Ссли ваша ΠΊΠΎΠΌΠ°Π½Π΄Π°:

  • Π˜ΠΌΠ΅Π΅Ρ‚ Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ², Π·Π½Π°ΠΊΠΎΠΌΡ‹Ρ… с HTML ΠΈ Π½Π΅ΡƒΠ΄ΠΎΠ±Π½Ρ‹Ρ… с JSX
  • Π˜ΠΌΠ΅Π΅Ρ‚ Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ², Π·Π½Π°ΠΊΠΎΠΌΡ‹Ρ… с CSS.

JSX ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ Π»ΡƒΡ‡ΡˆΠΈΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ для Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ², Π±ΠΎΠ»Π΅Π΅ Π·Π½Π°ΠΊΠΎΠΌΡ‹Ρ… с HTML.JSX ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹ΡƒΡ‡ΠΈΡ‚ΡŒ быстро, Π½ΠΎ это ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ кривая обучСния, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Π² своих Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°Ρ….

Π‘ΠΎ стилями React Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS, Sass ΠΈ CSS-in-JS. Если вашС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ CSS ΠΈΠ»ΠΈ Sass, Ρ‚ΠΎ вашим Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ Π»Π΅Π³ΠΊΠΎ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ Π±Π°Π·Π΅ ΠΊΠΎΠ΄Π°.

Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ CSS-in-JS, Ρ‚Π°ΠΊΠΎΠ΅ ΠΊΠ°ΠΊ стилизованныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, Ρ‚ΠΎ, вСроятно, Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€ΠΈΠΎΠ΄ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²ΠΊΠΈ.

Π­Ρ‚ΠΎΡ‚ Ρ€Π°Π·Π΄Π΅Π» Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊΠΈΠΌ Π΄Π»ΠΈΠ½Π½Ρ‹ΠΌ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ React ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для любой ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹. ΠŸΡ€ΠΎΡΡ‚ΠΎ для Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΊΠΎΠΌΠ°Π½Π΄ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒΡΡ большая кривая обучСния.ВсС зависит ΠΎΡ‚ вашСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π»ΠΈ Π²Ρ‹ Ρ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя Π½Π° эту ΠΊΡ€ΠΈΠ²ΡƒΡŽ обучСния.

React ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для любой ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹. ΠŸΡ€ΠΎΡΡ‚ΠΎ для Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΊΠΎΠΌΠ°Π½Π΄ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒΡΡ большая кривая обучСния.

ΠŸΠΎΠ½Ρ€Π°Π²ΠΈΠ»Π°ΡΡŒ эта ΡΡ‚Π°Ρ‚ΡŒΡ?

ΠŸΠΎΠ΄ΠΏΠΈΡˆΠΈΡ‚Π΅ΡΡŒ Π½Π° @chris__sev Π² Twitter

ΠŸΠΎΡ‡Π΅ΠΌΡƒ ΠΌΡ‹ создали React? — React Blog

БущСствуСт мноТСство Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ² JavaScript MVC. ΠŸΠΎΡ‡Π΅ΠΌΡƒ ΠΌΡ‹ создали React
ΠΈ Π·Π°Ρ‡Π΅ΠΌ Π²Π°ΠΌ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ?

React Π½Π΅ являСтся Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠΌ MVC.

React — это Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° для создания составных ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов. Π­Ρ‚ΠΎ ΠΏΠΎΠ±ΡƒΠΆΠ΄Π°Π΅Ρ‚
созданиС ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡŽΡ‰ΠΈΠ΅ΡΡ Π΄Π°Π½Π½Ρ‹Π΅
врСмя.

React Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹.

Π’Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ интСрфСйсы Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ с использованиСм шаблонов ΠΈΠ»ΠΈ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ² HTML.
Π­Ρ‚ΠΈ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ ΠΏΠΎΠ»Π½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ абстракций, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΌ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.
для создания вашСго ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса.

React ΠΏΠΎ-Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΊ созданию ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов, разбивая ΠΈΡ… Π½Π°
ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡ‚ΡƒΡŽΡ‰ΠΈΠ΅ .Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ React ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ настоящий ΠΏΠΎΠ»Π½ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ язык программирования.
для Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° прСдставлСний, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ прСимущСством ΠΏΠ΅Ρ€Π΅Π΄ шаблонами ΠΏΠΎ нСскольким ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°ΠΌ:

  • JavaScript — Π³ΠΈΠ±ΠΊΠΈΠΉ, ΠΌΠΎΡ‰Π½Ρ‹ΠΉ язык программирования с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ
    ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ абстракции. Π­Ρ‚ΠΎ нСвСроятно Π²Π°ΠΆΠ½ΠΎ для Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.
  • ОбъСдиняя Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ с ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΉ Π»ΠΎΠ³ΠΈΠΊΠΎΠΉ прСдставлСния, React ΠΌΠΎΠΆΠ΅Ρ‚ фактичСски
    упроститС Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ ΠΈ обслуТиваниС просмотров .
  • ВвСдя ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΈ содСрТимого Π² JavaScript, ΠΌΠΎΠΆΠ½ΠΎ
    Π±Π΅Π· Ρ€ΡƒΡ‡Π½ΠΎΠ³ΠΎ объСдинСния строк ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, мСньшая ΠΏΠ»ΠΎΡ‰Π°Π΄ΡŒ повСрхности для XSS
    уязвимости.

ΠœΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ создали JSX, Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ синтаксис
Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅, Ссли Π²Ρ‹ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅Ρ‚Π΅ Ρ‡ΠΈΡ‚Π°Π±Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ HTML сырому JavaScript.

Π Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ обновлСния ΠΎΡ‡Π΅Π½ΡŒ просты.

React Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ сияСт, ΠΊΠΎΠ³Π΄Π° ваши Π΄Π°Π½Π½Ρ‹Π΅ ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ с Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.

Π’ Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ JavaScript Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠ΅ Π΄Π°Π½Π½Ρ‹Π΅ измСнились.
ΠΈ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ внСситС измСнСния Π² DOM, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠΌ состоянии. Π”Π°ΠΆΠ΅ AngularJS,
ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСдоставляСт Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ интСрфСйс Ρ‡Π΅Ρ€Π΅Π· Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Ρ‹, Π° привязка Π΄Π°Π½Π½Ρ‹Ρ… Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚
функция связывания для Ρ€ΡƒΡ‡Π½ΠΎΠ³ΠΎ обновлСния ΡƒΠ·Π»ΠΎΠ² DOM.

React ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄.

ΠŸΡ€ΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° вызываСтся ΠΌΠ΅Ρ‚ΠΎΠ΄ render ,
созданиС Π»Π΅Π³ΠΊΠΎΠ³ΠΎ прСдставлСния вашСго прСдставлСния. Из этого прСдставлСния,
создаСтся строка Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ, которая вводится Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚. Когда ваши Π΄Π°Π½Π½Ρ‹Π΅
измСняСтся, ΠΌΠ΅Ρ‚ΠΎΠ΄ render вызываСтся снова. Π§Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ обновлСния ΠΊΠ°ΠΊ
ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ эффСктивнСС, ΠΌΡ‹ ΠΎΡ‚Π»ΠΈΡ‡Π°Π΅ΠΌ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΎΡ‚ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ Π²Ρ‹Π·ΠΎΠ²Π° Π΄ΠΎ
ΠΎΡ‚Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΡ‚ΡŒ с Π½ΠΎΠ²Ρ‹ΠΌ ΠΈ ΡΠ³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ
Π² Π”ΠžΠœ.

Π”Π°Π½Π½Ρ‹Π΅, Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌΡ‹Π΅ ΠΈΠ· render Π½Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π½ΠΈ строкой, Π½ΠΈ ΡƒΠ·Π»ΠΎΠΌ DOM — это
Π»Π΅Π³ΠΊΠΎΠ΅ описаниС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ½Π° Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ DOM.

ΠœΡ‹ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌ этот процСсс свСрка . ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ
этот jsFiddle, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€
ΠΏΡ€ΠΈΠΌΠΈΡ€Π΅Π½ΠΈΠ΅ Π² дСйствии.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ этот ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½Ρ‹ΠΉ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ выполняСтся ΠΎΡ‡Π΅Π½ΡŒ быстро (ΠΎΠΊΠΎΠ»ΠΎ 1 мс для TodoMVC), Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ
Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ явно ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ привязки Π΄Π°Π½Π½Ρ‹Ρ…. ΠœΡ‹ нашли Ρ‚Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄
ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ созданиС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

HTML — это Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π°Ρ‡Π°Π»ΠΎ.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ React ΠΈΠΌΠ΅Π΅Ρ‚ собствСнноС ΠΎΠ±Π»Π΅Π³Ρ‡Π΅Π½Π½ΠΎΠ΅ прСдставлСниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ
нСсколько довольно ΠΊΡ€ΡƒΡ‚Ρ‹Ρ… Π²Π΅Ρ‰Π΅ΠΉ с Π½ΠΈΠΌ:

  • Facebook ΠΈΠΌΠ΅Π΅Ρ‚ динамичСскиС Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‰ΠΈΠ΅ вмСсто HTML.
  • Instagram — это одностраничноС Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ построСнноС Π½Π° React ΠΈ
    ΠœΠ°Π³ΠΈΡΡ‚Ρ€Π°Π»ΡŒ.ΠœΠ°Ρ€ΡˆΡ€ΡƒΡ‚ΠΈΠ·Π°Ρ‚ΠΎΡ€ . Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ рСгулярно Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ ΠΊΠΎΠ΄ React с JSX.
  • ΠœΡ‹ создали Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽΡ‚ прилоТСния React Π² Π²Π΅Π±-Π²ΠΎΡ€ΠΊΠ΅Ρ€Π΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚
    React to drive , Ρ€ΠΎΠ΄Π½ΠΎΠΉ iOS, просматриваСт Ρ‡Π΅Ρ€Π΅Π· мост Objective-C.
  • Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ React
    Π½Π° сСрвСрС
    для SEO, ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, совмСстного использования ΠΊΠΎΠ΄Π° ΠΈ ΠΎΠ±Ρ‰Π΅ΠΉ гибкости.
  • Бобытия Π²Π΅Π΄ΡƒΡ‚ сСбя Π΅Π΄ΠΈΠ½ΠΎΠΎΠ±Ρ€Π°Π·Π½ΠΎ ΠΈ Π² соотвСтствии со стандартами Π²ΠΎ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….
    (Π²ΠΊΠ»ΡŽΡ‡Π°Ρ IE8) ΠΈ автоматичСски ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ
    Π΄Π΅Π»Π΅Π³ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ мСроприятия.

Π—Π°ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° https://reactjs.org, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρƒ нас Π΅ΡΡ‚ΡŒ
построСн. Наша докумСнтация ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π° для создания ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°,
Π½ΠΎ Ссли вас ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΡƒΡŽΡ‚ Π³Π°ΠΉΠΊΠΈ ΠΈ Π±ΠΎΠ»Ρ‚Ρ‹
БвяТись с нами!

Бпасибо Π·Π° Ρ‡Ρ‚Π΅Π½ΠΈΠ΅!

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° ReactJS ΠΈ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π΅Π³ΠΎ для своСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΠΌ ΠΏΡ€Π°Π²Π΄Π΅ Π² Π³Π»Π°Π·Π°.

ЭкосистСма front-end Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ постоянно развиваСтся.

НовыС инструмСнты Π²Ρ‹ΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ Π΅ΠΆΠ΅Π΄Π½Π΅Π²Π½ΠΎ, ΠΈ с Ρ‚Π°ΠΊΠΈΠΌ большим количСством Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ², доступных Π½Π° Π²Ρ‹Π±ΠΎΡ€, Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π°ΠΌ бизнСса стало слоТнСС ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, ΠΌΡ‹ Π·Π°ΠΌΠ΅Ρ‚ΠΈΠ»ΠΈ, Ρ‡Ρ‚ΠΎ Angular являСтся Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ срСди Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π΅Π² бизнСса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ хотят вСсти свой бизнСс Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅.

Однако Π΅ΡΡ‚ΡŒ Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° популярная срСда Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ интСрфСйсов ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ React JS, которая Π±ΡŒΠ΅Ρ‚ Ρ€Π΅ΠΊΠΎΡ€Π΄Ρ‹ Π² области Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ React JS?

React JS — это, ΠΏΠΎ сути, Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° JavaScript, созданная ΠΈ поддСрТиваСмая Facebook. По словам создатСля React JS Π”ΠΆΠΎΡ€Π΄Π°Π½Π° Π£ΠΎΠ»ΠΊΠ°, React — это эффСктивная, дСкларативная ΠΈ гибкая Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° JavaScript с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ для создания простых, быстрых ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Ρ… интСрфСйсов Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

Π‘ ΠΌΠΎΠΌΠ΅Π½Ρ‚Π° своСго запуска ΠΎΠ½ ΡˆΡ‚ΡƒΡ€ΠΌΠΎΠΌ Π·Π°Ρ…Π²Π°Ρ‚ΠΈΠ» пространство для Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

ПослСдний опрос, ΠΏΡ€ΠΎΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Stack Overflow, Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π», Ρ‡Ρ‚ΠΎ React — самый Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ Π²Π΅Π±-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Angular занял 9-Π΅ мСсто Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ спискС.

На сСгодняшний дСнь React ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π±ΠΎΠ»Π΅Π΅ 220 000 ΠΆΠΈΠ²Ρ‹Ρ… Π²Π΅Π±-сайтов. Π‘ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΠ³ΠΎ, Ρ‚Π°ΠΊΠΈΠ΅ Π³ΠΈΠ³Π°Π½Ρ‚Ρ‹ отрасли, ΠΊΠ°ΠΊ Apple, Netflix, Paypal ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅, Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠΆΠ΅ Π½Π°Ρ‡Π°Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React JS Π² своСй Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния.

Когда Ρ‚Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ React JS, Π² Ρ‚ΠΎΠΌ числС Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· Π²Π΅Π΄ΡƒΡ‰ΠΈΡ… ΠΌΠΈΡ€ΠΎΠ²Ρ‹Ρ… Π±Ρ€Π΅Π½Π΄ΠΎΠ², React, Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ, ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ экстраординарныС прСимущСства, Π²Π΅Ρ€Π½ΠΎ?

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π΅ΡΡ‚ΡŒ.

Π›ΡƒΡ‡ΡˆΠΈΠΉ вопрос …

ΠšΠ°ΠΊΠΎΠ²Ρ‹ основныС прСимущСства React JS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ±ΡƒΠ΄ΠΈΠ»ΠΈ Ρ‚Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ ΠΈ популярных Π±Ρ€Π΅Π½Π΄ΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ?

ΠšΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ прСимущСства react js для Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ

React JS ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ массу прСимущСств.Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ прСимущСства React JS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Π΅ΠΌ ΠΎΠ½ отличаСтся ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ… интСрфСйсных срСд Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

Π‘ΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ

React Π² основном позволяСт Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ части своСго прилоТСния ΠΊΠ°ΠΊ Π½Π° сторонС ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°, Ρ‚Π°ΠΊ ΠΈ Π½Π° сторонС сСрвСра, Ρ‡Ρ‚ΠΎ Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ процСсса Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

ΠŸΡ€ΠΎΡ‰Π΅ говоря, Ρ€Π°Π·Π½Ρ‹Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ части, ΠΈ всС внСсСнныС измСнСния Π½Π΅ Π²Π»ΠΈΡΡŽΡ‚ Π½Π° Π»ΠΎΠ³ΠΈΠΊΡƒ прилоТСния.

Π“ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ

По ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ интСрфСйсными Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°ΠΌΠΈ, ΠΊΠΎΠ΄ React ΠΏΡ€ΠΎΡ‰Π΅ Π² обслуТивании ΠΈ Π³ΠΈΠ±ΠΎΠΊ благодаря своСй ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ структурС.Π­Ρ‚Π° Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ, Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, экономит ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ΅ количСство Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΈ срСдств для прСдприятий.

ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ

React JS Π±Ρ‹Π» Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ для обСспСчСния высокой ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. Π―Π΄Ρ€ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ DOM ΠΈ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ Π½Π° сторонС сСрвСра, благодаря Ρ‡Π΅ΠΌΡƒ слоТныС прилоТСния Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΠΎΡ‡Π΅Π½ΡŒ быстро.

Удобство использования

Π Π°Π·Π²Π΅Ρ€Ρ‚Ρ‹Π²Π°Π½ΠΈΠ΅ React довольно просто Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ, Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ Π±Π°Π·ΠΎΠ²Ρ‹Π΅ знания JavaScript.

ЀактичСски, ΠΎΠΏΡ‹Ρ‚Π½Ρ‹ΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ JavaScript ΠΌΠΎΠΆΠ΅Ρ‚ Π»Π΅Π³ΠΊΠΎ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ всС тонкости Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° React Π·Π° дСнь ΠΈΠ»ΠΈ Π΄Π²Π°.

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ

Если Π²Ρ‹ Π΄ΡƒΠΌΠ°Π»ΠΈ, Ρ‡Ρ‚ΠΎ React ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, Π²Ρ‹ ΠΎΡˆΠΈΠ±Π°Π΅Ρ‚Π΅ΡΡŒ! Facebook ΡƒΠΆΠ΅ ΠΎΠ±Π½ΠΎΠ²ΠΈΠ» ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡƒ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ для ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ Android ΠΈ iOS.

Π˜Ρ‚Π°ΠΊ, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ прСимущСства Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° React, Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ Π²ΠΏΠ΅Ρ€Π΅Π΄ ΠΈ Ρ‚Π°ΠΊΠΆΠ΅ рассмотрим основныС ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ стоит Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ React JS для вашСго ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

7 ΠΏΡ€ΠΈΡ‡ΠΈΠ½, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ react js ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠΈΠΌ Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ для вашСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°

Если Π²Ρ‹ ΡƒΠΆΠ΅ ΡΠ»Ρ‹ΡˆΠ°Π»ΠΈ ΠΎ React, Π½ΠΎ всС Π΅Ρ‰Π΅ Π½Π΅ ΡƒΠ²Π΅Ρ€Π΅Π½Ρ‹, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² своСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ ΠΈΠ»ΠΈ Π½Π΅Ρ‚, этот пост ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚.

НиТС ΠΌΡ‹ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΠΌ 7 основных ΠΏΡ€ΠΈΡ‡ΠΈΠ½, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ React JS ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠΈΠΌ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠΌ для вашСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

Π›Π΅Π³ΠΊΠΎ Π²Ρ‹ΡƒΡ‡ΠΈΡ‚ΡŒ

React, ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ популярными интСрфСйсными Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°ΠΌΠΈ, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ Angular ΠΈ Vue, Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‰Π΅ Π² ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠΈ.

На самом Π΄Π΅Π»Π΅, это ΠΎΠ΄Π½Π° ΠΈΠ· основных ΠΏΡ€ΠΈΡ‡ΠΈΠ½, ΠΏΠΎΡ‡Π΅ΠΌΡƒ React ΠΏΡ€ΠΈΠΎΠ±Ρ€Π΅Π» Ρ‚Π°ΠΊΡƒΡŽ β€‹β€‹ΠΏΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΡΡ‚ΡŒ Π·Π° ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠ΅ врСмя. Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ прСдприятиям быстро ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ свои ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹.

Π’ΠΈΠ΄ΠΈΡ‚Π΅ Π»ΠΈ, Ρ‡Π΅ΠΌ слоТнСС ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΡƒΡŽ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΡŽ ΠΈΠ»ΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, Ρ‚Π΅ΠΌ большС Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΡƒΠΉΠ΄Π΅Ρ‚ Π½Π° Π½Π°Ρ‡Π°Π»ΠΎ процСсса Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.И ΠΌΡ‹, ΠΊΠ°ΠΊ люди, часто склонны ΠΈΠ·Π±Π΅Π³Π°Ρ‚ΡŒ Π²Π΅Ρ‰Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ.

Но, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ React — это простой Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π»Π΅Π³ΠΊΠΎ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΈ Π½Π°Ρ‡Π°Ρ‚ΡŒ, ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ ΠΈ ΠΊΡ€ΡƒΠΏΠ½Ρ‹Π΅ Π±Ρ€Π΅Π½Π΄Ρ‹ Π±ΠΎΠ»Π΅Π΅ склонны Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

ΠŸΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ интСрфСйсы

БСгодня качСство ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΈΠ³Ρ€Π°Π΅Ρ‚ Π²Π°ΠΆΠ½ΡƒΡŽ Ρ€ΠΎΠ»ΡŒ. Если ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс ΠΏΠ»ΠΎΡ…ΠΎ спроСктирован, это сниТаСт ΡˆΠ°Π½ΡΡ‹ прилоТСния Π½Π° успСх.

Но Ссли ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ высококачСствСнный ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс, Ρ‚ΠΎ большС шансов, Ρ‡Ρ‚ΠΎ вашим ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ понравится ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.

Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, созданиС ΠΌΠ½ΠΎΠ³ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ для выТивания ΠΈ процвСтания прилоТСния.

Π₯ΠΎΡ€ΠΎΡˆΠ°Ρ Π½ΠΎΠ²ΠΎΡΡ‚ΡŒ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ React позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ высококачСствСнныС ΠΈ Π±ΠΎΠ³Π°Ρ‚Ρ‹Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ интСрфСйсы с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ΄Π²ΠΎΠ΄ΠΈΡ‚ нас ΠΊ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ ΠΏΡƒΠ½ΠΊΡ‚Ρƒ.

ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΠΏΠΈΡΠ°Ρ‚ΡŒ нСстандартныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

React поставляСтся с JSX, Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ΠΌ синтаксиса, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ позволяСт ΠΏΠΈΡΠ°Ρ‚ΡŒ собствСнныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹.

Π­Ρ‚ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π² основном ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°ΡŽΡ‚ Ρ†ΠΈΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ HTML, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΄Π΅Π»Π°ΡŽΡ‚ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ всСх ΠΏΠΎΠ΄ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² приятным ΠΎΠΏΡ‹Ρ‚ΠΎΠΌ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ².

Π₯отя ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρƒ JSX Π±Ρ‹Π»ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ споров, ΠΎΠ½ ΡƒΠΆΠ΅ обсуТдался для написания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², создания ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ большого объСма ΠΈ прСобразования ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² HTML Π² Π΄Π΅Ρ€Π΅Π²ΡŒΡ ReactElement.

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅: идСальная мобильная ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° для вашСго бизнСс-прилоТСния

ΠŸΠΎΠ²Ρ‹ΡˆΠ°Π΅Ρ‚ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ²

ЧастыС обновлСния часто ΠΏΡ€Π΅Π²Ρ€Π°Ρ‰Π°ΡŽΡ‚ΡΡ Π² Π³ΠΎΠ»ΠΎΠ²Π½ΡƒΡŽ боль, ΠΊΠΎΠ³Π΄Π° ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΡΠ»ΠΎΠΆΠ½ΡƒΡŽ Π»ΠΎΠ³ΠΈΠΊΡƒ ΠΈ ΠΊΠΎΠ³Π΄Π° ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ сущСствСнно ΠΏΠΎΠ²Π»ΠΈΡΡ‚ΡŒ Π½Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹.

Но для Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ Facebook Ρ€Π°ΡΡˆΠΈΡ€ΠΈΠ» React Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ использования ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ².

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ использования ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π² React Π² основном позволяСт Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ Ρ€Π°Π·Π²Π΅Ρ€Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΈ ΠΈ Ρ‚Π΅ ΠΆΠ΅ Ρ†ΠΈΡ„Ρ€ΠΎΠ²Ρ‹Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹.

ΠŸΡ€ΠΎΡ†Π΅ΡΡ Ρ‚ΠΎΠΆΠ΅ прост! — Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΌΠΎΠ³ΡƒΡ‚ Π½Π°Ρ‡Π°Ρ‚ΡŒ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ простыС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°, тСкстовыС поля ΠΈ Ρ„Π»Π°ΠΆΠΎΠΊ, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΈΡ… Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ Π² ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚.

Π­Ρ‚ΠΎΡ‚ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ Π² основном обСспСчиваСт Π»ΡƒΡ‡ΡˆΠ΅Π΅ обслуТиваниС ΠΈ рост ΠΊΠΎΠ΄Π°, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π² React ΠΈΠΌΠ΅Π΅Ρ‚ свою ΡΠΎΠ±ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΡŽΡŽ Π»ΠΎΠ³ΠΈΠΊΡƒ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π»Π΅Π³ΠΊΠΎ ΠΌΠ°Π½ΠΈΠΏΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ, ΠΊΠ°ΠΊ слСдствиС, ΠΏΠΎΠ²Ρ‹ΡˆΠ°Π΅Ρ‚ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

ΠŸΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ быстрый Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³

Когда Π²Ρ‹ создаСтС слоТноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ с высокой Π½Π°Π³Ρ€ΡƒΠ·ΠΊΠΎΠΉ, становится ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ структуры прилоТСния Π² самом Π½Π°Ρ‡Π°Π»Π΅, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ²Π»ΠΈΡΡ‚ΡŒ Π½Π° ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ вашСго прилоТСния.

ΠŸΡ€ΠΎΡ‰Π΅ говоря, модСль DOM ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Ρ€Π΅Π²ΠΎΠ²ΠΈΠ΄Π½ΡƒΡŽ структуру. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π½Π΅Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ модификация Π½Π° Π±ΠΎΠ»Π΅Π΅ высоком ΡƒΡ€ΠΎΠ²Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ уТасно ΠΏΠΎΠ²Π»ΠΈΡΡ‚ΡŒ Π½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс прилоТСния. Π§Ρ‚ΠΎΠ±Ρ‹ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ, Facebook прСдставил Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ DOM.

Virtual DOM, ΠΊΠ°ΠΊ слСдуСт ΠΈΠ· названия, прСдставляСт собой Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ прСдставлСниС DOM, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ позволяСт сначала ΠΏΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ всС измСнСния Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ DOM, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Ρ‡ΠΈΡΠ»ΠΈΡ‚ΡŒ риски с ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠ΅ΠΉ.

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Ρ‚Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Π²Ρ‹ΡΠΎΠΊΡƒΡŽ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ прилоТСния ΠΈ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ Π»ΡƒΡ‡ΡˆΠΈΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΎΠΏΡ‹Ρ‚.

ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ для SEO

Для любого ΠΎΠ½Π»Π°ΠΉΠ½-бизнСса поисковая оптимизация — это ΠΊΠ»ΡŽΡ‡ ΠΊ успСху.

Богласно Moz, Ρ‡Π΅ΠΌ мСньшС врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы ΠΈ Π²Ρ‹ΡˆΠ΅ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π°, Ρ‚Π΅ΠΌ Π²Ρ‹ΡˆΠ΅ Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ прилоТСния Π² Google.

Благодаря быстрому Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Ρƒ React, ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°ΠΌΠΈ, Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ сокращаСт врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы, Ρ‡Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ компаниям ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π²ΠΎΠ΅ мСсто Π½Π° страницС Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠ² поисковой систСмы Google.

ΠŸΠΎΡΡ‚Π°Π²Π»ΡΠ΅Ρ‚ΡΡ с ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ Π½Π°Π±ΠΎΡ€ΠΎΠΌ инструмСнтов Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°

Π˜Π·ΡƒΡ‡Π΅Π½ΠΈΠ΅ Π½ΠΎΠ²Ρ‹Ρ… Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΠΈ ΠΈΡ… использованиС Π² Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ… ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ интСрСсным ΠΈ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ, Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΌ ΠΈΡ… использовании.

Facebook ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚ это, ΠΈ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΠΎ этой ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅ ΠΎΠ½ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΡΡ‚ΠΎΠ»ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ инструмСнты Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ React ΠΈ инструмСнты Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° Chrome Π² свою срСду React JS.

Π­Ρ‚ΠΈ инструмСнты React Π² основном ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ²Π°Ρ‚ΡŒ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ ΠΈ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, Π½Π°Π±Π»ΡŽΠ΄Π°Ρ‚ΡŒ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡŽ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ состояниС ΠΈ свойства ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ².

Бильная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° сообщСства

Как ΠΈ Angular, React Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ ΡΠΈΠ»ΡŒΠ½ΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ сообщСства, Ρ‡Ρ‚ΠΎ являСтся ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· основных ΠΏΡ€ΠΈΡ‡ΠΈΠ½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React JS Π² вашСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅.

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ дСнь большоС количСство ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² React вносят свой Π²ΠΊΠ»Π°Π΄ Π² Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ React Π»ΡƒΡ‡ΡˆΠΈΠΌ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠΌ. Π’ настоящСС врСмя React JS ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ» 136 079 Π·Π²Π΅Π·Π΄ Π½Π° Github ΠΈ 1331 постоянный участник.

НС Ρ‚ΠΎΠ»ΡŒΠΊΠΎ это, Π½ΠΎ ΠΈ экспСрты Ρ‚Π°ΠΊΠΆΠ΅ рСгулярно Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ бСсплатныС ΡƒΡ‡Π΅Π±Π½Ρ‹Π΅ пособия ΠΏΠΎ React Π½Π° Youtube ΠΈ ΠΏΠΈΡˆΡƒΡ‚ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹Π΅ ΡƒΡ‡Π΅Π±Π½Ρ‹Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ ΠΈ Π±Π»ΠΎΠ³ΠΈ ΠΏΠΎ React Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅.НапримСр, простой поиск «бСсплатного руководства ΠΏΠΎ ReactΒ» Π² Google Π΄Π°Π΅Ρ‚ 13 000 000 Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠ².

Помимо этого, экспСрты React Ρ‚Π°ΠΊΠΆΠ΅ рСгулярно Ρ€Π΅ΡˆΠ°ΡŽΡ‚ сомнСния Π½Π° сайтах QA, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Stack Overflow ΠΈ Quora, Π° это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ссли Π²Ρ‹ ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡƒΠ΄ΡŒ застрянСтС ΠΏΡ€ΠΈ использовании React, Π²Ρ‹ всСгда смоТСтС ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π½Π°Π΄Π΅ΠΆΠ½Ρ‹Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ, прСдоставлСнныС экспСртами.

Он ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π»ΡƒΡ‡ΡˆΡƒΡŽ ΡΡ‚Π°Π±ΠΈΠ»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΊΠΎΠ΄Π°

React слСдуСт нисходящСму ΠΏΠΎΡ‚ΠΎΠΊΡƒ Π΄Π°Π½Π½Ρ‹Ρ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π½Π° Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΡƒΡŽ структуру Π½Π΅ ΠΏΠΎΠ²Π»ΠΈΡΡŽΡ‚ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ измСнСния Π² Π΅Π΅ Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅ΠΉ структурС.

Π˜Ρ‚Π°ΠΊ, всякий Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ вносит измСнСния Π² ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, Π΅ΠΌΡƒ Π½ΡƒΠΆΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ состояниС ΠΈ внСсти ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΠΎΠΏΡ€Π°Π²ΠΊΠΈ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚.

Π­Ρ‚ΠΎΡ‚ ΠΏΠΎΡ‚ΠΎΠΊ Π΄Π°Π½Π½Ρ‹Ρ… ΠΈ структура, Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅, ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‚ Π»ΡƒΡ‡ΡˆΡƒΡŽ ΡΡ‚Π°Π±ΠΈΠ»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΊΠΎΠ΄Π° ΠΈ ΠΏΠ»Π°Π²Π½ΡƒΡŽ Ρ€Π°Π±ΠΎΡ‚Ρƒ прилоТСния.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΌΠ½ΠΎΠ³ΠΈΠΌΠΈ компаниями ΠΈΠ· списка Fortune 500

ВсС Π΅Ρ‰Π΅ ΡΠΎΠΌΠ½Π΅Π²Π°Π΅Ρ‚Π΅ΡΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React ΠΈΠ»ΠΈ Π½Π΅Ρ‚?

ΠžΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π»ΡΡŽΡ‰ΠΈΠΌΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ React. Высячи ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ, Π² Ρ‚ΠΎΠΌ числС нСсколько ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ ΠΈΠ· списка Fortune 500, Π²Ρ‹Π±Ρ€Π°Π»ΠΈ React JS для своих Π²Π΅Π±-сайтов ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

Airbnb, Tesla, Tencent QQ ΠΈ Walmart — ΠΎΠ΄Π½ΠΈ ΠΈΠ· Π²Π΅Π΄ΡƒΡ‰ΠΈΡ… Π±Ρ€Π΅Π½Π΄ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ создали свои ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ прилоТСния с использованиСм ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹ React Native.

Π‘ Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, Π²Π΅Π±-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ

React Π² настоящСС врСмя ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ извСстными компаниями, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Netflix, Paypal, NASA, BBC, Lyft ΠΈ New York Times, ΠΈ это лишь Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· Π½ΠΈΡ….

Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ ΡƒΡΠΏΠ΅ΡˆΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ ΠΈΠ· списка Fortune 500 ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ React & React Native, React Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠΎΠΉ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π²Π΅Π±-интСрфСйса ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

На этом ΠΌΡ‹ подошли ΠΊ ΠΊΠΎΠ½Ρ†Ρƒ этого Π±Π»ΠΎΠ³Π°. ΠœΡ‹ надССмся, Ρ‡Ρ‚ΠΎ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, ΠΏΠΎΡ‡Π΅ΠΌΡƒ React JS — ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ интСрфСйсный Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ.

Как ΠΈ Angular, React Ρ‚Π°ΠΊΠΆΠ΅ являСтся качСствСнным Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠΌ ΠΈ заслуТиваСт вашСго внимания.

Π˜Ρ‚Π°ΠΊ, Ρ‡Π΅Π³ΠΎ Π²Ρ‹ всС Π΅Ρ‰Π΅ ΠΆΠ΄Π΅Ρ‚Π΅?

НаймитС React JS Developer ΠΈ Π½Π°Ρ‡Π½ΠΈΡ‚Π΅ прямо сСгодня!

И ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅, созданиС ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎΠ³ΠΎ прилоТСния React JS Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ наняли Π»ΡƒΡ‡ΡˆΡƒΡŽ компанию ΠΏΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ React JS. Π˜Ρ‚Π°ΠΊ, ΡΠ²ΡΠΆΠΈΡ‚Π΅ΡΡŒ с Π½Π°ΠΌΠΈ сСгодня, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π±Π΅ΡΠΏΠ»Π°Ρ‚Π½ΡƒΡŽ ΠΊΠΎΠ½ΡΡƒΠ»ΡŒΡ‚Π°Ρ†ΠΈΡŽ ΠΏΠΎ Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ ReactJS Π½Π°Π±ΠΈΡ€Π°Π΅Ρ‚ Ρ‚Π°ΠΊΡƒΡŽ β€‹β€‹ΠΏΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΡΡ‚ΡŒ Π² наши Π΄Π½ΠΈ | by Thinkwik

ReactJS — это Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° JavaScript с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ, разработанная Facebook для быстрого ΠΈ эффСктивного создания насыщСнных ΠΈ интСрСсных Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ с ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ написаниСм ΠΊΠΎΠ΄Π°. Основная Ρ†Π΅Π»ΡŒ ReactJS — ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ максимально Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡƒΡŽ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π°. Π•Π³ΠΎ сила Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² сосрСдоточСнии внимания Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ…. ВмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π°Π΄ всСм Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ReactJS позволяСт Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ Ρ€Π°Π·Π±ΠΈΡ‚ΡŒ слоТный ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс Π½Π° Π±ΠΎΠ»Π΅Π΅ простыС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹.

ИспользованиС ReactJS ΠΈ Π΅Π³ΠΎ ΠΏΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΡΡ‚ΡŒ

Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Angular, Π±Ρ‹Π»ΠΈ доступны, ΠΊΠΎΠ³Π΄Π° Facebook Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π» ReactJS, Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Π±Ρ‹Π»ΠΈ Π²Ρ‹Π½ΡƒΠΆΠ΄Π΅Π½Ρ‹ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ, ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°ΡŽΡ‚ΡΡ с ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ ΠΏΠ΅Ρ€Π΅Π΄Π΅Π»ΠΊΠΈ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° ΠΊΠΎΠ΄ΠΎΠ² Π΄Π°ΠΆΠ΅ ΠΏΡ€ΠΈ создании ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ часто ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ. Им Π½ΡƒΠΆΠ½Π° Π±Ρ‹Π»Π° структура, которая ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ»Π° Π±Ρ‹ ΠΈΠΌ Ρ€Π°Π·Π±ΠΈΠ²Π°Ρ‚ΡŒ слоТныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄Ρ‹ для Π±ΠΎΠ»Π΅Π΅ быстрого Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ своих ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².

ReactJS прСдоставил Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ искали Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ.Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ JSX (ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ синтаксис, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°Π²Ρ‹Ρ‡ΠΊΠΈ HTML, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ синтаксиса Ρ‚Π΅Π³ΠΎΠ² HTML для Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… ΠΏΠΎΠ΄ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²). Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ для содСйствия ΠΏΠΎΡΡ‚Ρ€ΠΎΠ΅Π½ΠΈΡŽ ΠΌΠ°ΡˆΠΈΠ½ΠΎΡ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹Ρ… ΠΊΠΎΠ΄ΠΎΠ² ΠΈ Π² Ρ‚ΠΎ ΠΆΠ΅ врСмя объСдинСния ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π² ΠΎΠ΄ΠΈΠ½ провСряСмый Ρ„Π°ΠΉΠ».

БСгодня ReactJS стал ΠΎΡ‡Π΅Π½ΡŒ популярным ΠΈΠ·-Π·Π° своСй Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ простоты ΠΈ гибкости. МногиС Π΄Π°ΠΆΠ΅ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ это Π±ΡƒΠ΄ΡƒΡ‰ΠΈΠΌ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ. По ΠΎΡ†Π΅Π½ΠΊΠ°ΠΌ, Π±ΠΎΠ»Π΅Π΅ 1300 Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΈ Π±ΠΎΠ»Π΅Π΅ 94000 сайтов ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ReactJS.

Частично эта огромная ΠΏΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΡΡ‚ΡŒ связана с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π²Π΅Π΄ΡƒΡ‰ΠΈΠ΅ ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ†ΠΈΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Facebook, PayPal, Uber, Instagram ΠΈ Airbnb, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π΅Π³ΠΎ для Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ, связанных с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ интСрфСйсом. Π­Ρ‚ΠΎ Π΄ΠΎΠ²Π΅Ρ€ΠΈΠ΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ»ΠΎ ΠΊ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΡƒ мноТСство людСй.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ люди ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ReactJS

  • Π­Ρ‚ΠΎ позволяСт Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΠΏΠΈΡΠ°Ρ‚ΡŒ свои прилоТСния Π½Π° JavaScript. JSX — ΠΎΠ΄Π½Π° ΠΈΠ· Π²Π΅Π»ΠΈΡ‡Π°ΠΉΡˆΠΈΡ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, которая Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ReactJS простым, Π½ΠΎ ΠΈ интСрСсным. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΈ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΎΠ½Π° появляСтся Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.Он пСрСносит HTML прямо Π² ваш JS.
  • ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒ слоТный ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс. ИдСя ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² — Π²ΠΎΡ‚ Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ReactJS ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ. ВмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡ‚ΡŒΡΡ ΠΎΠ±ΠΎ всСм Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, это позволяСт Ρ€Π°Π·Π±ΠΈΡ‚ΡŒ ΡΠ»ΠΎΠΆΠ½ΡƒΡŽ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ UI / UX Π½Π° Π±ΠΎΠ»Π΅Π΅ простыС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹. Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½Ρ‹ΠΌ.
  • Бвойства ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π·Π°ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ с использованиСм ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… Π΄Π°Π½Π½Ρ‹Ρ…. ΠŸΠ»ΡŽΡΡ‹ ReactJS ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ Π΄Π°Π½Π½Ρ‹Π΅ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌΡƒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса.Π­Ρ‚ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π΅Π» ΠΏΡ€ΠΈ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π΅ JSX-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ².
  • БостояниС позволяСт Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒ всС измСнСния Π² ΠΎΠ΄Π½ΠΎΠΌ Ρ€Π°Π·Π΄Π΅Π»Π΅. ΠŸΡ€ΠΈ использовании ReactJS Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Π±Π΅Ρ€ΡƒΡ‚ вСсь ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒΡΡ Π²ΠΎ врСмя прилоТСния, ΠΈ ΠΏΠΎΠΌΠ΅Ρ‰Π°ΡŽΡ‚ Π΅Π³ΠΎ Π² ΠΎΠ΄Π½ΠΎ мСсто (состояниС). Π‘ состояниСм Π΅Π΄ΠΈΠ½ΠΎΠ΅ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ становится ΠΎΡ‡Π΅Π½ΡŒ простым, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ всС Π΄Π΅Ρ‚Π°Π»ΠΈ взяты ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ€Π°Π·Π΄Π΅Π»Π°.
  • Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Virtual DOM, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ быстрым. Когда создавался ReactJS, Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ прСдсказывали, Ρ‡Ρ‚ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ старого HTML станСт ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½Ρ‹ΠΌ ΠΈ дорогостоящим.Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, идСя Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ DOM ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ReactJS Π·Π½Π°Ρ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΎΡ‚Ρ€ΠΈΡΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Π΅ части DOM, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° Π΄Π°Π½Π½Ρ‹Π΅ Π±Ρ‹Π»ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Ρ‹. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ быстро Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΠ΅Ρ‚, ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π΅ΡˆΠ°ΡŽΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ взаимодСйствия с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ.

Π‘Ρ€Π°Π²Π½Π΅Π½ΠΈΠ΅ ReactJS с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ популярными Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°ΠΌΠΈ

Π₯отя ReactJS — ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Ρ…ΠΎΡ‡Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ рСгулярно, Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ Ρ‚Π°ΠΊΠΆΠ΅ эффСктивны. Π’ΠΎΡ‚ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ΅ сравнСниС этих Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ².

  • ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π²ΠΎ врСмя выполнСния : И ReactJS, ΠΈ VueJS ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ, ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ касаСтся скорости. Π’ ReactJS ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π· ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° запускаСтся ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½Ρ‹ΠΉ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ для всСго ΠΏΠΎΠ΄Π΄Π΅Ρ€Π΅Π²Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². Если Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π°, рассмотритС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ использования PureComponents. Π’ VueJS зависимости ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² автоматичСски ΠΎΡ‚ΡΠ»Π΅ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ Π²ΠΎ врСмя Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π°. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ систСмС извСстны ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° послС измСнСния состояния.
  • ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ HTML ΠΈ CSS: ВсС Π² ReactJS — это JS.КаТдая структура HTML выраТаСтся Ρ‡Π΅Ρ€Π΅Π· JSX, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ послСдниС Ρ‚Π΅Π½Π΄Π΅Π½Ρ†ΠΈΠΈ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ CSS Π²Π½ΡƒΡ‚Ρ€ΠΈ JS. Однако VueJS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ классичСскиС Π²Π΅Π±-Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠ°Π΅Ρ‚ ΠΈΡ….
  • ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π²ΠΎ врСмя выполнСния: ΠžΡ†Π΅Π½ΠΊΠ° ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Angular ΠΈ React ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ReactJS обСспСчиваСт Π»ΡƒΡ‡ΡˆΡƒΡŽ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ. AngularJS становится ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΌΠ΅Π΄Π»Π΅Π½Π½Ρ‹ΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ всС Π² Π΅Π³ΠΎ области мСняСтся. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Ρ†ΠΈΠΊΠ» дайдТСста Π² AngularJS Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ выполнСния нСсколько Ρ€Π°Π· ΠΏΠ΅Ρ€Π΅Π΄ стабилизациСй, Ссли ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ запускаСт ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅.ReactJS Π½Π΅ испытываСт этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ‚ систСму отслСТивания зависимостСй, которая ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π°ΡΠΈΠ½Ρ…Ρ€ΠΎΠ½Π½ΡƒΡŽ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΠΈ. Π₯отя послС появлСния Angular 4 сообщСство Angular ΡƒΠ»ΡƒΡ‡ΡˆΠΈΠ»ΠΎ это Π² Π³ΠΎΡ€Π°Π·Π΄ΠΎ большСй стСпСни.
  • Π­Ρ‚Π°ΠΏ обучСния: Для Π½ΠΎΠ²ΠΎΠ³ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°, Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰Π΅Π³ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с ReactJS, этап обучСния ΠΌΠ΅Π½Π΅Π΅ ΠΊΡ€ΡƒΡ‚ΠΎΠΉ ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с AngularJS. Π’ случаС ReactJS Π½ΡƒΠΆΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с JS ΠΈ HTML. Однако ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ AngularJS — Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ процСсс, Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰ΠΈΠΉ соблюдСния ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ½ΠΎΠ³ΠΈΡ… ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΉ.МСнСС ΠΎΠΏΡ‹Ρ‚Π½Ρ‹ΠΌ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ часто Π±Ρ‹Π²Π°Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ слоТно Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ с AngularJS ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с ReactJS.

Из сравнСния, ReactJS выглядит Π±ΠΎΠ»Π΅Π΅ сильной структурой ΠΈΠ·-Π·Π° способности Ρ€Π°Π·Π±ΠΈΠ²Π°Ρ‚ΡŒ слоТный ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс ΠΈ позволяя ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ. Однако Π΅Π³ΠΎ нСпосрСдствСнный ΠΊΠΎΠ½ΠΊΡƒΡ€Π΅Π½Ρ‚ Vue.JS Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ слСдуСт Π·Π° Π½ΠΈΠΌ. Π‘ΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡ‚ΡŒ ReactJS ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ лидСрство зависит ΠΎΡ‚ Π±ΡƒΠ΄ΡƒΡ‰ΠΈΡ… ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠΉ, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ рСгулярныС обновлСния.

Π‘ΡƒΠ΄ΡƒΡ‰Π΅Π΅ ReactJS

Facebook ΠΈ вся ΠΊΠΎΠΌΠ°Π½Π΄Π° ReactJS продСмонстрировали ΠΏΡ€ΠΈΠ²Π΅Ρ€ΠΆΠ΅Π½Π½ΠΎΡΡ‚ΡŒ ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡŽ эффСктивности ReactJS.Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ быстро Ρ€Π°ΡΡ‚ΡƒΡ‰ΡƒΡŽ ΠΊΠΎΠ½ΠΊΡƒΡ€Π΅Π½Ρ†ΠΈΡŽ со стороны Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ², Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Vue.js. НСкоторыС ΠΈΠ· Π²Π΅Ρ‰Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… слСдуСт ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ Π² Π±ΡƒΠ΄ΡƒΡ‰ΠΈΡ… выпусках, Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚:

  • Энтузиастам ReactJS слСдуСт ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹Ρ… Ρ‚ΠΈΠΏΠΎΠ² Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π°. НапримСр, ΠΊΠΎΠΌΠ°Π½Π΄Π° ReactJS, скорСС всСго, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ Π² JSX ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ синтаксис Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π°, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π½Π΅ Π½ΡƒΠΆΠ½Ρ‹ ΠΊΠ»ΡŽΡ‡ΠΈ.
  • Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠΆΠΈΠ΄Π°ΡŽΡ‚ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ Π² ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ошибок. Π’ ΠΏΡ€ΠΎΡˆΠ»ΠΎΠΌ случаи ошибок Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ выполнСния Π²ΠΎ врСмя Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° часто ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΠ»ΠΈ ReactJS Π² Π½Π΅ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ΅ состояниС ΠΏΠΎΠ»ΠΎΠΌΠΊΠΈ.Π­Ρ‚ΠΎ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ рСгулярного обновлСния страницы. ВСкущая модСль устранСния ошибки Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Π΅Π΅ использовании Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ… ΠΈΠ»ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄Π°Ρ… ΠΆΠΈΠ·Π½Π΅Π½Π½ΠΎΠ³ΠΎ Ρ†ΠΈΠΊΠ»Π°. Π₯отя это ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ ΠΏΠΎΠ²Ρ€Π΅ΠΆΠ΄Π΅Π½Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ…, это Π½Π΅ Π»ΡƒΡ‡ΡˆΠ°Ρ идСя для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ UX.
  • Π£Π»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠ΅ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° Π½Π° сторонС сСрвСра. Π₯отя послСдний ReactJS поставляСтся с ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ пСрСписанным сСрвСрным Ρ€Π΅Π½Π΄Π΅Ρ€ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Π³ΠΎ ΠΎΡ‡Π΅Π½ΡŒ быстрым ΠΈ ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΌ для ΠΏΠΎΡ‚ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ, это ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ мСсто для внСсСния ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠΉ.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ ReactJS ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для бизнСса

Π’ сфСрС высоких Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΠΏΡ€Π΅Π΄ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚Π΅Π»ΠΈ ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ всСгда ΠΈΡ‰ΡƒΡ‚ Π»ΡƒΡ‡ΡˆΠΈΠ΅ способы Π΄Π°Ρ‚ΡŒ своСму бизнСсу ΠΊΠΎΠ½ΠΊΡƒΡ€Π΅Π½Ρ‚Π½ΠΎΠ΅ прСимущСство.ReactJS — ΠΎΠ΄Π½Π° ΠΈΠ· ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‰ΠΈΡ… прСдприятиям ΠΏΡ€Π΅Π²Π·ΠΎΠΉΡ‚ΠΈ своих ΠΊΠΎΠ½ΠΊΡƒΡ€Π΅Π½Ρ‚ΠΎΠ² ΠΏΡ€ΠΈ создании Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

  • ReactJS позволяСт прСдприятиям ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ прилоТСния с ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½Π½Ρ‹ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ интСрфСйсом для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ взаимодСйствия с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ. Π­Ρ‚ΠΎ тСхнология, которая ΠΈΠΌ Π½ΡƒΠΆΠ½Π° для Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ взаимодСйствия с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ, ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡ CTR ΠΈ конвСрсии.
  • Компаниям, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠΌ ReactJS, Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π° Π»ΡƒΡ‡ΡˆΠ°Ρ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с компаниями, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠΌΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ReactJS ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ DOM, это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ прилоТСния Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ быстрСС ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠΈΠΉ UX.
  • ReactJS Π±Ρ‹Π» Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ ΠΎΠ±Ρ‰Π΅Π΅ количСство страниц, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹Ρ… с сСрвСра Π²Π΅Π±-сайта. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΡƒΠ·Π»Ρ‹ для Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° Π½Π° сторонС ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ встроСнныС инструмСнты ΠΈ Π΄Π°ΠΆΠ΅ ΡΠΎΠΊΡ€Π°Ρ‰Π°Ρ‚ΡŒ Π±ΡŽΠ΄ΠΆΠ΅Ρ‚Ρ‹ Π½Π° обслуТиваниС Π΄Π΅Π»Π°Π΅Ρ‚ ReactJS высокоэффСктивным.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΡ‹Ρ… Ρ†Π΅Π»Π΅ΠΉ прСдприятия с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π²Π°ΡˆΠΈΡ… бизнСс-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Π²Π°ΠΆΠ½ΠΎ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ созданы ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ ΠΈ Π² соотвСтствии с ΠΏΠ΅Ρ€Π΅Π΄ΠΎΠ²Ρ‹ΠΌΠΈ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ°ΠΌΠΈ.

Leave a Comment

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *