Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Введение JS: React

React — A JavaScript library for building user interfaces

Так характеризуют React его создатели, разработчики компании Facebook. Появившись в 2013 году, React быстро стал набирать обороты и получил широчайшее распространение. На момент создания курса на GitHub у проекта более 200 тысяч звёзд.

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

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

Фундаментальная идея, лежащая в основе работы React, оказалась настолько мощной, что её расширили далеко за рамки браузера. С React можно работать как на сервере (server-side rendering), так и на мобильных платформах (React Native). Вы не ослышались: сейчас на языке JavaScript можно создавать приложения под мобильные платформы, которые работают почти так же эффективно, как и нативные приложения. Такую ситуацию, когда один подход используется для реализации разных задач (сайт, мобильные приложения) называется «Learn once, Write anywhere».

Практика

В этом курсе вам предстоит плотно пройтись по возможностям React и хорошенько с ними разобраться. Однако это не отменяет необходимости работать с React и вне среды Hexlet.

CodePen

Самый простой способ попрактиковаться с React — это сервис CodePen. После регистрации вы сможете создать pen (пен) — изолированную среду разработки, подключив туда React. Результаты кода отображаются там же, в соседней панели.

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

See the Pen js_dom_fsm_data by Hexlet (@hexlet) on CodePen.

create-vite

Разработчики, понимая как сложно настроить с нуля экосистему для старта фронтенд-проектов, создали проект под названием create-vite. Это npm-библиотека, которая позволяет стартануть с нулевой конфигурацией. Для создания проекта нужно выполнить команду:

npm create vite@latest

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

Need to install the following packages:
  create-vite@5.2.3
Ok to proceed? (y) y
✔ Project name: … vite-project
✔ Select a framework: › React
✔ Select a variant: › JavaScript

Scaffolding project in /tmp/vite-project...

Done. Now run:

  cd vite-project
  npm install
  npm run dev

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

cd vite-project
npm install
npm run dev

Дальше просто открывайте http://localhost:5173/ и наслаждайтесь.

babel-preset-react

Если вы всё же решитесь делать всё самостоятельно, то не забудьте подключить пресет (preset) @babel/preset-react к вашей конфигурации Babel. React расширяет JS, и Babel не может работать с кодом без этого пресета.

Курс

На протяжении всего курса вам предстоит создавать маленькие и не очень маленькие компоненты Bootstrap. Если вы еще не знакомы с ним, то прочитайте руководство по Бутстрапу. В любом случае в каждой задаче будет подробно описано, какой компонент использовать и как он должен выглядеть.

Как и в курсе JS: DOM API, часть тестов основана на снепшот-тестировании, а это значит, что важно использовать вёрстку именно так, как указано в задании.

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

Классовые компоненты актуальны

С момента создания React претерпел значительные изменения. Сначала основное внимание уделялось классовым компонентам, которые предоставили разработчикам возможность создавать компоненты с состоянием и жизненным циклом. Однако с появлением функциональных компонентов и хуков в версии React 16.8 в 2019 году акцент сместился. Хуки позволили разработчикам использовать состояние и другие возможности React без необходимости использовать классы.

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

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

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

Отладка

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

Также не забудьте поставить React Developer Tools. Это расширение для браузера, которое даёт очень удобную панель для анализа происходящего с React в вашем приложении. Начните его использовать с первого урока.


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Для полного доступа к курсу нужен базовый план

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

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

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

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
Осваивайте разработку веб-страниц, оживляйте дизайн макетов, публикуйте сайты и приложения. Отслеживайте ошибки в интерфейсе и устраняйте их
10 месяцев
с нуля
Старт 21 ноября
профессия
Обучитесь разработке визуальной части сайта — фронтенда, а также реализации серверной — бэкенда. Освойте HTML, CSS, JavaScript
16 месяцев
с нуля
Старт 21 ноября

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»