Почему стоит использовать React JS при веб разработке

Если вы новичок в React.js, вам должно быть интересно, почему он так популярен и почему вы должны использовать его в своих приложениях. Если да, то вы попали в нужное место.

Давайте обсудим, что делает React.js таким замечательным и почему вы должны использовать его в своих проектах.

Краткая история 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 component может быть что - нибудь в вашем веб - приложений , таких как кнопки, текст, метки или сетки.

Но по мере роста популярности React его экосистема также расширилась, чтобы охватить различные варианты использования.

Вы можете создать статический сайт с помощью React, используя такие инструменты, как Gatsby. Вы можете использовать React Native для создания мобильных приложений. Вы даже можете создавать настольные приложения с помощью такого инструмента, как Electron , который может работать на Mac и Windows с технологией React.js.

Реагировать также поддерживает сервер визуализации его компонентов с использованием таких инструментов, как Next.js . Вы также можете использовать React.js для создания веб-сайта виртуальной реальности и 360-градусного опыта с помощью React VR.

«Изучите React Once и пишите везде» - 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

А вот пример цикла в Vue.js. Посмотрите на атрибут v-for :

Пример Vue Loops

React использует противоположный подход. Он использует HTML (JSX) внутри JavaScript. Мне нравится этот подход, потому что здесь вы можете иметь дело с чистым JavaScript и HTML.

Вот пример цикла в React.js

Пример React Loops

Компонент 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 автоматически заменяет старые компоненты более новой спецификацией.

React также имеет более широкую поддержку сообщества

С 2015 года популярность React неуклонно росла. У него огромное активное сообщество, а его репозиторий на GitHub имеет более 164 тысяч звезд. Это один из 5 лучших репозиториев на GitHub.

React Git Repository

Более 9 тысяч компаний сообщили, что используют React. Вы даже можете увидеть компании из списка Fortune 500.

Компании, использующие React

Reactiflux - это сообщество, специально созданное для разработчиков React. Более 110 тысяч членов сообщества участвуют в решении и распространении проблем, связанных с React.

Один из самых популярных веб-сайтов среди разработчиков программного обеспечения - StackOverflow. Как видите, о React и связанных библиотеках задано более 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 КБ в сжатом виде). Это значительно меньше, чем у конкурентов.

React легко протестировать

Дизайн React очень удобен для тестирования.

  • Традиционное тестирование браузера пользовательского интерфейса представляет собой сложную задачу. С другой стороны, для тестирования в React вам потребуется очень мало или совсем не нужно конфигурации.
  • Традиционный браузер пользовательского интерфейса требует браузеров для тестирования, но вы можете быстро и легко протестировать компоненты React с помощью командной строки узла.
  • Традиционное тестирование браузера пользовательского интерфейса происходит медленно. Но тестирование из командной строки проходит быстро, и вы можете запускать значительное количество наборов тестов за раз.
  • Традиционное тестирование браузера пользовательского интерфейса часто требует времени и проблем в обслуживании. React test можно быстро написать с помощью таких инструментов, как Jest & Enzyme.

В Интернете доступно множество фреймворков для тестирования JavaScript, которые вы можете использовать для тестирования React.js (поскольку это также библиотека JavaScript). Некоторые популярные среды тестирования: Mocha, Jasmine, Tape, QUnit и AVA .

Вывод

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

Популярность и популярность React растут день ото дня по уважительной причине. Кодирование на React помогает разработчикам лучше освоить JavaScript - язык на который сегодня приходится почти 90% доли веб-разработки.

Спасибо, что прочитали эту статью.

Комментарии ()

    Написать комментарий