React — A JavaScript library for building user interfaces
Так характеризуют React его создатели, разработчики компании Facebook. Появившись в 2013 году, React быстро стал набирать обороты и получил широчайшее распространение. На момент создания курса на GitHub у проекта более 150 тысяч звёзд.
Секрет успеха в том, что React позволил под другим углом посмотреть на процесс создания интерфейсов. Он резко снизил порог входа и сложность получаемых решений. Причём не только по сравнению с ручной работой с DOM, но и по сравнению со многими фреймворками.
И хотя React как библиотеку для отрисовки можно встраивать в существующий технологический стек там, где это имеет смысл, он также способен взять на себя полное управление фронтендом. Правда, в данном случае для эффективной работы придётся подключить ещё некоторые ключевые дополнения, такие как redux
и react-router
.
Фундаментальная идея, лежащая в основе работы React, оказалась настолько мощной, что её расширили далеко за рамки браузера. С React можно работать как на сервере (server-side rendering), так и на мобильных платформах (React Native). Вы не ослышались: сейчас на языке JavaScript можно создавать приложения под мобильные платформы, которые работают почти так же эффективно, как и нативные приложения. Такую ситуацию, когда один подход используется для реализации разных задач (сайт, мобильные приложения) называется "Learn once, Write anywhere".
В этом курсе вам предстоит плотно пройтись по возможностям React и хорошенько с ними разобраться. Однако это не отменяет необходимости работать с React и вне среды Hexlet.
Самый простой способ попрактиковаться с React – это сервис CodePen. После регистрации вы сможете создать pen (пен) — изолированную среду разработки, подключив туда React. Результаты кода отображаются там же, в соседней панели.
CodePen позволяет вставлять пены прямо в свой сайт, эта возможность будет использоваться для демонстрации. Вы можете не только проанализировать такой код, но запустить и даже поправить его.
See the Pen js_dom_fsm_data by Hexlet (@hexlet) on CodePen.
Разработчики в Facebook, понимая как сложно настроить с нуля экосистему для старта фронтенд-проектов, создали проект под названием create-react-app. Это npm-библиотека, которая позволяет стартануть с нулевой конфигурацией:
npx create-react-app my-app
cd my-app/
npm start
Дальше просто открывайте localhost:3000
и наслаждайтесь.
Если вы всё же решитесь делать всё самостоятельно, то не забудьте подключить пресет (preset) @babel/preset-react
к вашей конфигурации Babel. React расширяет JS, и Babel не может работать с кодом без этого пресета.
На протяжении всего курса вам предстоит создавать маленькие и не очень маленькие компоненты Bootstrap. Если вы ещё не знакомы с ним, то прочитайте руководство по Бутстрапу. В любом случае в каждой задаче будет подробно описано какой компонент использовать и как он должен выглядеть.
Как и в курсе JS: DOM API, часть тестов основана на снепшот-тестировании, а это значит, что важно использовать вёрстку именно так, как указано в задании.
Кроме этого, практически все задания визуализированы, и перед тем как запускать тесты убедитесь, что всё работает в веб-доступе.
Так как React отрабатывает на фронтенде, то и ошибки будут появляться там же. Не забывайте всегда держать открытой консоль (например, в инструментах разработки Chrome) и внимательно читать всё, что там написано. Большая часть ошибок будет выводиться именно там.
Также не забудьте поставить React Developer Tools. Это расширение для браузера, которое даёт очень удобную панель для анализа происходящего с React в вашем приложении. Начните его использовать с первого урока.
React изучают как опытные программисты, так и новички, для которых это первый серьезный опыт написания фронтенд-приложений. Из-за этого сложно сделать курс универсальным, одинаково понятным и интересным для всех. Поэтому здесь, на Хекслете, мы пошли другим путем. Курс по React посвящен только самому React, без изучения JavaScript. А вот сам JavaScript можно (и желательно) изучить в наших других курсах, посвященных языку и браузерным технологиям. Проще всего сразу двигаться по профессии Фронтенд-программист, где есть готовая программа, в которую входит и текущий курс.
Вам ответят команда поддержки Хекслета или другие студенты.
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Загляните в раздел «Обсуждение»:
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Зарегистрируйтесь или войдите в свой аккаунт