Что такое React?

ReactJS — это внешняя библиотека JavaScript с открытым исходным кодом от Facebook для создания пользовательских интерфейсов. Он используется для создания одностраничных веб-приложений и мобильных приложений.

ReactJS — это библиотека javascript, разработанная Facebook для пользовательского интерфейса в 2013 году. Она используется для создания одностраничных веб-приложений или мобильных приложений. Это мощная библиотека, оптимальная для извлечения быстро меняющихся данных. Его основная функция — рендеринг данных. DOM веб-страницы — это то, на что нацелен ReactJS. Но что делает его наиболее эффективным, так это то, что он не обновляет всю веб-страницу, а обновляет только измененную часть DOM. Это значительно повышает производительность. Давайте разберемся в этом на простом примере.

Мы все используем Facebook. Предположим, один из наших друзей разместил фотографию на Facebook, которая отображается в нашей ленте. На данный момент нет ни лайков, ни комментариев к фото нашего друга. Когда мы нажимаем кнопку «Нравится», количество лайков увеличивается. Через несколько секунд количество лайков и комментариев автоматически увеличивается, так как другие люди также ставят лайки и комментируют фото нашего друга. Все это происходит без перезагрузки страницы. Это то, что делает ReactJS.

Это происходит из-за одной из особенностей ReactJS, известной как Virtual DOM. Есть много других полезных функций ReactJS, которые мы обсудим далее.

В этом блоге мы рассмотрим некоторые основы реагирования и то, как мы можем начать с ним работать.

Зачем использовать React?

Как уже упоминалось во введении, теперь мы знаем, что это библиотека javascript для создания красивых пользовательских интерфейсов. Реакция также:

  1. Декларативный:

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

2. На основе компонентов:

В компонентном подходе мы инкапсулируем поведение в небольшие единицы, называемые компонентами. Они управляют своим государством. Это упрощает код, разделяя логику на многократно используемый независимый код.

3. Стек технологий:

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

Особенности ReactJS

1. Виртуальный DOM:

Объектная модель документа или манипулирование DOM — одна из самых важных частей Интернета. Но обновление DOM происходит очень медленно, даже медленнее, чем многие операции javascript. Большинство фреймворков javascript обновляют весь DOM, что делает его медленнее. Что ж, нет необходимости обновлять весь DOM, вместо этого эти фреймворки должны обновлять только ту часть DOM, которая требуется для обновления. Это то, что делает виртуальный DOM.

Виртуальный DOM — это облегченная копия оригинального DOM. Он обладает всеми свойствами настоящего DOM. При обновлении обновляется весь виртуальный DOM. Звучит неэффективно, но виртуальный DOM намного быстрее исходного. После завершения обновления ReactJS сравнивает обновленный виртуальный DOM и предварительно обновленный исходный DOM. Это известно как диффинг. После сравнения обоих DOM ReactJS точно знает, где разница. Таким образом, он обновляет исходный DOM только там, где была разница.

Вот почему манипуляции с DOM в ReactJS выполняются намного быстрее, чем в других фреймворках.

2. Односторонняя привязка данных:

Односторонняя привязка данных означает, что через все приложение данные проходят только в одном направлении. Это дает лучший контроль над ним. Данные передаются от родительского компонента к дочернему через свойства только для чтения. Эти реквизиты не могут быть отправлены обратно в родительский компонент. Вот как работает односторонняя привязка данных. Хотя дочерний компонент может взаимодействовать с родительским компонентом для обновления состояния с помощью функций обратного вызова.

3. Компоненты:

Веб-страница в reactJS разделена на различные компоненты. Каждый компонент определяет представление или часть представления. ReactJS основан на компонентах. Логика компонентов написана на javascript, а не на шаблонах, поэтому легко передавать данные через приложение и сохранять состояние вне DOM.

а. Компоненты класса:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

б. Функциональные компоненты:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

4. JSX:

JSX — это расширение синтаксиса javascript. Его синтаксис аналогичен HTML. Компоненты ReactJS написаны на JSX. JSX можно рассматривать как комбинацию javascript и XML. Его синтаксис очень прост, что упрощает написание компонентов. Мы обсудим больше JSX позже.

const element = <h1>Hello, world!</h1>;

Как видно из синтаксиса, это нетипичный тип данных. Это не строка и не язык разметки.

5. Условные операторы:

Одной из лучших особенностей ReactJS является то, что мы можем использовать условные операторы внутри JSX. Это очень помогает при отображении данных в браузере в соответствии с условиями.

6. Методы жизненного цикла:

Методы жизненного цикла, предоставляемые ReactJS, очень полезны при разработке. Каждый компонент ReactJS имеет собственный жизненный цикл. Они представляют собой серию методов, которые выполняются на разных этапах выполнения. Ниже приведен список методов жизненного цикла.

  • долженкомпонентобновить
  • компонентдидмаунт
  • компонентWillUnmount
  • 4. КомпонентДидОбновление

Плюсы ReactJS

  • ReactJS использует виртуальную модель DOM, которая улучшает взаимодействие с пользователем. Это также упрощает работу разработчика.
  • JSX используется в ReactJS, который очень прост и легок в освоении.
  • В ReactJS нет необходимости в отдельных файлах для логики и разметки.
  • ReactJS — это библиотека с открытым исходным кодом, поддерживаемая Facebook. Это постоянно развивающаяся библиотека.
  • Связывание с одними данными делает код очень стабильным.
  • ReactJS также предоставляет мобильное решение, известное как React Native.
  • ReactJS быстрее для рендеринга по сравнению с другими веб-фреймворками.
  • Условные операторы в ReactJS очень полезны.
  • Это SEO-дружественный.
  • У него отличный набор инструментов для разработчиков.

Минусы ReactJS

  • Ему нужны дополнительные библиотеки для маршрутизации, управления состоянием и взаимодействия с API.
  • ReactJS — это библиотека большого размера.
  • Темпы развития очень высокие.
  • ReactJS покрывает только часть пользовательского интерфейса и ничего больше.
  • Из-за очень высоких темпов разработки документация ReactJS плохо поддерживается.

Начало работы с ReactJS

Теперь, когда у нас есть общее представление о React и знания его строительных блоков, давайте погрузимся и настроим наш первый проект React.

Предпосылки:

  1. JS-узел:

Перед началом проекта убедитесь, что в вашей системе установлена ​​версия узла ›= 8.10. Вы можете установить его с помощью этих команд

sudo apt-get update
sudo apt-get install nodejs

Вы также захотите установить менеджер пакетов Node.js. Вы можете сделать это, используя:

sudo apt-get install npm

2. Пряжа:

Yarn — это еще один менеджер пакетов, такой как NPM, но он лучше подходит и быстрее работает с приложениями React. Итак, давайте установим пряжу и используем ее для создания наших приложений React.

Вы можете следовать этой инструкции для установки пряжи.

Теперь, когда у вас установлены npm и yarn, мы можем начать с проекта быстрого запуска, который представляет собой create-react-app, официальное одностраничное веб-приложение от React.

Для создания приложения используйте команду:

npm init react-app my-app

Вы можете сделать то же самое, используя пряжу:

yarn create react-app my-app

Вы можете выбирать между npm и yarn, на самом деле не имеет значения, какой менеджер пакетов вы выберете при разработке.

Это создаст каталог my-app с файлами реагирующего приложения.

В настоящее время,

cd my-app

Затем запустите команду

npm start

OR

yarn start

Это запустит приложение в режиме разработки. Откройте http://localhost:3000, чтобы просмотреть его в браузере.

Проверьте содержимое каталога my-app. Мы изучим содержимое и начнем настраивать my-app, чтобы понять поток в приложении React и создать из него что-то новое.

Вау! Вы только что создали приложение для реагирования.

Вывод

ReactJS — одна из самых мощных библиотек в современной сети. Некоторые из его функций не вызывают сомнений, например, производительность виртуального DOM и простота JSX. Когда дело доходит до рендеринга данных, ReactJS — лучший вариант. ReactJS является основной частью стека MERN. Это одна из наиболее широко используемых библиотек. Но ведь это библиотека. Есть много дополнительных функций, которые поддерживает reactJS. В основном это маршрутизация, взаимодействие с API и управление состоянием. Тем не менее, функции, которые предоставляет ReactJS, очень полезны при создании одностраничных веб-приложений и мобильных приложений.

Ссылки

https://reactjs.org/docs/getting-started.html