React - это библиотека JavaScript для создания пользовательских интерфейсов. Он был признан самым любимым в категории "Frameworks, Libraries, и другие технологии" опроса разработчиков Stack Overflow 2017.<sup>1</sup>
React - это библиотека JavaScript и React приложения, созданные с помощью неё, запускаются в браузере, аНЕ на сервере. Приложения такого рода только взаимодействуют с сервером, когда это необходимо, что делает их очень быстрыми по сравнению с традиционными веб-сайтами, которые заставляют пользователя ждать, пока сервер повторно развернет целые страницы и отправит их в браузер.
React используется для создания пользовательских интерфейсов - то, что пользователь видит на своем экране и взаимодействует с вашим веб-приложением. Этот интерфейс разделяется на компоненты, вместо того, чтобы иметь одну огромную страницу, вы разбиваете ее на более мелкие части, известные как компоненты. В более общих терминах этот подход называется модулярностью.
* Он декларативный: React использует декларативную парадигму, которая упрощает рассуждение о вашем приложении.
* Он эффективен: React вычисляет минимальный набор изменений, необходимых для обновления вашего DOM.
* И это гибко: React работает с библиотеками и фреймворками, которые вы уже знаете.
1. React включает в себя композицию, состоящую из множества компонентов, которые обертывают функциональные возможности в инкапсулированный контейнер. Многие популярные сайты используют React для реализации архитектурного шаблона MVC. Facebook (частично), Instagram (полностью), Академия Khan (частично), Codecademy (частично), New York Times (частично), Yahoo Mail (полностью), новое приложение для фото и видео Dropbox Карусель (полностью) - популярные популярные сайты использовать React. Как эти большие приложения создаются с использованием React? Простой ответ заключается в создании небольших приложений или компонентов. Пример:
2. React является декларативной для большей части, в которой нас больше интересует «Что делать, а не как выполнять определенную задачу». Декларативное программирование - это парадигма программирования, которая выражает логику вычисления без описания его потока управления. Декларативное программирование имеет определенные преимущества, такие как уменьшенные побочные эффекты (возникает, когда мы модифицируем какое-либо состояние или что-то изменяем или делаем запрос API), сводя к минимуму изменчивость (как много абстрагируется), улучшенная читаемость, меньшие ошибки.
3. Однонаправленный поток данных. UI в React фактически является функцией состояния, которое означает, что состояние обновляет его и обновляет пользовательский интерфейс. Поэтому наш пользовательский интерфейс прогрессирует по мере изменения состояния.
1. Быстро. Приложения, созданные в React, могут обрабатывать сложные обновления, но при этом не теряя в отзывчивости.
2. Modular. Вместо того, чтобы писать большие, плотные файлы кода, вы можете писать много меньших, многоразовых файлов. React модульность может быть красивым решением в JavaScript [проблем ремонтопригодности](https://en.wikipedia.org/wiki/Spaghetti_code) .
4. Гибкое. Вы можете использовать React для интересных проектов, которые не имеют никакого отношения к созданию веб-приложения. Люди все еще понимают потенциал React. [Есть возможность исследовать](https://medium.mybridge.co/22-amazing-open-source-react-projects-cb8230ec719f) .
React использует виртуальную DOM, чтобы сначала визуализировать дерево HTML, а затем, каждый раз, когда изменяется состояние, и мы получаем новое дерево HTML, которое нужно взять в DOM браузера, вместо того, чтобы писать все новое дерево. React будет писать только разница между новым деревом и предыдущим деревом (так как у React есть оба дерева в памяти). Этот процесс известен как «Дерево примирения».
React имеет интеллектуальный дифференцирующий алгоритм, который он использует для восстановления только в своем узле DOM, который на самом деле нуждается в восстановлении, в то время как он сохраняет все остальное как есть. Этот сложный процесс возможен из-за виртуального DOM React.
Используя виртуальную DOM, React сохраняет последнюю версию DOM в памяти и, когда она имеет новую версию DOM для браузера, эта новая версия DOM также будет в памяти, поэтому React может вычислить разницу между новой и старой версиями,
Затем React предложит браузеру обновить только вычисляемый diff, а не весь узел DOM. Независимо от того, сколько раз мы обновляем наш интерфейс, React берет в браузер только новые «частичные» обновления.
Хотели бы вы начать изучать основы React, не увязнув в создании среды разработки? Скорее всего, если вы не знакомы с веб-разработкой, то создание среды разработки может заставить вас чувствовать себя немного запуганным, когда вы просто пытаетесь изучить React или просто узнать об React в первый раз.
Давайте начнем с шага 1. Начнем с файла в нашем браузере под названием «index.html». Начнем с кода HTML текущего boiler plate. Для быстрого начала я рекомендую использовать Emmet с любым текстовым редактором, который у вас есть, и в первой строке ввода в `html:5` затем нажав клавишу shift, чтобы получить код ниже. Или вы можете продолжить и скопировать и вставить код снизу.
Этот контент не будет отображаться на вашей веб-странице. Все, что находится в главном разделе файла HTML, будет метаданных, которые наш браузер будет интерпретировать нашим кодом в разделе тела. Этот заголовок будет отображаться на вкладке для нашей страницы, а не на странице.
Хорошо, первый элемент первый элемент нашего списка пройден. Давайте рассмотрим второй пункт. Мы собираемся настроить среду разработки, используя теги скриптов, чтобы включить React и Babel. Это не настоящая среда разработки. Это будет довольно сложная установка. Это также оставило бы нас с большим количеством кодовых табличек и библиотек, которые отвлекут нас от изучения основ React. Цель этой серии - перейти к основному синтаксису React и получить возможность программировать. Мы будем использовать теги `<script>`, чтобы принести библиотеку React, библиотеку React DOM (почему) и библиотеку Babel.
Вы можете использовать более обновленные версии этих библиотек по мере их выхода. Они не должны создавать никаких изменений для контента, который мы рассматриваем.
Мы создадим простой элемент `<div>` и дадим ему идентификатор «app». Мы собираемся настроить таргетинг на это место,
чтобы вставить наш контент React так же, как вы могли бы использовать CSS для таргетинга идентификатора для стиля по вашему выбору.
Любой отредактированный контент будет отображаться в тегах div с идентификатором приложения. Тем временем мы оставим текст, говорящий,
что «React еще не отображен». Если мы увидим это, когда мы просматриваем нашу страницу, это означает, что где-то мы пропустили рендеринг React.
Теперь давайте продолжим и создаем тег скрипта внутри нашего тела, где мы будем создавать, чтобы реагировать в первый раз. Синтаксис,
который нам понадобится для нашего тега скрипта, заключается в добавлении атрибута «type». Указывает тип медиафайла скрипта.
Выше в нашей голове мы использовали атрибут src, который указывал на внешние файлы сценариев для библиотеки React, библиотеки ReactDOM и библиотеки Babel.
[](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI)[Официальная документация React гласит](https://reactjs.org/docs/introducing-jsx.html) : «Этот синтаксис смешного тега не является ни строкой, ни HTML. Он называется JSX, и это расширение синтаксиса JavaScript. Мы рекомендуем использовать егос React для описания того, как должен выглядеть пользовательский интерфейс. JSX может напомнить вам о языке шаблонов, но он поставляется с полной мощью JavaScript. JSX создает «элементы» для реагирования ».
[В качестве альтернативы JSX вы можете использовать компилятор ES6 и Javascript, например, Babel.](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI) [https://babeljs.io/](https://babeljs.io/)