Я написал эту статью, чтобы перечислить ресурсы, которые помогли мне в изучении React (вместе с официальной документацией).
Я фронтенд-инженер, активно работающий в экосистеме React в течение последних четырех лет, и приобрел опыт работы с React и интерфейсом, следуя официальной документации, учась у экспертов сообщества и узнавая о последних изменениях в экосистеме, читая статьи и твиттер.
Это небольшое усилие, чтобы помочь сообществу, направив их к отличным ресурсам экспертами сообщества, согласно моему собственному опыту.
Отказ от ответственности. Всегда рекомендуется выбирать официальную документацию по инструментам и библиотекам в качестве предпочтительных сайтов. Когда вы чувствуете, что вам нужно дополнительное руководство для понимания концепций, тогда вы определенно можете просматривать Интернет, но делайте это осторожно, потому что в Интернете есть множество вводящих в заблуждение и устаревших ресурсов по каждой теме.
Руководство для начинающих по React (1)
Это 2,5-часовой бесплатный курс от Кента С. Доддса на сайте egghead.io.
Это было мое первое руководство, с которого я начал свое путешествие с React, оно в сжатой форме ведет вас от самых минимальных основ к очень важным частям изучения React. Я повторил несколько уроков, чтобы понять концепции. Этот курс теперь обновлен важными крючками.
Совет — записывайте сложные части в блокнот, чтобы вы могли повторить их при необходимости.
React — это картошка (2)
Поток данных в React часто сложен для восприятия новичками в React. Я не исключение, мне тоже потребовалось некоторое время, чтобы понять концепции.
Когда я присутствовал на этом выступлении в womenofreact.com, я был поражен, как Мэгги красиво объяснила поток данных в React как росток картофеля с помощью метафор (визуалов).
Вот слайды и видео разговор на YouTube, если хотите обзор или минимальную версию, используйте слайды.
Вот некоторые другие рекомендуемые метафоры, которые помогли мне визуализировать концепции React от @Mappletons.
- Что такое вилка React Virtual DOM (3)
- JSX — это Lovechild (4)
Управление состоянием в React
Многие люди спрашивают меня, что является лучшим инструментом или практикой управления состоянием, и первый ответ, который я даю, заключается в том, что React сам имеет собственное управление состоянием, которого достаточно для большинства простых случаев.
Все инструменты или методы управления состоянием имеют свои варианты использования и компромиссы, и вы должны их знать. Я покрываю ресурсы для некоторых из них.
Библиотеки управления состоянием React и как их выбрать (5)
Если вы хотите узнать больше, я нашел эту статью достаточным руководством по управлению состоянием от Дэйва Седдиа.
Контекстный API
Context API известен как альтернатива пропеллерному сверлению, но могут быть некоторые проблемы с производительностью, если вы не будете осторожны с тем, как вы его используете.
Проще говоря, если вам нужно управлять каким-либо глобальным состоянием, таким как темы, аутентифицированный пользователь или объекты интернационализации, контекст считается наиболее подходящим.
Это не очень хорошая практика для сплошного сверления пропеллеров по всему приложению. Согласно документации,
Контекст в основном используется, когда некоторые данные должны быть доступны для многих компонентов на разных уровнях вложенности. Применяйте его с осторожностью, потому что это затрудняет повторное использование компонентов.
Если вы хотите избежать прохождения некоторых реквизитов через множество уровней, компонентная композиция часто является более простым решением, чем контекст.
Учебное пособие по React useContext Hook (6)
Я бы посоветовал изучить оба способа использования контекста из этой статьи, которую снова написал Дэйв Седдиа.
Редукс
Есть много мнений о том, следует ли нам использовать редукс или нет, когда его использовать, а когда его следует избегать. Многие средние и крупные организации используют его независимо от того, планируете ли вы использовать его в будущем или нет. Как разработчик, вы должны знать основы и способы обслуживания. Продолжая эту статью по существу, я бы не стал углубляться в нее, я перечислил ресурсы для изучения редукса.
Курс «Основы Redux» от Дэна Абрамова (7)
Это краткий двухчасовой бесплатный курс для изучения основ Redux от создателя Redux Дэна Абрамова.
Чрезмерно отреагировал (8)
Он очень хорошо известен в сообществе React, так как входит в команду основной команды ReactJS, я определенно рекомендую следить за ним в Твиттереи читать его статьи на его веб-сайте. сильный>
Совет: Так как их много, я хотел бы дать проверенный совет. Читать статьи легко, но нужно время, чтобы их полностью усвоить. Что касается статей, которые вы хотите прочитать, сделайте в своем календаре событие на неделю, когда вы можете выделить 20–30 минут на статью, и запишите сложные концепции на бумаге.
JavaScript
React — это библиотека, построенная на функциональных концепциях JavaScript. На мой взгляд, не имея основ JavaScript и не изучив его продвинутые темы, разработчик не может быть экспертом в React.
На Youtube есть множество видеоуроков по изучению JavaScript. Вы можете подписаться на MDN (9) или Web Fundamentals (10) от Google.
Основные понятия, которые необходимо изучить, — это примитивные типы, приведение типов, области видимости, замыкания, прототипы, промисы, асинхронное программирование, цикл обработки событий, чистые функции, функции высшего порядка, каррирование и веб-API.
JavaScript: расширенные концепции (11)
Это платный курс, который я купил по продвинутым темам у Andrei Neagoie на Udemy, и он, безусловно, самый лучший, если вы хотите потратиться на свое обучение и не хотите заниматься серфингом. разные источники для разных понятий.
Только JavaScript (12)
Я также купил Дэна Абрамова курс, который очень доступен по цене, и объяснял концепции JavaScript с помощью ментальных моделей и простых слов.
На этом заканчиваются 12 отличных ресурсов, которые я курировал для своих подписчиков и товарищей по сообществу. В следующей статье я поделюсь некоторыми дополнительными ресурсами React.
Я являюсь экспертом Google Developer в Интернете и с удовольствием пишу полезные ресурсы для сообщества. Дайте мне знать, насколько вы считаете эти ресурсы актуальными, и прокомментируйте, если вы хотите получить ресурсы или руководство по какой-либо конкретной теме в React, JavaScript или Web (интерфейс).
