Статья-совет для всех тех, кто уже изучает или только собирается начать изучение Реакт, поможет вам избежать лишних ошибок и зря потраченного времени.

С чего начать изучение Реакт.

Я хочу изучить 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”, это просто замедлит вас.

Вопрос “А нужно ли мне это сейчас?”, следует задавать себе на протяжении всего проекта. Данный вопрос близок к принципу проектирования YAGNI (You ain't gonna need it - Вам это не понадобится).

Вас также может заинтересовать моя книга, с ней вы изучите React за раз - по кусочку.

Рекомендуемые материалы:

Введение в React
Основы React
Учебник для начинающих
Небольшой туториал по React.js
Практические задания
Руководство для тех, кто уже достаточно знаком с jQuery
Видео уроки по React.js
Подборки статей для изучения React.js
Руководство по написанию собственного аналога Yelp
Руководство по созданию основной страницы Hacker News
React.js на примере типовых решений

Ссылка на оригинальную статью
Перевод: Александр Давыдов