Его создатель, британский физик Тим Бёрнерс-Ли опубликовал на нём не мемас с котиками, а описание новой технологии, название которой ты вероятнее всего слышал. Мы говорим о три W или World Wide Web . Она была основана на протоколе HTTP, то есть просто наборе правил, по которому передавались данные в сети.

Сам сайт был написан с помощью специального языка, который назвали языком гипертекстовой разметки или HTML. Проще говоря это специальный язык, который просто говорит браузеру о том, что добавлено на страницу сайта. Заголовок, просто текст или картинка. Браузер, как Гугл переводчик, переводит код в понятный нам вид.

К чему все это? А к тому что этот ваш интеренет за это время сильно поменялся. Спустя несколько лет появились новые технологии для веба. Язык для оформления внешнего вида сайта CSS, язык программирования для оживления сайта - JavaScript, который вечно отключают с 20 апреля по 1 мая, и куча всего ещё.

То, что раньше могло работать только локально на компьютере у пользователя и требовало много ресурсов, теперь спокойно запускается прямо в браузере и практически ничего не нагружает.

Но что есть у приложений, чего нет у сайтов? Правильно - скорости! КЧАУ!

Приложение реагирует практически моментально, как твой батя в танках, когда увидел дуло танка противника. В приложении когда ты жмякаешь на какую-нибудь кнопку в меню, то этот раздел открывается сразу, a если на сайте то у тебя всё пропадает, появляется белый экран и только потом начинают появляться элементы страницы. Это потому что части сайта отправляются нам по кусочкам. Или уже нет?

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

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

Первым фактом про него мы начнём в комментах холивар – реакт это именно библиотека, а не фреймворк как может показаться.

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

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

А что там с фреймворками?

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

Сам по себе Реакт это библиотека для языка программирования ДжаваСкрипт. Если ты всё ещё задаёшься вопросом, почему реакт и чем он так реактивен, то потыкай любое популярное веб-приложение в браузере. Например, Нетфликс или Реддит. Чувствуешь как бесшовно всё загружается? Это работает благодаря Реакту.

Только если что, реактивность это не потому что всё быстро открылось. Это потому что произошла РЕАКЦИЯ на наше действие. Например, после нажатия кнопки элементы страницы перерисовались, без перезагрузки самой страницы.

Происходит это благодаря штуке, которую называют виртуальный DOM. Не в смысле дом, который здание, а в смысле дом, который document object model.

Если кратко, то по сути дом - это структура, которая представляет страницу в виде дерева. Под деревьями мы имеем в виду связки разных элементов.

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

Поглядим, а что там в Merion Academy?

Давай посмотрим на главную страницу сайта Мерион Акэдеми.

Вот, например, заголовок “Платформа доступного IT-образования”. Он, как и все элементы добавлен с помощью языка HTML.

Если мы откроем меню разработчика в браузере, то сможем увидеть как выглядит реальная HTML-разметка.

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

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

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

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

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

Фух, ладно, давай приведём понятную аналогию, чтобы стало полегче. Вот реальный дом - это как писать и сразу вносить изменения на бумагу. Если ошибся, то приходится всё стирать и переписывать заново. Сразу вспоминаем, как делали домашку в школе с мамой.

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

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

Про особенности Реакта?

А так на самом деле у реакта целая куча особенностей. Например, для него есть специальный тип файлов – JSX. Это как джаваскрипт, только смешавшийся с языком HTML. Мы как будто пишем вёрстку с помощью джаваскрипта, и вот в этом и есть декларативный подход, мы просто пишем то, что хотим увидеть.

То есть эта функция на джава скрипте в связке с реактом просто возвращает целый HTML блок и всю интерактивность блока мы прописали внутри этой же функции.

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

Ещё одна фишка реакта это компоненты. По сути это блок кода который содержит в себе html разметку, стили, логику какого-то обособленного элемента страницы - кнопки, заголовка, блока с текстом и так далее.

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

А потом уже все это собрать как конструктор, использовав теги для подключения компонента.

Их можно встраивать друг в друга и строить целые матрёшки из элементов.

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

Кстати, это работает благодаря так называемым прОпсам. ПрОпсы это от слова проперти, то есть свойства. Это механизм передачи данных от одного компонента к другому. Это могут быть строки, числа, объекты, функции и так далее. Вот в html у тэгов есть атрибуты. Они идут как дополнительные настройки для тэга. Например, у тэга для добавления картинки img есть атрибут src, который получает путь до файла с картинкой, а потом эта картинка на странице выводится. С пропсами логика похожая.

Только нам нужно добавить их к компоненту самостоятельно. То есть указать

Сначала они прописываются внутри компонента, а потом при использовании компонента передаются .

function Greeting(props) {
  return <h1>Привет, {props.name}!</h1>;
}

function App() {
  return (
    <div>
      <Greeting name="Вася" />
      <Greeting name="Маша" />
      <Greeting name="Петя" />
    </div>
  );
}

И вот получается, что в родительском компоненте  мы передаём их в дочерний. В родительском они могут по-всякому меняться, а дочерний на них никак не влияет и просто использует.

Пратика!

Давай посмотрим примеры чтобы понять как реакт работает. Для этого сделаем страницу, где есть кнопочка, которая будет добавлять количество съеденной шаурмы в счётчик. Первый пример напишем на базовом html и js.

Полный код:https://gist.github.com/kianurivzzz/6c994163c53a670285f27b87e89a0371

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

Внутри элемента <body> просто располагается вся видимая часть страницы сайта. Тут есть элемент див с классом рут, это корневой элемент, в который добавляются все элементы интерфейса.

Дальше идёт заголовок со счётчиком и кнопка. Нажатие на эту кнопку будет увеличивать значение счётчика.

<!doctype html>
<html lang="ru">
    <head>
        <!-- Указываем кодировку документа -->
        <meta charset="UTF-8" />
        <!-- Настраиваем viewport для адаптивности -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- Заголовок страницы -->
        <title>Счётчик шаурмы на HTML и JavaScript</title>
    </head>
    <body>
        <!-- Корневой элемент -->
        <div class="root">
            <!-- Элемент для отображения значения счётчика -->
            <h1 id="counter-value"></h1>
            <!-- Кнопка для увеличения значения -->
            <button id="increment-btn">+1</button>
        </div>

        <script>...</script>
    </body>
</html>

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

const counterValueElement = document.getElementById("counter-value");

const incrementBtn = document.getElementById("increment-btn");

let counterValue = 0;

Тут есть функция, которая обрабатывает клики. Она увеличивает счётчик на единицу и устанавливает текст с этим значением внутри заголовка.

function increment() {
		counterValue += 1;
		counterValueElement.innerText = `Шаурмы съедено: ${counterValue}`;
}

И в конце устанавливаем значения по-умолчанию для заголовка и добавляем нашу в функцию в обработку жмаков.

counterValueElement.innerText = `Шаурмы съедено: ${counterValue}`;
incrementBtn.addEventListener("click", increment);

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

Ты можешь сказать: “А ничо тот факт, что то был пример на простых технологиях? А как это сделать на Реакте?

Начало будет таким же. Ну, почти. Сначала надо добавить контейнер с айди рут, куда Реакт вставляет приложение. Потом подключить нужные библиотеки реакта, просто так они недоступны.

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

<html lang="ru">
    <head>
        <!-- Мета-теги для настройки кодировки и viewport -->
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Счётчик шаурмы на React</title>
    </head>
    <body>
        <!-- Корневой элемент для React-приложения. В нём отображается приложение -->
        <div id="root"></div>

        <!-- Подключение React библиотек -->
        <script
            src="<https://unpkg.com/react@17/umd/react.development.js>"
            crossorigin
        ></script>
        <script
            src="<https://unpkg.com/react-dom@17/umd/react-dom.development.js>"
            crossorigin
        ></script>
        <script
            src="<https://unpkg.com/@babel/standalone@7.13.6/babel.min.js>"
            crossorigin
        ></script>

Или подключить, скачав их локально к себе на компьютер с помощью так называемого пакетного менеджера npm. Он помогает нам скачивать библиотеки для джава скрипта без кнопок скачать без смс и регистрации.

Тут мы подключили сам Реакт, специальное расширение для работы с дом, а ещё бэйбл, который преобразует

джи эс икс в обычный ДжаваСкрипт, потому что ДжиЭсИкс браузер не понимает.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Счётчик шаурмы на React</title>
</head>
<body>
    <div id="root"></div>
    
    <!-- Подключение React -->
    <script src="...react.development.js"></script>
    <script src="...react-dom.development.js"></script>
    <script src="...babel.min.js"></script>
    <script type="text/babel">...</script>
</body>
</html>

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

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

Далее добавим состояние. За это отвечает штука, которая называется юз стейт. Состояния это такие объекты, которые используется для хранения всякой информации. Они могут меняться со временем и влияют на отображение компонента. Прямо как твои состояние и отображение до и после того как ты бахнул пельмешек! По сути - это просто временное хранилище.

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

            function App() {
                // Состояние для хранения значения счетчика
                const [value, setValue] = React.useState(0);

                // Функция для увеличения значения на 1
                function increment() {
                    setValue(value + 1);
                }

                // Возвращаем JSX разметку. Она выглядит как HTML
                return (
                    <div className="app">
                        <h1>Съеденно шаурмы: {value}</h1>
                        <button onClick={increment}>+1</button>
                    </div>
                );
            }

Сразу можно увидеть джи эс икс разметку. Она похожа на html, может показаться, что даже выглядит также. Но если ты испытываешь от этого эффект зловещей долины, то это не зря. Если приглядеться, то можно заметить то, что вместо класса, написано класснейм. А ещё значение из джаваскрипт кода вставляются прямо внутрь разметку.

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

  <div className="app">
      <h1>Съеденно шаурмы: {value}</h1>
      <button onClick={increment}>+1</button>
</div>

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

ReactDOM.render(
    <div>
        <App />
    </div>,
    document.getElementById("root"),
);

Вот так вот. И в итоге получаем такое же приложение.

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

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

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

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

Ещё с реактом, часто используют редAкс (redux).

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

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

Внимание-внимание!

Тревога! У нас вышел новый классный курс на котором можно научиться писать интерфейсы приложух на Реакте (react).

Ты пройдёшь реально огромный и крутой путь перед тем, как создать финальный проект, который сможешь закинуть в портфолио.

• Сначала погрузишься в базу. Рабочую среду

• настроишь, с джи эс икс разберёшься, про всякие виды компонентов узнаешь, а ещё с состояниями познакомишься. Ещё будут всякие хуки, композиции, стилизации, реакт роутер, редах, миделвари. Короче, полный фарш!
• Всё это мы приправим курсами в подарок. Изучишь английский для разработчиков и узнаешь как потом работу найти в этом вашем айти.
• Кстати, всё это добро можно оплатить долями или в рассрочку. Чтобы платить не много сразу, а немного по чуть-чуть.

Переходи по ссылке на бесплатный урок в описании, зацени: тыц

Подводя итоги скажем, что реакт на самом деле очень крутая штука. Но нужно пояснить, что для всего и сразу его использовать не стоит. Он подходит для средних и больших проектах. В маленьких в нём просто нет необходимости и даже скорее усложнит разработку.

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

Пакеда!