react обучение с нуля
Учебник. React в Windows для начинающих
Если вы только начинаете свое знакомство с React, это руководство поможет вам начать работу.
Предварительные требования
Несколько основных терминов и понятий
React — это библиотека JavaScript для создания пользовательских интерфейсов.
Это решение с открытым кодом — вы можете участвовать в этом проекте, публикуя проблемы и запросы на вытягивание. (См. эту документацию!)
Это декларативная библиотека — вы пишете нужный код, с которым затем React выполняет все действия JavaScript и DOM, чтобы получить нужный результат.
Она также основана на компонентах — приложения создаются с помощью готовых и многократно используемых независимых модулей кода, которые управляют собственным состоянием и которые можно объединить с помощью платформы React. Это позволяет передавать данные через приложение, сохраняя состояние из модели DOM.
Основной принцип работы с React: «Выучи один раз, используй везде». Целью является повторное использование кода. Вам не нужно делать предположения о том, как вы будете использовать пользовательский интерфейс React с другими технологиями. Вместо этого нужно сделать компоненты многократно используемыми без необходимости перезаписывать существующий код.
JSX — это расширение синтаксиса для JavaScript, написанное для использования с React. Оно выглядит как HTML, но фактически является файлом JavaScript, который необходимо скомпилировать или преобразовать в обычный код JavaScript.
Виртуальная модель DOM — модель DOM представляет пользовательский интерфейс приложения. При каждом изменении состояния пользовательского интерфейса приложения модель DOM обновляется для представления изменений. Если модель DOM обновляется часто, производительность снижается. Виртуальная модель DOM — это визуальное представление модели DOM, поэтому при изменении состояния приложения обновляется виртуальная модель DOM, а не сама модель DOM, что позволяет оптимизировать производительность. Это репрезентация объекта DOM, упрощенная копия.
Представления — это то, что видит пользователь в браузере. В React представление связано с понятием элементов отрисовки, которые пользователь должен видеть на экране.
Состояние — это данные, хранимые в разных представлениях. Состояние обычно зависит от прав и действий пользователя. Например, при входе на веб-сайт может отображаться ваш профиль пользователя (представление) с вашим именем (состояние). Данные состояния зависят от пользователя, но представление не меняется.
Использование React в Visual Studio Code
Создать приложение с помощью React можно разными способами (примеры см. в статье Общие сведения о React). В этом учебнике описано, как использовать create-react-app для ускорения настройки работающего приложения React, чтобы вы могли сосредоточиться на экспериментах с кодом, а не отвлекаться на средства сборки.
Измените каталоги, чтобы перейти в папку для нового приложения ( cd hello-world ), и запустите приложение ( npm start ).
Новое приложение React Hello World будет скомпилировано. Затем оно откроется в веб-браузере по умолчанию по адресу localhost:3000.
Найдите файл src/App.js и перейдите в следующий раздел заголовка:
Измените его следующим образом:
Использование React с API
Используя то же приложение Hello World, созданное с помощью React и обновленное в Visual Studio Code, мы добавим вызов API для отображения некоторых данных.
Во-первых, мы удалим все содержимое из этого файла app.js и сделаем из него компонент класса. Сначала мы импортируем компонент из React для создания компонента класса. (Типов компонентов два: класс и функция.) В оператор return() также будет добавлен пользовательский код JSX. Чтобы увидеть результат, нужно перезагрузить страницу.
Теперь файл app.js будет выглядеть так:
Чтобы добавить локальное состояние, необходимо сначала добавить конструктор. При реализации конструктора для подкласса React.Component следует вызывать super(props) перед любым другим оператором. В противном случае this.props не удастся определить в конструкторе, что может привести к ошибкам. Данные в компоненты передают свойства.
Теперь файл app.js будет выглядеть так:
Основы React: всё, что нужно знать для начала работы
Хотите узнать о том, что такое React, но вам всё никак не выпадает шанс изучить его? Или, может быть, вы уже пробовали освоить React, но не смогли толком понять? А может, вы разобрались с основами, но хотите привести в порядок знания? Эта статья написана специально для тех, кто положительно ответил хотя бы на один из этих вопросов. Сегодня мы создадим простой музыкальный проигрыватель, раскрывая основные концепции React по мере продвижения к цели.
Разобравшись с этим материалом, вы освоите следующее:
Предварительная подготовка
Рассмотрим такую ситуацию: к вам за помощью обращается маленький стартап. Они создали приятную страницу, пользуясь которой пользователи могут загружать в их сервис музыку и проигрывать её. Им хочется, чтобы вы сделали самое сложное — вдохнули в эту страницу жизнь.
Для начала создайте новую директорию проекта и добавьте туда три файла. Вот они на GitHub, а вот их код.
Для успешного прохождения этого руководства вам понадобится свежая версия браузера Google Chrome, иначе не будут работать анимации. Выражаем благодарность Стивену Фабре за CSS для кнопки проигрывания и Джастину Виндлу за код визуализации (оригинал можно посмотреть здесь).
Откройте index.html в редакторе кода и в браузере. Пришло время познакомиться с React.
Что такое React?
React — это инструмент для создания пользовательских интерфейсов. Его главная задача — обеспечение вывода на экран того, что можно видеть на веб-страницах. React значительно облегчает создание интерфейсов благодаря разбиению каждой страницы на небольшие фрагменты. Мы называем эти фрагменты компонентами.
Вот пример разбивки страницы на компоненты:
Каждый выделенный фрагмент страницы, показанной на рисунке, считается компонентом. Но что это значит для разработчика?
Что такое компонент React?
Компонент React — это, если по-простому, участок кода, который представляет часть веб-страницы. Каждый компонент — это JavaScript-функция, которая возвращает кусок кода, представляющего фрагмент страницы.
Для формирования страницы мы вызываем эти функции в определённом порядке, собираем вместе результаты вызовов и показываем их пользователю.
Напишем компонент внутри тега
Функции можно писать и так:
React использует язык программирования, называемый JSX, который похож на HTML, но работает внутри JavaScript, что отличает его от HTML.
Вы можете добавить сюда обычный HTML для того, чтобы он попал в пользовательский интерфейс:
Можно и написать собственный компонент на JSX. Делается это так:
Это — стандартный подход — вызывать компоненты так, будто вы работаете с HTML.
Сборка компонентов
Компоненты React можно помещать в другие компоненты.
Вот что выведет вышеприведённый код:
Именно так страницы собирают из фрагментов, написанных на React — вкладывая компоненты друг в друга.
Классы компонентов
До сих пор мы писали компоненты в виде функций. Их называют функциональными компонентами. Однако, компоненты можно писать и иначе, в виде классов JavaScript. Их называют классами компонентов.
В том случае, если вас интересуют компоненты без состояния, предпочтение следует отдать функциональным компонентам, их, в частности, легче читать. О состоянии компонентов мы поговорим ниже.
JavaScript в JSX
В JSX-код можно помещать переменные JavaScript. Выглядит это так:
Теперь текст «I am a string» окажется внутри тега
Кроме того, тут можно делать и вещи посложнее, вроде вызовов функций:
Вот как будет выглядеть страница после обработки вышеприведённого фрагмента кода:
Подводные камни JSX
Для того, чтобы этого добиться, нужно воспользоваться свойством className :
Особенности создаваемого компонента
Метод constructor компонента React всегда должен вызвать super(props) прежде чем выполнять что угодно другое.
Итак, а что нам делать с этим «состоянием»? Зачем оно придумано?
Изменение компонента React на основе его состояния
Состояние — это инструмент, позволяющий обновлять пользовательский интерфейс, основываясь на событиях. Тут мы будем использовать состояние для изменения внешнего вида кнопки проигрывания музыки, основываясь на щелчке по ней. Кнопка может отображаться в одном из двух вариантов. Первый указывает на возможность запуска проигрывания, второй — на то, что музыка проигрывается, и этот процесс можно приостановить. Когда пользователь щёлкает по кнопке, меняется состояние, а затем обновляется пользовательский интерфейс.
В функции render ключевое слово this всегда ссылается на компонент, внутри которого она находится.
Как компонент реагирует на события?
Пользователь может взаимодействовать с компонентом, щёлкая по кнопке проигрывания музыки. Мы хотим реагировать на эти события. Делается это посредством функции, которая занимается обработкой событий. Эти функции так и называются — обработчики событий.
Когда пользователь щёлкает по тексту, представленному тегом
Как должен работать компонент
Теперь, разобравшись с этим механизмом, займёмся обработкой щелчка по кнопке.
Обмен данными между компонентами
Когда состояние Container меняется, свойство PlayButton также меняется, и функция PlayButton вызывается снова. Это означает, что вид компонента на экране обновится.
Внутри PlayButton мы можем реагировать на изменения, так как PlayButton принимает свойства как аргумент:
Если мы поменяем состояние на this.state = < isMusicPlaying: true >; и перезагрузим страницу, на ней должна появиться кнопка паузы:
События как свойства
Свойства необязательно должны представлять собой какие-то данные. Они могут быть и функциями.
Неприятная особенность setState
Поэтому вот так поступать не следует:
Если вы изменяете состояние, основываясь на предыдущем состоянии, нужно делать это по-другому. А именно, следует передать setState функцию, а не объект. Эта функция принимает старое состояние как аргумент и возвращает объект, представляющий новое состояние.
Эта конструкция сложнее, но она необходима только в том случае, если вы используете старое состояние для формирования нового состояния. Если нет — можно просто передавать setState объект.
Что такое ссылки?
Пришло время включить музыку. Для начала добавим тег :
⚛️ 12 бесплатных ресурсов для изучения React
Как вы уже наверняка знаете, React — это JavaScript-библиотека для создания пользовательских интерфейсов, которая разрабатывается и поддерживается Facebook, Instagram и сообществом отдельных разработчиков и корпораций.
Русскоязычная версия официального сайта React
Видеокурсы
Если текстовому формату вы предпочитаете визуальный, существует множество высококачественных и даже интерактивных курсов React, которые вы можете использовать для начала своего путешествия.
Руководство для начинающих
Learn React
Learn React – е ще один отличный курс из 58 уроков, более углубленно охватывающих широкий спектр тем по React. На сайте разработана крутая платформа со встроенным редактором, который позволяет играться с кодом во время просмотра видео.
FreeCodeCamp
Список учебных ресурсов не был бы полным без FreeCodeCamp – одной из крупнейших платформ для изучения кода с тысячами статей, руководств и учебных пособий. По приведенной ссылке курс по фронтенду с React.
YouTube-курсы
В нашей подборке 70 YouTube-каналов для фронтенд-разработчика есть много материалов по React:
Шпаргалки
Шпаргалка по React
React.js Cheatsheet – сборник готового кода по множеству тем: компонентам, свойствам, хукам, работе с узлами DOM и т. д.
React Cheat Sheet
Если вам не пришелся по душе первый вариант, посмотрите на React Cheat Sheet – это шпаргалка с фильтром по имени, примерами и ссылками на документацию.
Шпаргалка по паттернам React
React Patterns – упорядоченный список ясных кратких шаблонов. Можно оформить подписку и получать новые описания шаблонов React и советов на почту.
Подкасты о React
React Podcast
Англоязычный подкаст подойдет тем пользователям React, которые хотят совместить изучение чего-то нового с практикой восприятия английской речи на слух. Хотя подкаст React Podcast и не является учебным ресурсом, он поможет понять React и экосистему W eb D ev и получить представление о практиках разработки.
Пятиминутка React
Подкаст 5minreact.ru посвящен не только React, но и различным смежным технологиям и конференциям. Но на странице легко найти темы, посвященные только React. Подкаст ведется с ноября 2016 г., выпущено 65 записей. Кроме видео автор иногда записывает и скринксты.
Блоги
Dev.to
Overreacted.io
Overreacted.io – л ичный блог Дэна Абрамова, одного из главных разработчиков React и соавтора Redux. Отличный блог для тех, кто уже в теме. Здесь вы найдете массу интересного о React и его внутренней структуре.
React Resources
React Resources – портал, занимающийся сбором информации о React из разных источников со всего веба. Материал может быть не особо современным и качественным, но вы можете быть уверены, что найдете здесь практически всё, что было когда-либо опубликовано о React.
Заключение
Надеемся, подборка поможет вам выбрать самый эффективный способ освоения этой замечательной библиотеки. Вот ещё несколько наших статей о React:
Начало работы
На этой странице мы сделаем небольшой обзор документации и других ресурсов, которые могут пригодиться при первом использовании React.
React — это JavaScript-библиотека для разработки пользовательского интерфейса. Чтобы составить первое впечатление о React, зайдите на главную страницу или во введение.
React изначально был спроектирован так, чтобы его можно было внедрять постепенно. Другими словами, вы можете начать с малого и использовать только ту функциональность React, которая необходима вам в данный момент. Информация в этом разделе будет полезна в любой ситуации: при первом знакомстве с React, при создании простой динамической HTML-страницы и даже при проектировании сложного React-приложения.
Если вы просто хотите немного поиграть с React, попробуйте онлайн-песочницу. Например, вот простейший шаблон на CodePen, CodeSandbox или Stackblitz.
Если вы предпочитаете работать в своём редакторе, скачайте тестовый HTML-файл, добавьте в него код и запустите на своём компьютере. При открытии тестового файла браузер преобразует JSX в обычный код на JavaScript. Такое преобразование достаточно медленно, поэтому мы рекомендуем использовать этот файл только для простых демонстрационных примеров.
Добавляем React на сайт
Вы можете добавить React на свой сайт буквально за одну минуту. После этого можно разместить на сайте несколько динамических виджетов и постепенно наращивать использование React в своём проекте.
Когда вы начинаете проект на React, то простая HTML-страница со script-тегами может быть лучшим вариантом. Её можно сделать за минуту.
Однако для разработки более развесистого приложения вам, скорее всего, придётся рассмотреть другие варианты настройки рабочего окружения, объединяющие в себе различные технологии. Вот несколько наборов JavaScript-инструментов, которые мы рекомендуем для создания приложения. Каждый из этих инструментов может работать практически без настройки и позволит раскрыть все возможности экосистемы React. Подробнее об инструментах.
Люди приходят к React с разным опытом и стилем обучения. Некоторые предпочитают учиться на ходу, а кому-то нравится сначала овладеть теорией. В любом случае мы надеемся, что этот раздел будет для вас полезен.
React сначала может показаться сложным, но приложив усилие, вы обязательно его освоите. Терпение и труд все перетрут!
На главной странице есть несколько простых примеров использования React. Их можно отредактировать и запустить прямо на нашем сайте. Даже если вы пока ничего не знаете о React, попробуйте что-нибудь поменять в коде и посмотрите на результат.
React для новичков
Если документация кажется вам сложной и усваивается не так быстро, как хотелось, прочтите блог Тани Раша (Tania Rascia). Таня написала о том, как начала работать с React и доходчиво рассказала об его основных принципах. Попробуйте почитать этот пост, а потом вернуться к документации.
React для дизайнеров
Если вы в первую очередь занимаетесь дизайном, вам могут пригодиться ресурсы, собранные на этом сайте.
Ресурсы по JavaScript
Изучение React предполагает наличие некоторых знаний о программировании на языке JavaScript. Глубоких знаний не потребуется, но учить React и JavaScript одновременно может быть тяжело.
Чтобы освежить ваши знания, мы рекомендуем просмотреть обзор языка JavaScript на сайте mozilla.org. Для этого потребуется от 30 минут до часа. Надеемся, что теперь вы будете чувствовать себя более комфортно, изучая React.
Если всё-таки у вас есть пробелы в знаниях, то сайты MDN и learn.javascript.ru будут отличными источниками информации о JavaScript. Также всегда можно задать вопрос или попросить помощи на форумах нашего сообщества.
Если вы предпочитаете изучать технологии на практике, воспользуйтесь введением. В нём описан процесс разработки игры в крестики-нолики. Даже если вы не планируете программировать игры, всё равно уделите внимание этому разделу документации. Приёмы, которые вы освоите — фундамент для разработки любых приложений на React. Введение даст вам более глубокое понимание React.
Пошаговое описание React
Если вам больше нравится познавать предмет шаг за шагом, то лучше начать с пошагового описания React. Каждая последующая глава описания опирается на знания из предыдущей, поэтому вы ничего не упустите в процессе изучения материала.
Многие вспоминают, как чтение Философии React поставило всё на свои места. Пускай это и самое древнее руководство по React, но оно всё так же актуально.
Некоторым больше нравится учиться по книгам или видеокурсам от сторонних авторов, а не по официальной документации. Для них мы разместили список рекомендуемых ресурсов. Часть этих ресурсов бесплатны.
Углублённое изучение React
После того, как вы изучите основные принципы React и немного поиграетесь с ним, можно углубиться в более продвинутые темы документации. В этих главах описаны полезные, но не так часто используемые возможности React. Например, контекст и рефы.
Этот раздел документации описывает нюансы использования React API. Например, в главе React.Component API рассказывается о работе функции setState() и различных методах управления жизненным циклом компонентов.
Глоссарий содержит перечень наиболее употребляемых терминов, которые встречаются в документации. Также есть раздел FAQ. В нём короткие вопросы и ответы на самые животрепещущие темы, такие как использование AJAX, состояние компонентов или структура проекта.
Информация о релизах
В официальном блоге мы сообщаем о новых релизах React. Все самые важные новости, включая списки изменений и не рекомендуемых к использованию функций, публикуются в первую очередь здесь.
Также вы можете подписаться на наш аккаунт @reactjs в Twitter. Однако вы не пропустите ничего важного, если будете следить только за блогом.
В блоге мы пишем не о всех релизах React, но всегда есть возможность посмотреть полный список изменений в файле CHANGELOG.md в репозитории React, а также на странице Релизы.
Документация на старые версии React
Документация на сайте всегда соответствует последнему стабильному релизу. Начиная с 16 версии React, мы публикуем старые версии документации на отдельной странице. Учтите, что копии документации создаются в момент выхода релиза и больше не обновляются.
Если вы обнаружите в документации какие-нибудь неточности, ошибки или любые другие непонятки, пожалуйста, создайте ишью в репозитории документации с указанием способа решения проблемы или просто твитните в Twitter @reactjs. Мы всегда рады слышать вас!
Начало работы
Эта страница представляет собой обзор документации по React и связанных с ней ресурсов.
React — это библиотека JavaScript для создания пользовательских интерфейсов. Узнайте, что такое React на нашей домашней странице или в учебнике.
React разработан с самого начала для постепенного внедрения, так что вы можете использовать React понемногу или столько, сколько необходимо. Хотите ли вы получить представление об React, добавить интерактивность к простой HTML-странице или начать разработку сложного приложения, работающего на React, ссылки в этом разделе помогут вам начать работу.
Если вам нравится “играться” с React, вы можете использовать онлайн-площадку для кода. Попробуйте шаблон Hello World на CodePen или CodeSandbox.
Если вы предпочитаете использовать свой собственный текстовый редактор, вы также можете загрузить этот HTML-файл, отредактируйте его и откройте его из локальной файловой системы в браузере. Он выполняет медленное преобразование кода во время выполнения, поэтому мы рекомендуем использовать его только для простых демонстраций.
Добавление React на сайт
You can add React to an HTML page in one minute. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets.
Создание нового React-приложения
При начале нового проекта React простая HTML-страница с тегами скрипта всё же может быть лучшим вариантом. Это займет всего минуту!
Однако по мере роста вашего приложения вам может потребоваться более интегрированная настройка. Существует несколько нескольких инструментов для JavaScript, которые мы рекомендуем для более крупных приложений. Каждый из них может работать практически без конфигурации и позволяет вам в полной мере использовать богатую экосистему React.
Люди приходят в React с разным опытом и с разными стилями обучения. Если вы предпочитаете более теоретический или практический подход, мы надеемся, что вы найдёте этот раздел полезным.
Как и любая незнакомая технология, у React есть кривая обучения. Немного практики и терпения — и вы научитесь.
На главной странице React содержится несколько небольших примеров React с реально работающим редактором. Даже если вы ещё ничего не знаете про React, попробуйте изменить код примеров и посмотрите, что будет в результате.
React для начинающих
Если вам кажется, что на данный момент документация React трудна для понимания, прочитайте данный обзор React от Тани Раша. В статей представлены наиболее важные концепции React в подробном и удобном для начинающих виде. После того, как вы изучите этот материал, попытайтесь попробовать прочитать документацию ещё раз!
React для дизайнеров
Если у вас опыт дизайнера, то данные ресурсы станут отличной отправной точкой для начала работы.
Документация React предполагает некоторое знакомство с программированием на языке JavaScript. Вам не обязательно нужно быть экспертом, но одновременно сложнее изучать как React, так и JavaScript.
Мы рекомендуем просмотреть на этот общий обзор JavaScript для проверки своего уровня знаний. Это займет от 30 минут до часа, но вы почувствуете себя более увереннее при изучении React.
Всякий раз, когда вы запутываетесь чем-то в JavaScript, MDN и javascript.info — отличные сайты для самопроверки. Существуют также форумы поддержки сообщества, где вы можете обратиться за помощью.
Если вы предпочитаете учиться в процессе, ознакомьтесь с нашим практическим руководством. В этом уроке мы создаем игру в крестики-нолики на React. У вас может возникнуть соблазн пропустить его, потому что вы не любитель создавать игры, но дайте ему шанс. Методы, которые вы узнаете в этом обучающем руководстве, имеют основополагающее значение для создания любых React-приложений, и овладение ими даст вам гораздо более глубокое понимание.
Если вы предпочитаете изучать концепции шаг за шагом, наше руководство по основным концепциями — лучшее место для начала. Каждая следующая глава в нём основывается на знаниях, представленных в предыдущих главах, поэтому вы ничего не пропустите, когда изучаете его по порядку.
Многие пользователи приписывают чтению Мышление в React в качестве момента при изучении React, когда у них, наконец, что-то “щёлкнуло”. Это, вероятно, старейшее пошаговое руководство, но оно по-прежнему ещё актуально.
Иногда люди находят различные книги и видеокурсы более полезными, чем официальная документация. Мы поддерживаем список рекомендуемых ресурсов, некоторые из которых являются бесплатными.
Как только вы усвоите основные концепции и немного поиграете с React, вас может быть заинтересуют более сложные темы. В этом разделе вы познакомитесь с мощными, но менее часто используемыми возможностями React, такими как context и refs.
Глоссарий и часто задаваемые вопросы (FAQ)
В глоссарии содержится обзор наиболее распространенных терминов, которые вы увидите в документации React. Существует также раздел часто задаваемых вопросов, посвященный коротким вопросам и ответам по распространённым темам, включая создание AJAX-запросов, состояние компонента и файловая структура.
Находясь в курсе событий
Блог React blog — официальный источник обновлений от команды React. Всё, что важно, включая заметки о выпуске или уведомления об устаревшних возможностях, будет опубликовано там первым.
Вы также можете следить за аккаунтом в Twitter @reactjs, но вы не пропустите ничего существенного, если только читаете блог.
Не каждый релиз React заслуживает своего собственного сообщения в блоге, поэтому вы можете найти подробный журнал изменений для каждой версии в файле CHANGELOG.md в репозитории React, а также на странице Releases.
Эта документация всегда отражает последнюю стабильную версию React. Начиная с React 16, вы можете найти более старые версии документации на отдельной странице (на английском — прим. пер.). Обратите внимание, что документация для прошлых версий фиксируется в том виде, в котором она есть во время нового релиза и больше не обновляется.
Если что-то отсутствует в документации или если вы обнаружили какую-либо запутанную часть, пожалуйста, создайте ишью в репозитории документации с вашими предложениями по улучшению, или отправьте твит в аккаунт @reactjs. Мы обожаем получать от вас обратную связь!