Фреймворк React, что это такое

Обновлено: 21.11.2024

Если вы проводили какое-то время с разработчиками, скорее всего, вы слышали название «React» не раз, возможно, иногда вместе с «Angular» или, реже, «Vue». Итак, что такое Реакт? Это самолет? Это космический корабль? Это библиотека? Или это рамки? Да и важно ли это? Давайте узнаем.

React — фреймворк или библиотека?

Разработчики React описывают его как «библиотеку javascript для создания пользовательских интерфейсов», как видно из большого баннера на главной странице. Но большинство людей называют его фреймворком и, таким образом, делают его частью святой троицы интерфейсных фреймворков javascript, включая Angular и Vue. Так в чем же дело? Что ж, дискуссия в основном академическая: одна сторона утверждает, что фреймворк — это «то, во что вы подключаете свой код», а библиотека — это «то, что вы подключаете в свой код», а другая сторона утверждает, что реакция, по сути, то же самое, что и два других, но, если честно, для обычного человека соглашение об именах совершенно не имеет значения, поэтому мы могли бы назвать и его. Что важно, так это то, что React делает одну вещь, и делает это чертовски хорошо: он позволяет вам быстро создавать удивительные, отзывчивые и быстрые пользовательские интерфейсы. Он чрезвычайно популярен (если вы посмотрите на некоторые диаграммы и сравнения, вы можете увидеть некоторую тенденцию), он имеет открытый исходный код и поддерживается крупной корпорацией. Так откуда же он взялся и что делает его фреймворком (или библиотекой) javascript номер 1?

Краткая история React

React был создан в 2011 году Джорданом Уоке из Facebook. К тому времени платформа стала настолько большой, что существующих решений было недостаточно, поэтому они создали собственную интерфейсную структуру (или библиотеку) для удовлетворения своих растущих потребностей. В 2013 году исходный код React стал открытым, и с тех пор он рос в геометрической прогрессии, постоянно добавлялись новые функции и вокруг него росло замечательное сообщество разработчиков.

Почему React популярен?

React довольно зрелая и проверенная временем технология, которую используют многие известные компании (Netflix, AirBnB, Instagram и многие другие, а также Facebook). Он более легкий и производительный, чем Angular, решение Google для создания интерфейсных приложений. React также не навязывает вам каких-либо конкретных способов выполнения действий, и вы можете выбирать из огромного множества дополнительных библиотек все, что вам заблагорассудится. Не существует единого «способа реагирования». Таким образом, вы можете создать собственный стек React в соответствии со своими потребностями.

React является декларативным и основанным на компонентах

Когда вы рассматриваете приложение, вы видите отдельные элементы, такие как кнопки, раскрывающиеся списки, карточки и информационные окна, объединенные в более крупные элементы, такие как меню и формы. Они отображают определенную информацию и реагируют (видите, что я там сделал?) на ваш ввод, внося изменения в то, что отображается. React работает именно так, позволяя вам естественно думать о разрабатываемом вами интерфейсе. Базовой единицей структуры в React является компонент — строительный блок вашего приложения. Это может быть что угодно — всплывающее окно с сообщением, кнопка, значок, отрывок текста или контейнер для хранения всего этого внутри и передачи некоторых данных каждому из них. Вы просто предоставляете React информацию о том, как все компоненты должны выглядеть в зависимости от конкретных параметров (также известных как «состояние» приложения), и он позаботится обо всем остальном, внося соответствующие изменения в представление в соответствии с изменениями состояния. Это называется «декларативное программирование», и вы уже можете видеть, что работать таким образом кажется естественным и логичным — это ускоряет и упрощает разработку даже самых сложных интерфейсных приложений. React также очень эффективен при внесении изменений в представления, потому что он виртуализирует содержимое всего приложения и сначала вносит изменения в это виртуальное «представление», а затем определяет лучший и самый быстрый способ отобразить изменения на экране. В результате получаются очень плавные и производительные приложения, обеспечивающие превосходное взаимодействие с пользователем.

SPA, SSR, CSR, о боже

Вероятно, вы слышали, как некоторые из этих терминов упоминались в какой-то момент, но что они означают?

SPA означает одностраничное приложение, и этот термин в некотором роде связан с CSR или рендерингом на стороне клиента, который противопоставляется SSR, что означает рендеринг на стороне сервера. Помогите!

Что такое рендеринг на стороне сервера?

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

Что такое рендеринг на стороне клиента?

С другой стороны, при подходе CSR сервер получает весь пакет и отправляет его вам одним махом. Первый рендеринг может быть медленнее, потому что ваш браузер загружает все это, но затем наш герой JavaScript просыпается, берет верх и начинает творить свое волшебство — обрабатывая всю логику рендеринга из уютной внутренней части вашего браузера. Это означает мгновенные переходы, плавную анимацию, несуществующее время загрузки и никогда, никогда, никогда не видеть перезагрузки страницы (отсюда и термин «одностраничное приложение», поскольку технически все происходит внутри одной html-страницы). Во всех смыслах и целях это похоже на нативное приложение. Обратная сторона? Эта начальная загрузка может быть довольно болезненной и не идеальной для SEO.

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

Зачем я вам все это рассказываю? Потому что React можно использовать для всего этого. Сам по себе он идеально подходит для создания клиентских одностраничных приложений, но его также можно отображать на сервере или использовать для гибридного подхода с такими инструментами, как Gatsby и Next.js.

А как насчет React Native?

А теперь лучшая часть React: это действительно «просто» рендеринг представлений, а не конкретно в Интернете. Интернет, конечно, является его самой заметной целью, но его также можно использовать для создания мобильных приложений с помощью React Native. И это не гибридные приложения, т.е. окна браузера, маскирующиеся под приложения, это настоящие приложения, поэтому они работают намного лучше и могут использовать все возможности данного устройства.

И вот, пожалуйста

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

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

React.js — это быстрая, безопасная и масштабируемая среда JavaScript. Он обеспечивает фантастический опыт пользователя и разработчика. Более того, его популярность растет, поскольку он поддерживается Facebook и активным сообществом. React.js — доминирующая технология JavaScript для внешнего интерфейса, и она становится все более и более популярной. По данным GitHub, за последние несколько лет количество загрузок пакетов React.js с NPM по сравнению с двумя другими популярными фреймворками — Angular/Core и Vue — значительно увеличилось. Использование технологий распространяется по степенному закону, и похоже, что React.js берет верх над своей категорией.

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

Что именно делает фреймворк React.js?

Среда React.js — это инструмент для создания пользовательских интерфейсов — библиотека JavaScript для создания пользовательских интерфейсов. Некоторые инженеры-программисты предпочитают не называть его «фреймворком», поскольку он дает разработчикам гораздо больше свободы, чем Angular или Vue.

Точно так же, как Angular поддерживается Google, React.js поддерживается Facebook и сообществом разработчиков. Оба имеют открытый исходный код и могут использоваться бесплатно по лицензии MIT. React.js всего шесть лет, что делает его относительно новой технологией. Однако он очень быстро созрел.

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

Источник: GitHub: тенденции переполнения стека

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

React.js можно использовать для создания пользовательских интерфейсов на JavaScript для разных платформ. Вы можете использовать ReactDOM для веб-приложений, React Native для разработки мобильных приложений (общая часть кода между Android и iOS) и кроссплатформенные гибридные настольные приложения с Electron. Недавно Microsoft также выпустила React Native для Windows.

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

Разница между решениями JavaScript (например, React.js) и более старыми технологиями заключается в том, что JS берет на себя гораздо больше логики и работы с документами, как если бы они вообще не отображались на сервере.

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

Разница между React.js и React Native

React Native в последнее время стал еще более популярным словом в деловых кругах. Это связано с тем, что Facebook активно продвигает его как лучший инструмент для кроссплатформенной разработки мобильных приложений. React Native использует элементы пользовательского интерфейса, написанные на React.js, которые могут создавать собственные компоненты интерфейса iOS и Android, такие как кнопки и анимация. С помощью React Native вы можете создавать приложения, которые без проблем работают на iPhone и смартфонах Samsung или Huawei, разделяя большую часть кода между двумя платформами.

Три ключевых термина, которые вам нужно знать о React.js

Их немного, но понимание этих основных выражений поможет вам понять, о чем идет речь.

Компоненты

Это стандартные блоки, из которых можно создать приложение. С React.js относительно легко создавать пользовательские компоненты, что является очень важной функцией, поскольку создание пользовательских компонентов необходимо в 99% случаев, а готовые компоненты обычно составляют 10-20% компонентов в приложении React.js. . Вы также можете использовать существующую полноценную библиотеку пользовательского интерфейса (например, Material UI) и просто соединить компоненты с данными и пользовательской логикой.

Это расширение JavaScript, позволяющее разработчикам создавать представления, используя синтаксис, напоминающий HTML и XML, который можно смешивать с JS для управления логикой.

Сокращение

Это библиотека управления состоянием с динамичной экосистемой, часто в сочетании с React.js.

Какие приложения можно создать на React.js?

Для начала подумайте о Facebook.

Это сделано с помощью React.js. В 2012 году управлять Facebook Ads стало сложнее, поскольку веб-приложение социальной сети стало больше и включало больше компонентов.

Марк Цукерберг заявил, что опора на HTML5 была одной из самых больших ошибок их организации, и в то же время пообещал пользователям (и инвесторам), что Facebook скоро предоставит отличные возможности для мобильных устройств.

В то же время корпорация приобрела Instagram. В мае 2013 года был официально запущен React.js.

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

Социальные сети (Facebook, Instagram, Pinterest, Twitter)
Платформы совместной экономики (Airbnb, Lyft, Uber)
Медиа-сайты (Yahoo!).
Видеоплатформы (Netflix)
Инструменты SaaS (SendGrid, Asana, InVisionApp, Zapier)

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

Команда Netguru также создала множество отличных продуктов с использованием React.js — Newst, Moonfare и многих других, в том числе решения для Solaris Bank, берлинской финтех-компании.

Facebook создал React для своих целей; большинство их веб-приложений и мобильных приложений написаны с использованием React. На данный момент социальная сеть находится в процессе перестройки всей платформы с помощью React, GraphQL и Relay.

Наиболее важные функции React.js

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

Декларативность

Короче говоря, суть заключается в том, чтобы "сказать что, а не как". Вы строите пользовательский интерфейс приложения, создавая представление за представлением. В React.js код фокусируется на том, что отображается, а не на том, какие шаги необходимо предпринять для его отображения. Для не кодера второй подход кажется более интуитивным.И действительно быстрее построить и отладить экран или компонент с помощью этого метода. Декларативность означает отличный DX (опыт разработчика), который обычно приводит к отличному UX.

Компонентный подход

Вы создаете приложения с помощью React.js, используя стандартные блоки — компоненты, которые могут отвечать за функцию пользовательского интерфейса (например, кнопку), сетевое взаимодействие (например, сборщик данных) или гораздо более сложные функции, такие как управление состояние (например, Redux Provider). Этот модульный подход позволяет легко внедрить систему дизайна и продемонстрировать ее (например, с помощью сборника рассказов). Компоненты в React.js обеспечивают привлекательный DX.

Минимализм

React.js небольшой и загружается быстро. Настройка среды программирования не требует особых усилий. Более того, вам не всегда нужно загружать все приложение благодаря функции разделения кода, которая может значительно сократить время загрузки вашего веб-сайта или веб-приложения. Плавная и быстрая загрузка имеет решающее значение для UX вашего продукта, а также для маркетинга (SEO), поскольку Google продвигает сайты с коротким временем загрузки.

Огромная экосистема и гибкость

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

Обратная совместимость

Всегда здорово, когда программное обеспечение может работать со старыми версиями библиотек, которые оно использует (или зависит от них). Однако не многие языки и фреймворки могут обеспечить обратную совместимость, потому что это дорого. К счастью, Facebook пришлось инвестировать в поддержание обратной совместимости для внутреннего корпоративного использования. Некоторые приложения FB до сих пор используют фрагменты кода, созданные, когда React был еще в зачаточном состоянии и не имел проблем с совместимостью.

Талантливые разработчики хотят использовать React.js

Должна быть причина, по которой React.js так популярен среди разработчиков. Согласно опросу разработчиков Stack Overflow 2019, это самая любимая и самая востребованная веб-инфраструктура: 74,5% разработчиков, работающих с React.js, заявили, что хотели бы продолжать это делать, а 21,5% инженеров-программистов не знают React.js. заявив, что хотели бы этому научиться.

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

Большой кадровый резерв и яркие перспективы — основные характеристики с точки зрения бизнеса. Многие успешные цифровые проекты были вынуждены переписать свой код в соответствии с новыми технологиями, включая Facebook.

React.js позволяет быстро и масштабируемо разрабатывать программное обеспечение

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

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

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

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

Если вы работаете с приложением средней и высокой сложности, требующим сложных потоков на стороне клиента.
Если вы планируете создать приложение, требующее реактивного и производительного пользовательского интерфейса.
При разработке статического веб-сайта с более или менее динамичным содержанием (например, блога или целевой страницы). Gatsby.js, генератор сайтов для React.js, является отраслевым стандартом для этих случаев использования.
Если наличие эффективного веб-сайта или веб-приложения имеет решающее значение для вашего бизнес-плана.
Если для успеха вашего проекта важно быстро найти высококвалифицированных инженеров.

Все эти ситуации создают идеальные условия для использования React.js.

На самом деле сложнее назвать сценарии, в которых React.js не подходит. Например, если вы планируете создать простое приложение для создания, чтения, обновления и удаления (CRUD), React.js может оказаться излишним.

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

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

Одним из популярных навыков, который вы увидите во всплывающем окне, является React JS. Но что такое React JS? Это другой язык кодирования? Программное обеспечение? Или что-то совсем другое?

Чтобы ответить на ваши вопросы и помочь вам освоить этот ценный инструмент для веб-разработчиков, мы составили удобный учебник "Что такое React JS".

Оглавление

Что такое React JS?

React JS – это библиотека JavaScript, используемая в веб-разработке для создания интерактивных элементов на веб-сайтах. Но если вы не знакомы с JavaScript или библиотеками JavaScript, это определение бесполезно. Итак, давайте сделаем шаг назад и сначала разберемся с этими терминами.

Что такое JavaScript?

Вы можете прочитать все о JavaScript в нашем полном руководстве по JavaScript Tech 101, но вот TLDR:

JavaScript (или JS) – это язык сценариев, используемый для создания динамического веб-контента и управления им.
Динамический веб-контент включает в себя анимированную графику, слайд-шоу из фотографий и интерактивные формы.
Каждый раз, когда вы посещаете веб-сайт, где что-то перемещается, обновляется или иным образом изменяется на вашем экране, не требуя перезагрузки веб-страницы вручную, есть большая вероятность, что JS является языком, обеспечивающим это.

Или попробуйте это определение одним предложением: JavaScript – это чрезвычайно важный язык кодирования, используемый для добавления анимированных и интерактивных функций на веб-сайты или в веб-приложения (помимо основных статических структур, созданных такими языками, как HTML и CSS).

Что такое библиотека JavaScript?

Из приведенного выше определения видно, насколько важную роль JavaScript играет в разработке веб-сайтов и веб-приложений. Но бывают случаи, когда вам нужен JavaScript для выполнения повторяющихся функций, таких как стандартные анимационные эффекты или функции автозаполнения панели поиска. Перекодирование этих функций каждый раз, когда они появляются, становится ситуацией «изобретения велосипеда». Раздражает. Здесь на помощь приходят библиотеки JavaScript.

Библиотеки JavaScript представляют собой наборы предварительно написанного кода JavaScript, которые можно использовать для обычных задач JS, что позволяет избежать трудоемкого (и ненужного) процесса написания кода вручную. Если есть заурядная функция JavaScript, которую вам все время нужно кодировать (и которая была нужна другим разработчикам до вас для их собственных проектов), вероятно, есть библиотека JS, которая облегчит вашу боль. Имеет смысл?

Хорошо, вернемся к React. Существует множество различных JS-библиотек, и React JS — одна из них, но что делает ее уникальной? Для чего используется React JS и почему вы должны изучать React JS? И лучше ли она других библиотек JavaScript?

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

React — это библиотека JavaScript, помогающая разработчикам создавать пользовательские интерфейсы. С точки зрения веб-сайтов и веб-приложений, интерфейсы представляют собой набор экранных меню, строк поиска, кнопок и всего остального, с чем кто-то взаимодействует для ИСПОЛЬЗОВАНИЯ веб-сайта или приложения.

Примечание: читатели часто спрашивают: «React JS является интерфейсом или сервером?» Ответ: определенно фронтенд. Вы можете сохранить это прямо, помня об аспекте пользовательского интерфейса «на экране» — React используется исключительно для «клиентского» программирования (создания вещей, которые пользователь увидит на экране в окне своего браузера), что делает React JS интерфейсной библиотекой.

До React JS разработчики застревали при создании пользовательских интерфейсов вручную с помощью «ванильного JavaScript» (разработчики сами говорят о необработанном языке JavaScript) или с менее ориентированными на пользовательский интерфейс предшественниками React, такими как jQuery. Это означало более длительное время разработки и множество возможностей для ошибок и багов. Итак, в 2011 году инженер Facebook Джордан Уолке создал React JS специально для улучшения разработки пользовательского интерфейса.

Помимо возможности многократного использования кода библиотеки React (что экономит время разработки и снижает вероятность ошибок в коде), React обладает двумя ключевыми функциями, которые делают его еще более привлекательным для разработчиков JavaScript:

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

В основе любого базового веб-сайта лежат HTML-документы. Веб-браузеры читают эти документы и отображают их на вашем компьютере, планшете или телефоне в виде веб-страниц.Во время этого процесса браузеры создают нечто, называемое объектной моделью документа (DOM), репрезентативное дерево того, как устроена веб-страница. Затем разработчики могут добавлять в свои проекты динамический контент, изменяя модель DOM с помощью таких языков, как JavaScript.

JSX (сокращение от JavaScript eXtension) – это расширение React, которое упрощает для веб-разработчиков изменение модели DOM с помощью простого кода в стиле HTML. А поскольку поддержка браузера React JS распространяется на все современные веб-браузеры, JSX совместим с любой браузерной платформой, с которой вы можете работать.

Однако это не просто вопрос удобства — использование JSX для обновления DOM приводит к значительному повышению производительности сайта и эффективности разработки. Как? Все дело в следующей функции React — Virtual DOM.

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

Если вы не используете React JS (и JSX), ваш веб-сайт будет использовать HTML для обновления своей модели DOM (процесс, который заставляет вещи «меняться» на экране без необходимости вручную обновлять страницу). Это хорошо работает для простых статических веб-сайтов, но для динамических веб-сайтов, требующих интенсивного взаимодействия с пользователем, это может стать проблемой (поскольку вся модель DOM должна перезагружаться каждый раз, когда пользователь щелкает функцию, вызывающую обновление страницы).

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

Допустим, пользователь вводит комментарий в форму сообщения в блоге и нажимает кнопку "Комментарий". Без использования React JS весь DOM должен был бы обновиться, чтобы отразить это изменение (используя время и вычислительную мощность, необходимые для этого обновления). React, с другой стороны, сканирует виртуальный DOM, чтобы увидеть, что изменилось после действия пользователя (в данном случае добавленного комментария), и выборочно обновляет только этот раздел DOM.

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

Как выглядит код React JS?

Если все это имеет смысл, но вы все еще задаетесь вопросом: «Что такое код React?» вы можете получить визуальное представление о том, как выглядит React прямо с этого веб-сайта с примерами React. Каждый из перечисленных здесь проектов дает представление о возможностях React JS и позволяет взглянуть на исходный код, использованный для его создания.

Между тем, если вы все еще задаетесь вопросом "что можно сделать с React JS?" и вас интересуют примеры React JS для начинающих, эти простые проекты, созданные на официальном веб-сайте React, содержат шаблоны React JS, с которыми вы можете ознакомиться по мере изучения React JS.

Экосистема React JS

Обычно React JS называют и библиотекой JavaScript, и фреймворком JavaScript, так что же это? Или и то, и другое?

Команда Skillcrush, занимающаяся учебными программами, определяет React JS как библиотеку JavaScript, а не как фреймворк. Это важное различие.

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

Чтобы понять разницу между библиотекой, такой как React JS, и Angular (фреймворком), вы можете думать о коде из библиотеки Javascript с точки зрения мебели и украшений для дома, который вы уже построили, а фреймворк – это Шаблон модели дома, который вы используете для постройки дома.

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

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

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

Должен ли я изучать React JS?

Если вы хотите работать интерфейсным веб-разработчиком (что означает создание пользовательского интерфейса), ответ — ДА!

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

Если вы готовы к React (а также к другим важным навыкам веб-разработчика, таким как JavaScript, HTML и CSS), вы можете записаться сегодня на наш курс Skillcrush Front End Developer + React JavaScript. Этот онлайн-курс рассчитан на четыре месяца, если вы потратите всего час в день на изучение материалов.

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

Программа последипломного образования: полная веб-разработка

Что такое React?

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

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

Зачем реагировать?

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

Простое создание динамических приложений. React упрощает создание динамических веб-приложений, так как требует меньше кода и предлагает больше функций, в отличие от JavaScript, где код часто очень быстро усложняется.
Улучшенная производительность: React использует Virtual DOM, что позволяет быстрее создавать веб-приложения. Виртуальная модель DOM сравнивает предыдущие состояния компонентов и обновляет только те элементы реальной модели DOM, которые были изменены, вместо повторного обновления всех компонентов, как это делают обычные веб-приложения.
Компоненты многократного использования. Компоненты — это строительные блоки любого приложения React, а одно приложение обычно состоит из нескольких компонентов. Эти компоненты имеют свою логику и элементы управления, и их можно повторно использовать во всем приложении, что, в свою очередь, значительно сокращает время разработки приложения.
Однонаправленный поток данных. React использует однонаправленный поток данных. Это означает, что при разработке приложения React разработчики часто вкладывают дочерние компоненты в родительские компоненты. Поскольку данные передаются в одном направлении, становится проще отлаживать ошибки и узнавать, где в приложении возникает проблема в данный момент.
Небольшое время обучения. React легко освоить, так как он в основном сочетает в себе базовые концепции HTML и JavaScript с некоторыми полезными дополнениями. Тем не менее, как и в случае с другими инструментами и фреймворками, вам придется потратить некоторое время, чтобы получить правильное представление о библиотеке React.
Его можно использовать для разработки веб-приложений и мобильных приложений. Мы уже знаем, что React используется для разработки веб-приложений, но это еще не все, на что он способен. Существует фреймворк под названием React Native, производный от самого React, который очень популярен и используется для создания красивых мобильных приложений. Так что на самом деле React можно использовать для создания как веб-приложений, так и мобильных приложений.
Специальные инструменты для простой отладки. Facebook выпустил расширение для Chrome, которое можно использовать для отладки приложений React.Это ускоряет и упрощает процесс отладки веб-приложений React.

Приведенные выше причины более чем оправдывают популярность библиотеки React и то, почему она используется большим количеством организаций и предприятий. Теперь давайте познакомимся с функциями React.

Бесплатный курс ReactJS для начинающих

Возможности React

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

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

const name = 'Simplilearn';

Привет,

Приведенный выше код показывает, как JSX реализован в React. Это не строка и не HTML. Вместо этого он встраивает HTML в код JavaScript.

Виртуальная объектная модель документа (DOM)

Виртуальный DOM — это облегченная версия Real DOM в React. Реальные манипуляции с DOM значительно медленнее, чем манипуляции с виртуальными DOM. Когда состояние объекта изменяется, Virtual DOM обновляет только этот объект в реальном DOM, а не все сразу.

Рис. DOM веб-страницы

DOM (объектная модель документа) рассматривает документ XML или HTML как древовидную структуру, в которой каждый узел является объектом, представляющим часть документа.

Программа последипломного образования: полная веб-разработка

Как виртуальный DOM и React DOM взаимодействуют друг с другом?

При изменении состояния объекта в приложении React VDOM обновляется. Затем он сравнивает свое предыдущее состояние и затем обновляет только те объекты в реальном DOM вместо обновления всех объектов. Это ускоряет работу, особенно по сравнению с другими интерфейсными технологиями, которые должны обновлять каждый объект, даже если в веб-приложении изменяется только один объект.

Архитектура

В архитектуре Model View Controller (MVC) React является «представлением», отвечающим за то, как приложение выглядит и работает.

MVC — это архитектурный шаблон, который разделяет уровень приложения на модель, представление и контроллер. Модель относится ко всей логике, связанной с данными; представление используется для логики пользовательского интерфейса приложения, а контроллер — это интерфейс между моделью и представлением.

Расширения

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

Привязка данных

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

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

БЕСПЛАТНОЕ обучение по сертификации Java

Отладка

Поскольку существует широкое сообщество разработчиков, приложения React просты и легко тестируются. Facebook предоставляет расширение для браузера, которое упрощает и ускоряет отладку React.

Рис. Расширение React

Это расширение, например, добавляет вкладку React в инструменты разработчика в веб-браузере Chrome. Эта вкладка упрощает непосредственный просмотр компонентов React.

Теперь, когда вы знаете основные функции React, давайте перейдем к пониманию основных принципов React.

Компоненты в React

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

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

Вот некоторые особенности компонентов -

Повторное использование. Компонент, используемый в одной области приложения, можно повторно использовать в другой области. Это помогает ускорить процесс разработки.
Вложенные компоненты. Компонент может содержать несколько других компонентов.
Метод рендеринга. В своей минимальной форме компонент должен определить метод рендеринга, который определяет способ рендеринга компонента в DOM.
Передача свойств. Компонент также может получать реквизиты. Это свойства, переданные родительским элементом для указания значений.

Посмотрите демо для лучшего понимания.

Рассмотрите два компонента: функциональный компонент и компонент класса со следующим кодом.

импортировать React из "React";

Это функциональный компонент

экспортировать FunctionalComp по умолчанию;

импортировать React из "React";

Это компонент класса

экспорт ClassComp по умолчанию;

Компонент класса поставляется с методом рендеринга, который отображается на экране. Экспорт по умолчанию используется для экспорта только одного объекта (функция, переменная, класс) из файла. Допускается только один экспорт по умолчанию для каждого файла.

Видимо, эти компоненты импортированы в основной компонент, которым в нашем случае является App.js.

импортировать React из "React";

импортировать FunctionalComp из "./Components/FunctionalComp";

импортировать ClassComp из "./Components/ClassComp";

экспортировать приложение по умолчанию

После запуска браузер будет выглядеть так.

Именованный экспорт или просто экспорт также можно использовать для экспорта нескольких объектов из файла.

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

Освойте основы React, включая JSX, свойства, состояние и события. Рассмотрим сертификационный учебный курс React.js. Зарегистрируйтесь сейчас!

Реквизит в React

Props, сокращение от Properties в React Props, сокращение от properties, позволяют пользователю передавать аргументы или данные компонентам. Эти реквизиты помогают сделать компоненты более динамичными. Реквизиты в компоненте доступны только для чтения и не могут быть изменены.

Читайте также: