Как учить react js
Начало работы
На этой странице мы сделаем небольшой обзор документации и других ресурсов, которые могут пригодиться при первом использовании 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 в 2021 году: 7 навыков, которыми вам нужно овладеть
Перевод публикуется с сокращениями, автор оригинальной статьи Reed Barger.
Когда вы собираете воедино план обучения React, легко почувствовать себя подавленным из-за страха невозможности выучить все это. Чтобы добиться успеха с React (и не только), не пытайтесь браться за все сразу. Сосредоточьтесь на самом необходимом. Приступим к разбору ключевых вещей, на которых нужно сосредоточиться, чтобы начать создавать крутые приложения и стать востребованным разработчиком.
Шаг 1: Изучение основ HTML, CSS и JavaScript
Строительными блоками веба и каждой отдельной страницы являются HTML, CSS и JavaScript. Любой React-разработчик должен уметь их использовать.
Из трех технологий React больше всего связан с JavaScript, по сути данная библиотека и есть JavaScript, только с некоторыми дополнительными функциями. По этой причине вам понадобятся уверенные навыки работы с этим языком программирования.
Концепции JavaScript, которые необходимо выучить:
Многие разработчики утверждают, будто для лучшего изучения React нужно знать «ES6/ES7/ES8/ESNext». Конечно владение большим количеством разных технологий может помочь, но горы функций будут только отвлекать.
Получите уверенные знания в перечисленных вопросах, создав несколько небольших проектов. После этого идите дальше по списку.
Шаг 2: Изучение основ React и React hooks
Как только вы получили знания по JS, переходите к React и его основным концепциям.
Основы React специфичны только для него и существуют, чтобы помогать создавать приложения использованием шаблонов, которых нет в чистом JS.
Основы React, которые необходимо знать:
Функции React со временем изменились. Встает вопрос, что учить в первую очередь: старый или новый синтаксис? React обзавелся крутой функциональностью под названием React Hooks.
Хуки делают приложения проще, мощнее и позволяют писать меньше кода. Вам важно знать пять основных:
Хуков больше, чем описано выше, но остальные нужны не так часто.
Шаг 3: Извлечение данных из Rest и GraphQL API
В каждом приложении у вас скорее всего будет фронтенд, с которым взаимодействует пользователь, а также бекенд, с которым взаимодействует код React. Бекенд – это место, откуда мы получаем данные и где производим какие-либо операции, например, аутентификацию пользователей.
Существует два способа работы с данными из бекенда. Стандартный способ – REST API. Это наиболее распространенная форма, но есть и более новый вариант – GraphQL.
В своей работе вы столкнетесь с обоими типами, поэтому познакомьтесь с использованием их в React.
Шаг 4: Дизайн приложений с помощью библиотеки компонентов или библиотеки служебных классов
Каждое React-приложение нуждается в уникальном стиле. Один из вариантов – использовать простой CSS. Вы можете написать собственные стили и поместить их в отдельную таблицу.
Для облегчения стилизации можно использовать так называемую библиотеку компонентов. Она дает нам многоразовые компоненты, имеющие собственные готовые стили. Material UI н аиболее популярна для React.
Разработчики также используют библиотеки служебных классов, которые поставляются с готовыми классами для стилизации элементов.
Вы можете стилизовать приложение, применяя имена классов к каждому элементу. Это избавляет от необходимости самостоятельно писать какие-либо стили. Самая популярная библиотека служебных классов – Tailwind CSS.
Как и в предыдущем пункте, изучите оба подхода.
Шаг 5: Управление состоянием с помощью React context
Управление состоянием – это процесс принятия решения о том, где искать данные и как с ними работать в приложении. Чтобы управлять состоянием компонентов приложения, используется React Context.
Данный инструмент встроен в основную библиотеку React и позволяет передавать данные между компонентами без использования props. Это помогает решить проблему «prop-drilling», включающую передачу данных вниз к компонентам, которые глубоко вложены друг в друга.
Существует еще один вариант – Redux. Это популярная библиотека для управления состоянием в React, но гораздо более сложная, чем нужно для большинства приложений. Чтобы поднять свои навыки на качественно новый уровень, попробуйте разобраться с использованием Redux совместно с ReactHooks и ReactContext.
Шаг 6: Маршрутизатор React, react-router-dom
Любой веб-сайт имеет много страниц, которые можно просмотреть, перейдя на них в истории браузера. Чтобы создать такую же функциональность с маршрутами в React, нужно использовать маршрутизатор.
React не поставляется со встроенным маршрутизатором, поэтому придется использовать стороннюю библиотеку, которая называется react-router-dom. Она необходима для создания страниц и ссылок в приложении, перенаправления на другие страницы и обработки разных событий маршрутизации.
В react-router-dom необходимо изучить следующие возможности:
Шаг 7: Проверка подлинности в React
Аутентификация пользователей крайне важна, т. к. мы будем давать им доступ к разным частям приложения. По этой причине она идет рука об руку с маршрутизацией. Авторизованные пользователи должны иметь возможность видеть определенные страницы, которые не могут видеть не авторизованные.
Заключение
Основы 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 объект.
Что такое ссылки?
Пришло время включить музыку. Для начала добавим тег :
Изучение React. С чего начать?
Статья-совет для всех тех, кто уже изучает или только собирается начать изучение Реакт, поможет вам избежать лишних ошибок и зря потраченного времени.
С чего начать изучение Реакт.
Я хочу изучить React… но что же мне создать?
Front—end разработка это профессиональный навык. Скорее всего даже набор профессиональных навыков. JavaScript, React, HTML, CSS, использование командной строки — это все строительные инструменты, а знать нужно гораздо больше!
Как в любом другом навыке, вам потребуется практика, перед тем как вы окунётесь в процесс и создадите новый Facebook. Наилучшая практика приходит с конкретными проектами, которые вы можете начать и закончить самостоятельно.
Итак, что же включает в себя хороший обучающий проект?
С чего начать изучение React
Небольшие, крохотные проекты являются отличным способом изучения новых языков или библиотек. Не начинайте изучение React с копирования крупных проектов таких как Yelp. Гигантские самоучители научат вас только “копипастить” код, лишь иногда у вас получится применить полученные знания.
Даже составление списка задач не всегда может помочь сделать правильный выбор, если вы в первый раз собираетесь что-то создать. Всё зависит от вас самих.
В общем и целом, изучайте по одной технологии за раз и накапливайте знания. Добейтесь хороших знаний JavaScript, затем начните изучать React до тех пор, пока вы не научитесь создавать компоненты таким образом, чтобы они “общались” друг с другом. Посетите мою Инструкцию по Изучению React для детального ознакомления.
Новичок в JS?
Немного знакомы с JavaScript? Возможно вы начали с HTML и CSS, а теперь хотите изучить, то как сделать ваши проекты более “живыми”? Если вы новичок в логике и программировании, то я советую начать вам с малого – меньше, чем вы думаете. Прежде всего хорошенько разберитесь с JS, только после этого изучайте React. Изучение основ может оказаться непростым занятием, поэтому не усложняйте его.
Сайт exercism.io содержит множество отличных, небольших упражнений. Данные упражнения максимально приближены к реальным проблемам программирования, а не только к проблемам front—end приложений, таким как DOM манипуляции или работа с графикой, но они по-прежнему актуальны. Это равносильно изучению музыкальных гамм, хотя это не то же самое, что изучение реальных песен, но это даст вам прочную основу.
Опытный специалист?
Достаточно опытны в программировании? Владеете не одним языком программирования? Если вы представляете, как создать простой список задач в том языке, который вы хорошо знаете, то это может стать отличным начальным проектом на React. Если же для вас это слишком легко, то попробуйте что-нибудь более сложное, например, онлайн-магазин со списком товаров и корзиной или простое приложение “чат”.
Где-то посередине?
Уже имеете некий опыт в JS? Возможно не столь большой или в основном это опыт работы с чем-то наподобие jQuery? Я рекомендую начать с копирования кусочков приложений, которые вам уже известны или были написаны вами ранее. Обратите внимание, что я сказал кусочки. Это означает, что вы должны воспроизвести любую полезную информацию, начиная от тегов form и header, заканчивая твитами и постами в Facebook.
Эти небольшие строительные блоки полезной информации помогут вам начать, также вы можете составлять из них списки. К сожалению, большое количество веб-приложений — это просто множество списков, например, Twitter, Facebook, Reddit, Trello, Pinterest… Создание таких приложение — это весело, потому что вы получаете что-то небольшое, что сразу же работает, а затем вы с легкостью можете встроить это приложение в реальный проект и начать добавлять новые функции.
С чего начать изучение React
Не важно какой у вас уровень знаний, существуют вещи, которые лучше всего избегать.
Избегайте публикаций, содержащих огромное количество информации о разных технологиях таких как React, Redux, Routing, Express, Webpack. Огромное количество информации может сбить вас с толку (в этом нет ничего страшного).
Это как тот старый вопрос: “Как съесть слона?”
Я просто пытаюсь сказать всем тем, кто меня слушает, что не нужно одновременно пытаться изучить React и Redux. Несомненно, это хорошие библиотеки и со временем вам следует изучить их. Но серьёзно, просто начните с React. Ведь React прекрасно работает сам по себе.
Кроме того, необязательно настраивать свою сборку Webpack, чтобы создать что-то используя React. Для создания проекта используйте готовые утилиты от Facebook (Create React App), а затем погружайтесь в изучение того, как создавать различные компоненты.
А нужно ли мне это сейчас?
Всегда спрашивайте себе: “А нужно ли мне это сейчас?”. Почти всегда ответ “нет”.
Многие из разработчиков хотят знать про каждый кусочек головоломки, перед тем как решать её. Но ведь не всегда плохо решать задачи по мере их поступления, хотя это может замедлить процесс разработки. Остерегайтесь подобной тенденции, она как зыбучие пески для вашего процесса обучения.
Меня часто спрашивают…
“Как сделать AJAX запрос?” – Вы уже создали компоненты со статическими данными? Вы вообще создали хоть какие-то компоненты? Для начала создайте что-нибудь рабочее, а AJAX добавите позже.
“Мне нужен SASS/LESS!” – Вы уже создали какие-то компоненты? Простого CSS будет достаточно. Как добавить препроцессоры разберетесь позже.
“Как React работает с маршрутизацией? Аутентификацией? Моделями данных?” – Все вопросы хороши. Но могу заверить вас, что есть ответы на каждый из них. Вам бы не хотелось оказаться в тупике на 37 день разработки вашего проекта из-за того, что React или его экосистема не имеют поддержки определенных возможностей. Однако на начальном этапе вам это все не нужно. Создайте несколько компонент, смоделируйте все что связано со статическими данными.
“Я планирую создавать большой проект и мне нужны все эти возможности сейчас!” – Если вы уже реализовали какие-то небольшие проекты используя React, и решили для себя что вам нравится React, а в настоящее время нацелены на создания своего шедевра? Тогда конечно, самое время изучить все кусочки головоломки. Но если вы еще ничего не создали, тогда изучайте и накапливайте весь доступный передовой опыт прежде, чем написать “Hello world”, это просто замедлит вас.