React был создан Facebook в 2013 году для помощи в создании пользовательских интерфейсов. React быстро стал популярным фреймворком и на текущий момент используется во многих компаниях. Он часто используется для создания одностраничных приложений (SPA).
Для создания одностраничных веб-приложений React чаще всего используется в сочетании с маршрутизатором (react-router). Маршрутизатор имитирует многостраничный сайт, что снижает нагрузку на сервер, так как клиент сам отрисовывает запрошенную веб-страницу (в многостраничных сайтах сервер возращает страницу). В итоге сайт работает быстрее, так как пользователю не нужно ждать загрузки других страниц.
Особенность фреймворка - компоненты. React был разработан модульным и имеет простые в использовании "детали", которые можно подключать к различным частям вашего приложения. React использует синтаксис под названием JSX, который является HTML-подобным синтаксисом для JavaScript (JSX можно использовать без React, поскольку это просто синтаксический сахар создания элементов DOM с помощью document.createElement('div')). Все, что написано в React, является простым JavaScript и может рассматриваться как есть. React очень эффективен за счет виртуального DOM. Фреймворк использует этот виртуальный DOM, сравнивая его с реальным DOM, чтобы определить, какие элементы необходимо обновить, а какие нет. Это делает React быстрым.
React не ограничивается только вебом. React Native можно использовать для разработки кроссплатформенных мобильных приложений на тех же языках, которые вы используете в браузере.
Примечание о Redux:
Читая о фреймворке React, можно услышать о Redux. Redux не является частью React и может использоваться отдельно от него. Redux - это способ управления состоянием приложения. Хотя React-контейнеры (один из типов React-компонент) имеют собственное состояние, Redux обрабатывает состояние всего приложения, используя единый источник правды, упрощая управление приложением для разработчика. Если вы не знаете, нужен ли вам Redux, то использовать его не стоит (что и пишут авторы у себя на сайте). Если вы решите углубиться в изучение React, вы в конечном итоге изучите Redux. Однако лучше всего сначала изучить ванильный React.
Facebook сделал все, чтобы упростить вход в React. Они разработали инструмент, который позаботится о настройке webpack и babel, предоставит вам шаблон для начала работы. Этот инструмент называется create-react-app и многие уроки будут начинаться именно с него. Чтобы установить, запустите npm install -g create-react-app. Поскольку это утилита для инициализации React-приложения, рекомендуется установить ее глобально. Далее вы можете запустить create-react-app my-app, чтобы установить приложение. Когда процесс будет завершен, вы должны увидеть на экране информацию о том, как запустить приложение. Следуйте этим инструкциям и ваш браузер откроет страницу с надписью "Welcome to React". Все, вы готовы кодить!
-
Этот учебник создан командой React и использует
create-react-app. В целом официальная документация React - отличный способ изучения фреймворка. Она четко и ясно написана и будет актуализироваться намного чаще, чем сторонние учебники; -
eng Это руководство - более глубокое погружение в React;
-
Более глубокое руководство, но уже на русском.
- eng Не бесплатный курс, но подойдет, если вам нравятся видео. Бывают периодические скидки;
- eng Обширный список ресурсов по React;
- Хороший учебник на русском;
- Видеокурс на русском по React.