Что может крутого сделать React.js чего не может jQuery [закрыт]

#jquery #reactjs

        
             
                
                    
                        
                            Закрыт. Данный вопрос необходимо конкретизировать. Ответы
на него в данный момент не принимаются.
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            Хотите улучшить этот вопрос? Переформулируйте вопрос,
чтобы он был сосредоточен только на одной проблеме, отредактировав его.
                        
                        Закрыт 1 год назад.
                                                                                
           
                
        
Всегда писал на jQuery. Но вот недавно сделал хелло ворлд на AngularJS, Angular2,
React.js, Vue.js. И честно говоря не нашел в них ничего супер крутого. Скажите, пожалуйста,
лучше с реальным примером — где jQuery проигрывает ReactJS. Желательно в связке с asp.net
mvc/api
    

Ответы

Ответ 1

В реакте другой подход к рендерингу интерфейса. Как любят говорить, интерфейс становится
функцией от состояния. Вот это и есть круто. Накручивать реакт на мвц-модель на фронтенде
я бы не стал (хотя долго пытался сделать это в связке с mobx). Одним днём, разбираясь
с react-apollo (graphql клиент) мне открылось оно - react composition. В этот день,
после более года работы с реактом, я, как мне кажется, действительно понял, что такое
реакт.

Реакт позволяет абстрагироваться от DOM и в этом большой плюс. Тестировать значительно
проще.

Важно понять, что мы входим (русское сообщество ещё, судя по всему, входит, а мировое
уже вошло) в эпоху компонентного веба. jquery в него не вписывается. Не зря гугл пропагандирует
свои WebComponents. На данный момент это, кажется, ещё более экспериментальная вещь.
Тем не менее, однозначно можно сказать, что компонентам быть, а дёрганию дома селекторами
не быть. 

Реакт становится многократно лучше со следующими технологиями (без них, я бы сказал,
бессмысленно его трогать):

0) (от xFloooo) react-loadable упрощает асинхронную подгрузку кода (code-splitting)

1) es6/typescript/flow. Лично я бы порекомендовал Typescript, т.к. библиотека типов
значительно больше. Некоторые из них, к сожалению, не всегда оправдываю ожидания полностью,
но в целом всё работает довольно хорошо. Наверное, не в strict режиме, дабы не играть
в игру "убедим тайпскрипт, что наш код правильно написан).

Использование типизированного языка многократно облегчает задачу дебага реакт-компонентов,
в ситуациях когда пропсы перебрасываются от одного компонента к другому, что может
повторятся несколько раз подряд. тайпскрипт или флоу сразу же подскажут, какие пропсы
поступают в неверном типе. Причём этот типа может быть не только простым скалярным,
но и сложным интерфейсом.

2) storybook - чтобы работать над презентационными компонентами в вакууме (а не пытаться
их сразу встроить в сайт). Это виртуальное полотно, где мы можем разместить компонент,
над которым работаем и смотреть как он себя ведёт и программировать его. И подключать
в проект, когда компонент написан, а не в процессе написания.

3) redux/mobx. рекомендую редакс, в основном из-за большой экосистемы и прозрачности
работы. typescript-fsa - полностью типизированные экшны!

4) react-router и react-redux-router - практически безальтернативное решение маршрутизации
в приложении

4) recompose и паттерны hoc/react-composition/render props

5) styled-components + polished или, возможно, css-in-js типа aphrodite

6) jest для тестирования (вы же пишете тесты?)

7) Для redux-а существует большое количество библиотек, из них я бы хотел выделить

redux-form для форм

redux-fractal / redux-ui для локального стейта контейнеров (можно с лёгкостью использовать
копии одного и того же стора (стейт/экшены/редьюсеры) для нескольких контейнеров.

Ну и в довесок:

react-semantic-ui для прототипирования интерфейсов (а может и для продакшна, если
настроить dead code elimination). Конечно же, это не единственная библиотека подобного
характера, есть ещё antd, react-material-uiи дюжина других. Тот же бутстрап

react-sortable-hoc для быстрого dnd в рамках одного списка

classnames - швейцарский нож для соединения многих имён css классов в одну строку,
когда присутствует сложная логика

Что вспомню - допишу