Краткое содержание:

1. React — это JavaScript-фреймворк для создания быстрых веб-приложений, разработанный Facebook в 2011 году.

2. Он использует компоненты, написанные на JSX (расширение синтаксиса JavaScript).

3. Он прост в освоении и использовании, обладает быстрыми возможностями рендеринга и отличными сторонними интеграциями/инструментами.

4. Обычно используется для одностраничных (SPA) и многостраничных приложений, с доступной рендерингом на стороне сервера, а также с помощью таких библиотек, как Next.js или Remix.

5. Преимущества SSR включают улучшенную SEO, пользовательский опыт, обмен в социальных сетях; недостатки - более длительное время до интерактивного взаимодействия и привязка к поставщику

Введение

React — это фреймворк JavaScript (JS) для создания быстрых веб-приложений. Хотя в прошлом он работал исключительно на стороне клиента (в браузерах), теперь он может работать и на стороне сервера (начиная с версии 18 с компонентами React Server).

История реакции

React был разработан Facebook в 2011 году, чтобы сделать их сайты более динамичными и привлекательными. Проект был запущен Джорданом Уоке, инженером-программистом Facebook. С тех пор это программное обеспечение стало библиотекой с открытым исходным кодом, используемой разработчиками по всему миру. Он имеет большое и активное сообщество разработчиков, которые вносят свой вклад в его развитие.

Выпущенный для публики в 2013 году, он претерпел множество изменений, чтобы стать тем, чем он является сейчас. Вы можете увидеть, как создатели представляли проект в 2013 году в репозитории GitHub. Одна вещь, которую вы не увидите, — это React Hooks. Они были добавлены, потому что различие между компонентами с состоянием и без состояния больше не работает.

Обзор реакции

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

По своей сути React — это фреймворк, основанный на компонентах. Компонент — это фрагмент кода, который можно повторно использовать и комбинировать для создания полноценного приложения. Компоненты написаны на JSX, расширении синтаксиса JavaScript, очень похожем на HTML.

В чем разница между React и JSX?

Вопреки распространенному мнению, React и JSX — это два разных проекта. JSX — это языковое расширение, которое позволяет вам писать HTML-подобную разметку в вашем JS, в то время как React (и React-DOM) отвечает за вывод всего на экран.

Другими словами: JSX предоставляет краткий способ создания элементов, а React предоставляет средства для вывода этих элементов. Проще говоря, JSX — это то, что вы пишете, а React обрабатывает то, что вы с ним делаете.

Преимущества Реакта

Простота изучения и использования

В Vue или Angular, помимо хорошего знания JavaScript и/или TypeScript, вы также должны изучить встроенные директивы, а в случае Angular — море сторонних библиотек, дополняющих фреймворк, и точный способ использовать их.

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

(Относительно) быстрый рендеринг

Даже начиная с React 18, библиотека поддерживает потоковую передачу и серверные компоненты, что значительно ускоряет работу для всех. Браузерам не нужно анализировать тонны ненужного JavaScript, когда вы используете серверные компоненты, а потоковая передача гарантирует, что пользователи увидят что-то (заполнитель загрузки по вашему выбору) на своих экранах как можно скорее. Хотя спиннер не кажется слишком впечатляющим, он улучшает пользовательский опыт.

Отличные сторонние фреймворки и библиотеки

Remix, Next.js, Gatsby, Create React App, Storybook и так далее. Это лишь некоторые из фреймворков, построенных поверх React. Каждый использует его или расширяет по-своему.

В дополнение к инструментам существует более широкая экосистема React с библиотеками, компонентами и множеством других ресурсов, которые упростят вам жизнь при разработке веб-приложения на основе React. Самые популярные сторонние библиотеки:

  • Библиотека тестирования React (тестирование)
  • Redux и Redux React (управление состоянием)
  • React Router и React Router DOM (маршрутизация)
  • Реагировать на шлем (SEO)
  • Попутный ветер CSS (стиль)

Применение React в веб-разработке

Создание одностраничных приложений (SPA)

Одностраничные приложения — это веб-приложения, состоящие из одной HTML-страницы с ее базовыми активами, такими как CSS, JavaScript и другие. Они позволяют пользователям взаимодействовать с веб-приложением, не перезагружая его. Примером SPA является Gmail.

Эти приложения являются наиболее распространенными, которые вы будете писать с помощью React. Мы даже пойдем еще дальше, чтобы сказать, что это будет почти исключительно то, что вы будете создавать.

Многостраничные приложения

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

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

Реагировать на нативную сеть

Когда вы создаете свое приложение с помощью React Native (RN), вы также можете повторно использовать код благодаря RN Web. Хотя некоторые библиотеки не будут работать в веб-режиме, многие из них будут работать. Вам не придется далеко ходить, чтобы увидеть пример. Возьмите мобильное приложение Twitter и их мобильную версию сайта.

Чтобы получить ответ на вопрос «что такое React Native », перейдите сюда.

Рендеринг на стороне сервера с помощью React

Рендеринг на стороне сервера собирает страницы на сервере перед их отправкой клиенту. Это можно сделать с помощью Next.js, Remix или Razzle.

Преимущества SSR

- Снижение нагрузки на младшие устройства,

- Улучшает SEO,

- Улучшает пользовательский опыт,

- Социальный обмен

Недостатки

- Больше времени для интерактивного

- привязка к поставщику

- Более дорогой

Vue против React, Angular против React

Эти сравнения могут быть сделаны только на поверхностном уровне.

С учетом сказанного:

  • Angular — самый надежный фреймворк. Он также самый тяжелый и имеет наименьшее количество сторонних интеграций.
  • Концептуально Vue находится между React и Angular. Это обеспечивает некоторую гибкость, и вы можете использовать «обычный» HTML-подобный синтаксис Vue или включить режим JSX.
  • React — самый минималистичный из трех. Выбор за вас не делается, а только некоторые. Хотя раньше люди считали Redux почти неотделимой от React, это уже не так.

Почему вы должны выбрать React?

React — это фреймворк, разработанный Facebook, что означает, что он используется на многих популярных веб-сайтах. Помимо поддержки Facebook, библиотека с открытым исходным кодом имеет активное сообщество разработчиков, которые постоянно совершенствуют ее возможности и часто обновляют ее, чтобы веб-приложения работали как по маслу. Google Trends также показывает, что спрос на инженеров JavaScript со знанием React неуклонно растет.

Что еще более важно: несмотря на то, что фреймворк был создан более десяти лет назад, он не потерял ни популярности, ни использования. На самом деле, его популярность с годами только неуклонно росла!

Первоначально опубликовано на https://www.itmagination.com.