React что за программа

Reaсt — это библиотека, отвечающая за построение пользовательского интерфейса сайта. Причём такого интерфейса, где есть не только текст, но и интерактивные элементы, динамика, разные события.

О чём речь? О возможности поставить лайк, например. Или отправить заполненную контактную форму. Или работать с картами, напичканными инфографикой. Или с административной панелью в интернет-магазине, где у товара, корзины и процесса отправки платежа бывает несколько состояний.

Все эти элементы и состояния — это маленькие программы, разрабатываемые на языке JavaScript и исполняемые браузером пользователя.

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

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

Что такое React js. Обзор возможностей для начинающих. План изучения

Как возник React

React появился в 2013 году. Его придумали в компании Facebook в процессе внедрения чата в свою социальную сеть. Чат должен был работать на всех страницах, но при этом не влиять и не попадать под влияние других элементов интерфейса.

Все сервисы и компании, связанные с релокацией, на одной карте

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

Что-то похожее на Java, но не такое сложное. Претендентом на такой язык был даже Python, но, после череды переименований и беготне по таймлайнам, под руководством Брендана Айка появился JavaScript.

Как JavaScript взаимодействует с веб-страницами

Любая веб-страница, если уметь читать её код, — это объекты, как бы вложенные друг в друга. Например, страница состоит из области head для заголовка, стилей, размера шрифта и прочей технической информации, и области body для основного содержимого. Получается такое ветвящееся дерево из HTML и CSS-объектов, которое называется DOM (Document Object Model).

Структура DOM для JavaScript — это интерфейс, посредством которого эти программы и сценарии заставляют неподвижные HTML и CSS-объекты шевелиться.

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

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

Что такое REACT.JS

В чём преимущества приложений, написанных на React

1. Снижается нагрузка на сервер и время разработки. Повышается производительность сайта: быстрее открываются страницы и отзывается на действия пользователей интерфейс. Если обычное веб-приложение на запрос от браузера возвращает ему HTML-разметку с CSS, чтобы браузер отрисовал страницу, то в случае приложений на React браузер сначала скачивает набор скриптов, которые выполняются на устройстве пользователя. Это снимает нагрузку с сервера и повышает производительность.
2. На React необязательно разрабатывать весь сайт, если динамичные блоки занимают лишь его малую часть. Пока статичные страницы работают как обычно, мы можем сделать на React конкретный блок и вставить скрипты так, чтобы они выполнялись только в нём. Есть компании, которые спустя годы переписывали свой продукт на React. Этот переход не обязательно делать сразу, но с точки зрения разработки это может оказаться удобнее.
3. По сравнению с обычными сайтами у сайтов на React более чистая архитектура, в которой проще обнаруживать и исправлять баги и которую проще поддерживать. Разработчик контролирует потоки данных, разметку и стилизацию и в идеале знаком с паттернами программирования, позволяющими собирать приложения быстрее и гибче.
4. Если команды фронтенд и бэкенд-разработки заранее опишут в документации формат получения и отправки данных между частями приложения, то они могут работать параллельно: пока серверная часть разрабатывается, фронтенд-разработчики на основе документации имитируют данные, которые будут приходить с сервера.

React и одностраничные приложения

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

Однако, если нужно получить максимально быстрый отклик от интерфейса, то используют подход SPA (Single Page Application). Его суть в том, что весь сайт — это одна страница, которую React постоянно перерисовывает. Но не целиком.

Как обычно происходит переход со страницы на страницу в простом приложении? При переходе на другую страницу пользователь делает к ней запрос на сервер, и сервер возвращает разметку, стили и файлы скриптов (то есть HTML, CSS и JavaScript).

В случае SPA пользователь, переходя между разделами сайта, формально находится на одной и той же странице, но файлы скриптов и стили у него уже есть — остаётся дотянуть то, чего не хватает. Например, если шапка сайта одинаковая на каждой странице, а поменялся только какой-то блок страницы, то не нужно заново отрисовывать шапку.

Это экономит ресурсы и даёт более быстрый и отзывчивый интерфейс. Владельцам интернет-магазина нужно дорожить каждым мигом: есть шанс потерять клиента, если он ждёт 5-10 секунд после нажатия кнопки.

Сайт одного из наших клиентов, сервиса для работы с инстаграм-инфлюенсерами Influize — типичный пример SPA с архитектурой headless Drupal.

React и поисковая оптимизация

Поисковая оптимизация — слабая часть React-приложений. Вред для бизнеса от плохого SEO понятен: если ваш сайт не видят поисковики, то его не существует.

Поэтому есть подход Server Side Rendering. Объясним его на примере наших разработок — уже упомянутого Influize и сайта сервиса по утилизации автомобилей Scrapi. Часть работы по отрисовке этих сайтов происходит на сервере (да, всё правильно, мы пришли к тому же, от чего пытались уйти), за что отвечает Next.js, фреймворк на базе React.

При запросе от браузера сервер отдаёт заранее отрисованную страницу — готовую и как будто собранную. Потом эти элементы начинают вести себя как React-компоненты на стороне клиента.

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

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

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

Какие известные сайты и приложения разработаны на React.js

Миллиарды людей каждый день имеют дело с результатами работы React.js. Среди них:

• новостная лента в Facebook;
• большая часть клиентской стороны Instagram;
• частично WhatsApp;
• Netflix;
• New York Times;
• Yahoo! Mail;
• Dropbox;
• Codecademy.

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

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

Фото на обложке: pixabay.com

Иллюстрация предоставлена автором.

Источник: rb.ru

Зачем фронтендерам React, если есть JavaScript

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

Зачем нужны реактивные фреймворки и библиотеки?

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

Изменилась и структура сайтов. Изначально они состояли из набора отдельных HTML-страниц. Сейчас они представляют собой один HTML-документ, внешний вид которого меняется динамически через JavaScript.

Такой подход получил название SPA — single-page application, или одностраничное приложение. SPA делает сайты полноценными приложениями, которые не перезагружаются между переходами по страницам. Чтобы выполнить переход, нужно полностью перерисовать контент документа с помощью JavaScript и полученных данных.

Хотя требования к интерактивности сайтов выросли, инструменты для её создания почти не изменились. Работа с DOM по-прежнему остаётся императивной, «из коробки», и выглядит примерно так:

Привет, Мир. Меня зовут .

function setName(name) < const nameWrapper = document.querySelector(«.js-name»); if (nameWrapper) < nameWrapper.textContent = name; >> setName(«Вася»);

Этот код может показаться неплохим, если нужно добавить имя пользователя в строку приветствия или создать слайдер. Но предположим, мы делаем SPA-приложение с такой корзиной:

И эту корзину нужно перерисовать в страницу оформления заказа:

В этом случае решение задачи «в лоб» будет невероятно трудоёмким. Придётся написать тысячи строк кода взаимодействия с DOM API — такой код будет сложно читать и поддерживать. Использование библиотеки наподобие jQuery лишь поменяет интерфейс взаимодействия с DOM, но не решит проблему.

Можно написать свою реализацию MV* паттерна и настроить связывание данных, построив свою систему рендеринга. Но такие решения сложно реализовать быстро и качественно, а новым членам команды разработки будет непросто разобраться в чужих паттернах.

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

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

Что такое React?

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

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

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

Пример с приветствием пользователя на React может выглядеть так:

import React from «react»; function HelloWorld (props) < return (Привет, Мир. Меня зовут ); > export default HelloWorld;

В этом коде легко разобраться, даже если вы не знаете синтаксиса React. Здесь в виде функции описан React-компонент HelloWorld. На входе он получает объект с данными, props, который содержит свойство name c именем пользователя. Функция возвращает специальный код, похожий на HTML-разметку.

Подробнее о нём расскажем позже, а сейчас лишь важно понимать, что этот код работает. React действительно отобразит на странице DOM-дерево — оно будет соответствовать разметке, которую вернуло HelloWorld. Но в отличие от обычного HTML, мы смогли подставить в разметку данные из объекта props , тем самым шаблонизировав её.

Код на React выглядит легче и лаконичнее решения на чистом JS. Мы не описываем, как перерисовывать интерфейс. Вместо этого мы указываем, что нужно отобразить на месте компонента, и используем для этого синтаксис, похожий на HTML. Такой подход позволяет относительно легко решать и более сложные задачи. Например, перерисовать разметку страницы корзины и отобразить на её месте интерфейс страницы заказа.

Для своих перерисовок React использует Virtual DOM. Это позволяет обновлять только изменившиеся узлы DOM-дерева, а не перерисовывать всю страницу. Благодаря этому приложения не расходуют лишние ресурсы.

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

Востребован ли React на рынке фронтенд-разработки? Сравнение с Angular и Vue

Проекты на чистом JavaScript стали экзотикой — чаще разработчики используют реактивные библиотеки и фреймворки: React, Vue или Angular. Трудно понять, какой фреймворк лучше и удобнее — разработчики постоянно спорят и не могут прийти к компромиссу.

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

И всё же одно преимущество у React есть — React-разработчиков чаще нанимают. Вот сравнение количества вакансий по React, Angular и Vue на hh.ru:

Количество вакансий для фронтендеров с опытом работы 1-3 года

Компании ищут React-разработчиков в два раза чаще, чем разработчиков на Vue или Angular.

Если сравнивать количество загрузок npm-пакетов, то и здесь React превосходит фреймворки. По данным npm trends за последний год, среднее ежемесячное число загрузок пакета React — 11 млн, Angular и Vue — около 2,8 млн.

Хотя формально их вообще нельзя сравнивать, так как React — библиотека, а Vue и Angular — фреймворки. Однако из-за различных переходных вариаций, таких как «прогрессивный фреймворк», и других особенностей различий между библиотеками и фреймворками во фронтенде почти нет.

Типовые задачи React-разработчика

Типовые задачи разработчика состоят в написании React-компонентов. Далее из таких компонентов строятся страницы сайта.

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

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

Управление состоянием — библиотеки для работы с глобальными данными приложения, которые не относятся к конкретному компоненту, а нужны во многих частях сайта. Среди популярных инструментов для управления состоянием можно выделить Redux и Mobx.

Роутинг. SPA подразумевает переход между страницами сайта без дополнительных запросов к серверу. Поэтому задачами роутинга, соответствия страниц определённым URL, тоже занимаются фронтендеры. Для таких задач существует ряд популярных библиотек, в частности, React Router.

Серверный рендеринг. Одна из проблем SPA — многие поисковики ожидают HTML, а не JavaScript. Поэтому важно отдавать на запросы поисковиков не пустой HTML-файл, на котором JavaScript «рисует» интерфейс, а готовую HTML-разметку. Чтобы её генерировать из компонентов, разработан фреймворк Next.js.

Создание UI-элементов. Типовые UI-элементы обычно не пишут с нуля — для них используют готовые UI-библиотеки: MUI, Ant Design и многие другие.

Стилизация. Для стилизации в React часто используют не обычный CSS, а подход CSS-in-JS. Он позволяет описывать стили прямо в JavaScript. Одна из самых популярных реализаций подхода CSS-in-JS — библиотека styled-components.

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

Как работать с React-компонентами?

Рассмотрим подробнее синтаксис компонентов. Как мы уже говорили, React-компонент — это JavaScript-функция, которая на входе получает объект с данными для отрисовки компонента, а на выходе возвращает React-элемент.

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

Чтобы создать на странице разметку

Тяжело читать React.createElement.

, можно написать React-компонент:

import React from «react»; function HelloReact() < // не нужно думать, что это такое, дальше мы будем использовать JSX return React.createElement( «p», <>, «Тяжело читать «, React.createElement(«b», <>, «React.createElement»), «. » ); >

Вызовы React.createElement не выглядят интуитивно понятными. Глядя на код, сложно понять, что будет выведено на страницу. Поэтому React.createElement обычно напрямую не применяется, а используется специальный синтаксис JSX.

Что такое JSX?

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

import React from «react»; function HelloReact() < return

Тяжело читать React.createElement.

>

С JSX код стал понятнее. Сразу видно, какой фрагмент DOM-дерева описывает компонент.

JSX позволяет шаблонизировать разметку, подставляя в неё данные, вычисленные из JavaScript-выражений. Для этого используется синтаксис фигурных скобок. Если переписать пример из начала статьи на React, то он может выглядеть так:

import React from «react»; function HelloWorld (props) < return (Привет, Мир. Меня зовут ); > export default HelloWorld;

Здесь компонент HelloWorld получает в объекте props имя пользователя name и на основе этих данных возвращает нужную разметку: Привет, Мир. Меня зовут . Благодаря синтаксису фигурных скобок значение из переменной name подставляется в JSX.

Однако браузер ничего не знает про JSX и не умеет его интерпретировать. При использовании JSX нужно настроить сборку проекта так, чтобы JSX автоматически трансформировался в JavaScript-объекты и в браузер попадал чистый JS. Для этого есть Babel-плагины и пресеты, а также проекты наподобие CreateReactApp. В статье мы используем онлайн IDE CodeSandbox, которая предоставляет готовый шаблон для React-проектов.

Теперь посмотрим, как заставить React вывести на экран JSX-разметку. Для этого React предоставляет метод ReactDOM.render . Первым параметром в него передаётся JSX-разметка. Вторым — узел DOM-дерева, в который нужно вставить кусочек интерфейса.

Чтобы вывести компонент HelloWorld в DOM-узел с id root , нужно написать:

import ReactDOM from «react-dom»; import HelloWorld from «./hello-world»; const rootElement = document.getElementById(«root»); ReactDOM.render(HelloWorld() , rootElement);

Вызов HelloWorld c объектом вернёт нужную JSX-разметку, а rootElement хранит ссылку на DOM-элемент с id root . В результате вызов ReactDOM.render(HelloWorld() , rootElement) вставит полученный из компонента интерфейс в нужный DOM-узел.

Вручную, как функции, компоненты обычно не вызывают. Дело в том, что в JSX можно вставлять компоненты как обычные HTML-теги, передавая данные через атрибуты. При отрисовке на месте компонента в JSX будет выведена та разметка, которую вернёт компонент.

Имя компонента в JSX должно начинаться с большой буквы, иначе JSX будет идентифицировать его как обычный HTML-тег.

Таким образом, вместо ReactDOM.render(HelloWorld() , rootElement); пишут: ReactDOM.render( , rootElement); .

Композиция компонентов и хуки

Возможность вставлять в JSX не только HTML-теги, но и свои компоненты — один из важнейших приёмов в React. Страницы сайта обычно бывают намного сложнее, чем пример Hello World : они состоят из сотен или даже тысяч HTML-элементов. Описывать такую страницу в одном модуле или компоненте — плохая идея. Код превратится в огромную простыню.

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

Тот же самый пример с HelloWorld можно представить в виде композиции двух маленьких компонентов:

// компонент Name import React from «react»; function Name(props) < return ; > export default Name; // компонент HelloWorld import React from «react»; import Name from «./name»; function HelloWorld(props) < return (

Привет, Мир. Меня зовут />

); > export default HelloWorld;

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

Для более сложных страниц композиция может быть больше, например:

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

Создаваемые с помощью React пользовательские интерфейсы не статичны. Мы можем их перерисовать в ответ на действия пользователя. Для этого React предоставляет React-хуки.

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

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

В результате счётчик на React может выглядеть так:

import React, < useState >from «react»; export default function Counter(< initValue >) < const [value, setValue] = useState(initValue || 1); return ( setValue(value — 1)>>- setValue(value + 1)>>+ ); >

useState — специальный React-хук для хранения состояния компонента. Когда состояние меняется, компонент перерисовывается.

При вызове useState возвращает массив, первый элемент которого — значение состояния. Во втором элементе хранится функция-сеттер, с помощью которой можно менять значение состояния. Для кнопок передан props onClick . В него записана функция, которая вызывается при нажатии на кнопку — setValue с новым значением состояния. Это вызывает перерисовку, и на экране отображается актуальное значение value .

useState — только один из множества доступных хуков. Более того, при необходимости разработчик может писать свои кастомные хуки.

Итак, какие у React преимущества в сравнении с нативным JavaScript:

1. React предоставляет декларативное описание интерфейса — с ним удобнее работать, чем с вереницей императивных инструкций DOM API.
2. React сам решает, какие узлы DOM-дерева в какой момент обновлять. Он не выполняет лишних операций, поэтому код на React быстрее, чем большинство наивных реализаций на чистом JavaScript.
3. У React отличная документация. Самописные решения для реализации дата биндинга обычно плохо задокументированы или не задокументированы вовсе.
4. Благодаря JSX в одном компоненте мы видим и логику, и разметку, с которой должна работать данная логика. Обычно они неразрывно связаны, и видеть их рядом намного удобнее, чем отдельно хранить HTML и JavaScript.
5. Разбиение кода на компоненты позволяет переиспользовать код.

Итоги

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

При изучении React уделите больше времени функциональному синтаксису написания компонентов — он используется чаще. На классовых компонентах, как правило, осталось написанным только «легаси». Также советуем освоить TypeScript, ведь его применяют в большинстве проектов на React.

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

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

Чтобы было проще выбрать:

• Ключевые навыки фронтендеров в 2022
• Как стать JavaScript-разработчиком в 2022
• 6 книг по JavaScript для начинающих

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник: htmlacademy.ru

Знакомство с ReactJS на базовом уровне

ReactJS очень популярный в среде веб-разработчиков инструмент. Что же он собой представляет?

ReactJS — библиотека JavaScript, разработанная Facebook для создания пользовательских интерфейсов. С ее помощью разрабатываются высокореактивные и стабильно работающие страницы/веб-сайты. С ней можно забыть о традиционных веб-страницах, вынуждающих вас терять время из-за задержки при переходе на следующую страницу. “Молниеносные” веб-сайты, разработанные с помощью ReactJS, позволяют избежать этого цикла и обновлять контент на той же странице в момент происхождения события.

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

Почему React JS?

Вы действительно можете создать одностраничный интерактивный веб-сайт с помощью базового JavaScript, так как в конце концов ReactJS — это JavaScript и XML. Но ваша кодовая база — по мере своего роста — будет становиться все менее понятной и все более сложной для обработки или внесения изменений. Вам придется следовать императивному и постоянно повторяющемуся подходу к созданию интерактивного компонента. Манипулирование элементом в базовом JavaScript осуществляется на глобальном уровне. В результате при разработке новых элементов вы будете влиять на ранее созданные.

React предпочтительнее использовать по следующим причинам:

Технология SPA (single-page application, по-русски: “разработка одностраничных приложений”): React поможет вам создать одностраничное приложение. С помощью ReactJS вы сможете изменять (управлять/манипулировать) контент всей страницы с минимальным кодом.

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

Компонент-управляемый пользовательский интерфейс: React основан на компонентной концепции. Компоненты являются многоразовыми строительными блоками в пользовательском интерфейсе. С помощью ReactJS вы можете создать инкапсулированный компонент, который управляет своими данными, и избежать сценария влияния на другие состояния и действия компонентов в DOM-дереве. Это только одна из характеристик компонент-управляемого интерфейса. Он также помогает повторно использовать код, разделять ответственность и избегать повторения.

Как начать работу с React?

Настройка среды React реально возможна. Все в ReactJS — это JavaScript.

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

npx create-react-app

После создания проекта с заданным именем перейдите в каталог и запустите сервер:

cd npm start

Эта команда запустит сервер, который предоставит вам index.html (присутствует в общедоступном каталоге) по адресу localhost:3000 :

npm start запускает не только просмотр и доставку, но и преобразование кода синтаксического сахара JSX (о нем будет речь далее) в исходный JavaScript.

Структура вашего проекта должна выглядеть так. При запуске npm start первым исполняется файл index.js . Он манипулирует элементом идентификатора root в index.html . Это вызывает метод render и заменяет данные контентом, возвращаемым App.js .

ReactDOM.render — это метод, который вызывается для отображения React-элемента или DOM-элемента (первый параметр) в качестве дочерней единицы целевого элемента (второй параметр).

App.js возвращает компонент. Компонент — это специальная функция, которая возвращает React-элемент. Возвращаемый HTML-код называется JSX(JavaScript XML). JSX — это синтаксический сахар для React.createElement(component, props, …children) (пока давайте просто скажем, что React.createElement похож на document.createElement и document.appendChild). Вы можете внести изменения в содержимое страницы, изменив файл App.js в src.

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

This is my first App.

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

Приведенный выше код добавит пакеты react и react-dom . Они добавляются для использования всех модулей/функций, необходимых для создания приложения React.

Теперь создадим index.js и будем манипулировать HTML-содержимым index.html .

Это создаст элемент h1 с некоторым текстом через React.createElement. React.createElement принимает документы следующим образом:

• первый аргумент — это тег элемента, переданный в виде строки;
• второй аргумент является реквизитом для этого элемента (реквизит — это атрибуты элемента); вы можете передать либо объект с атрибутами (className, style или другим пользовательским атрибутом), либо значение null, если передачи данных не требуется;
• последний аргумент — это либо дочерние элементы, либо текст.

Приведенный выше код похож на index.js . Он создается с помощью create-react-app , где JSX сначала компилируется в этот фрагмент кода и преобразуется в Javascript при разработке проекта. Стоит заметить, что в какой-то момент вы заметите, что использование React.createElement затрудняет чтение кода при попытке создать дерево компонентов. Вот пример для новичков:

JSX — это не что иное, как специальный синтаксис в React (синтаксический сахар для React.createElement ), который помогает разработчику писать поддерживаемый и читаемый код, поэтому для изучения концепций ReactJS не обязательно знать JSX заранее, но есть своего рода соглашение о его использовании.

Итак, мы закончили создание нашего первого базового приложения с JSX и без него.

Примечание: каждый компонент должен начинаться с заглавной буквы. Это помогает React воспринимать элемент, начинающийся со строчной буквы, как элемент DOM, а элемент, начинающийся с заглавной буквы, — как специально определенный элемент React.

• Почему пора завязывать с React
• Как с легкостью создавать формы на React с помощью react-hook-form
• 6 актуальных советов по созданию чистого кода React

Источник: medium.com