В рамках своего пути к тому, чтобы стать веб-разработчиком, я решил взять на себя задачу проходить и вести блог об одном курсе Frontend Masters в неделю в течение пяти недель. В первую неделю я выбрал Complete Intro to React v2. Я рискну и предполагаю, что вам было бы очень скучно, если бы я попытался охватить примерно 12-часовой учебник в одном сообщении в блоге, поэтому я выбрал пример, который поможет вам начать работу с компонентами React.
Нетехническое примечание:
Как сторонник разнообразия в технологиях, этот пост не был бы честным, если бы я не упомянул, что в течение первых 20 минут примерно 12-часового обучения я был удивлен, испытав ненужную микроагрессию, которая кричала: Если вы не натуральная белая мужчина, тебе здесь не рады. Что еще более удивительно, я подробно обсудил это с генеральным директором, который был восприимчив и быстро решил проблему. Хотя мне нравится представлять, что, если бы разные люди создавали этот продукт, сексистский контент никогда бы не попал на мой экран с самого начала, было важно, чтобы мои отзывы были приняты близко к сердцу.
Я хочу сосредоточиться на знаниях, которые я получил из этого руководства, и убедить всех новичков в том, что React — это то, чему может научиться каждый. На случай, если у вас есть склонность прокручивать в голове новые технологии и мучиться с ними еще до того, как вы приступите к первому уроку. Не то чтобы я знаю, что это такое. Неа. Определенно не я.
Начиная
Я бы рекомендовал начать с React, как только вы освоитесь с ванильным Javascript, HTML и композицией, принципом объектно-ориентированного программирования. Композиция (не путать с наследованием) означает брать разные объекты и объединять их вместе для создания нового, более сложного объекта.
ДОМ, виртуальный ДОМ
В традиционной веб-разработке DOM или объектная модель документа — это способ, с помощью которого веб-браузер отслеживает то, что должно отображаться на странице. Это означает, что каждый раз, когда вашей веб-странице нужно изменить то, что отображается — скажем, вы находитесь на Facebook, и Жанель Монэ только что прокомментировала ваш пост — ваша программа должна снова загрузить весь DOM, чтобы отобразить комментарий Джанель, даже если все остальное осталось. то же. Это означает, что ваша программа выполняет работу по повторному отображению вещей, которые не изменились, даже если у нее уже есть эта информация. Кажется немного избыточным, не так ли?
React справляется с этим более разумно благодаря идее виртуального DOM. Все изменения на веб-странице обновляются в виртуальном DOM — копии фактического DOM. Затем виртуальный DOM сравнивается с фактическим DOM, и любые изменения помечаются. Таким образом, программе нужно загрузить только эти изменения, а не весь DOM.
React постоянно играет в игру «найди отличия», только вместо оценки двух изображений он оценивает виртуальный DOM и фактический DOM, чтобы упростить отображение изменений на веб-странице.
Компоненты
Общая идея React состоит в том, чтобы разделить ваше приложение на более мелкие и простые разделы, которые должны отслеживать только информацию и действия, которые их касаются. Эти меньшие и более простые секции называются компонентами. В руководстве Брайан объясняет, что следующий пример компонента точно не убедит вас в том, почему React стоит затраченных усилий, но я думаю, что он необходим для первого понимания того, что происходит.
Давайте разберем это построчно, начиная с того, что находится между тегами script в строках 13–25.
Здесь мы создаем и визуализируем компонент под названием «MyFirstComponent». Создание компонента в строках 14–22 аналогично объявлению переменной в Javascript, однако мы определяем его с помощью метода createClass.
В строках 15–21 мы передаем метод рендеринга, который определяет детали того, что будет отображать этот компонент. Каждый компонент React должен иметь метод рендеринга, и этот метод рендеринга должен возвращать markup, также известный как HTML в нашем случае. Итак, строка 17 создает div, а строка 18 создает тег h1 с надписью Это мой первый компонент!. В HTML это будет выглядеть так:
Хорошо, отлично! Мы создали наш первый компонент. Как мы это показываем? Строки 23 и 24 обрабатывают это с помощью метода React render. Это означает, что мы фактически помещаем наш компонент в DOM после его создания. В этом примере метод рендеринга принимает два аргумента: что отображать и где отображать.
Что показывать:
React.createElement(MyFirstComponent)
Здесь используется метод React’s createElement для создания HTML-элемента из схемы нашего компонента, которую мы определили в строках 14–22.
Наше место для отображения:
document.getElementById(‘app’)
Это представляет HTML-элемент в нашем файле с идентификатором «app», который является «пустым» элементом div в строке 10. Я заключил пустые кавычки, потому что после обработки строк 23 и 24, технически div будет содержать наш компонент.
Ура, вы пережили свой первый компонент React!
Я хочу отметить, что это разбивка удобной для новичков реализации React. Есть много других понятий, таких как свойства и состояние, которые помогают объяснить, почему использование React для сложных приложений стоит обучения.
Если вы ищете более подробный пример React или просто наслаждаетесь чтением карт Таро, ознакомьтесь с веб-приложением для карт Таро, над которым мы с коллегой работали на прошлой неделе, и с его кодовой базой.
