Чтобы стать уверенным разработчиком React, нужно много работать. Но незнание того, с чего начать изучение, может значительно усложнить задачу.

Сегодня разберем 10 шагов, которые помогут сделать путь к становлению разработчиком React проще и веселее. И все это при достижении стабильных результатов, меняющих карьеру.

Шаг 1. Программируйте хотя бы 4-5 часов в день

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

Вам необходимо придерживаться регулярного графика программирования в течение недели. Без этого будет практически невозможно достичь своих целей в кодировании вовремя. На самом деле большинство людей никогда не преуспеют в React, потому что они не могут уделять достаточно времени и сосредоточиться на кодировании.

Если вы планируете программировать каждый день с девяти до пяти, когда вы на работе, вам нужно иметь похожий график для себя во время обучения. В идеале вы должны тратить от четырех до пяти часов на целенаправленное программирование каждый будний день.

Почему ровно четыре-пять часов? Расскажем об этом в шаге 3.

Шаг 2. Тратьте свое время на целенаправленное кодирование

Что мы имеем в виду под целенаправленным кодированием? Сфокусированное кодирование - это кодирование без отвлечения внимания. В отдельном тихом месте, где вы можете сидеть за компьютером и полностью сосредоточиться на процессе кодирования.

В это время большая часть того, что вы делаете, не будет на 100% кодирование. По мере написания кода вы будете читать документацию, читать статьи, делать заметки и так далее.

Если вы сосредоточены на своей работе, вам должно хватить четырех-пяти часов. Идея кодирования 12 часов в день нереалистична, особенно если вы только начинаете. Если вы можете проводить больше времени и чувствуете сосредоточенность, продолжайте. Но очень сложно кодировать и потреблять новую информацию, когда вы уже устали.

Шаг 3. Используйте технику Pomodoro для оптимального управления временем.

Есть специальная техника, которая поможет вам максимально использовать эти четыре-пять часов. Это называется техника Помидора . Это подход, созданный для оптимальной продуктивности, который заключается в работе по 25 минут за раз.

Вы запускаете свой таймер и после каждого периода или помидора делаете пятиминутный перерыв. Во время перерыва встаньте со стула.  Попейте чая или кофе. Отведите фокус от компьютера или телефона. Короче говоря, сделайте настоящий психологический и физический перерыв в том, что вы делаете.

Целенаправленный перерыв и отдых для мозга и тела помогут вам максимально эффективно использовать свое время. Вместо того, чтобы работать часами напролет. И после каждого четвертого 25-минутного периода или помидора вы делаете более длительный 15-минутный перерыв.

Если вы сделаете 8-10 помидоров солидной работы, у вас будет гарантированно очень продуктивный день. Это лучший метод для обеспечения стабильных результатов изо дня в день. Последовательные результаты - это единственное, что будет иметь значение между изучением React за несколько месяцев или за год или больше.

Есть много бесплатных таймеров pomodoro, которые вы можете найти в Интернете. 

Некоторые из них:

Be Focused  - таймер Pomodoro для Mac

Online Pomodoro Timer  - Pomofocus

Шаг 4. Прочтите ReactJS.org от начала до конца.

Мы поговорили о том, как работать и сколько времени тратить на учебу, но как вы подойдете к обучению навыкам, необходимым для разработки React?

Многие разработчики рекомендуют сразу же погрузиться в ту информацию, которую вы найдете - будь то просмотр различных веб-сайтов, статей, видео на YouTube и электронных книг. На самом деле, есть один лучший ресурс, с которого рекомендуем изучать React. И это reactjs.org .

Просмотрите документацию от начала до конца. Это лучшее руководство, которое вы найдете в Интернете, и на него полагается каждый работающий разработчик React. Он гарантированно будет актуальным, познакомит вас с необходимыми концепциями и, что самое главное, даст вам множество примеров для работы. Читая сайт, возьмите предоставленные ими примеры кода и запустите их самостоятельно.

Как запустить найденный код React? Вместо того, чтобы пытаться создать приложение React на вашем собственном компьютере, создайте приложение React в браузере. Чтобы создать новое приложение за две секунды, перейдите на react.new. Он создаст в вашем браузере новое приложение React, с которым вы сможете начать работать. Затем начните экспериментировать с примерами из документации React.js. Самостоятельно введите код из руководств, запустите его и посмотрите, что работает, а что нет.

Вместо того, чтобы читать книгу и узнавать, что делает код, запустите код самостоятельно. Посмотрите, что происходит, когда вы пробуете разные вещи. Проверить границы React и его возможности - лучшее, что можно понять, чтобы понять, как он работает.

Шаг 5. Начните с малого. Создавайте небольшие приложения и учитесь добавлять функции на ходу

Изучив документацию на сайте reactjs.org, начинайте создавать маленькие приложения. Попробуйте создать задачу с нуля. Создайте законченное приложение, состоящее из простых, четко разделяемых частей.

При создании проекта вы столкнетесь с вопросами, которые разработчики React задают себе при планировании своего приложения:

1. Как мне сделать это приложение? Нужны ли мне какие-то дополнительные пакеты помимо React?
2. Какие основные функции мне нужно развить?
3. Какие компоненты мне понадобятся и как они организованы?
4. Где будут храниться данные моего приложения?

Зарегистрируйте учетную запись Github, если у вас ее еще нет. Не только для сохранения ваших проектов React в вашем Github для легкого доступа, но и для поиска того, как другие люди сами создавали подобные приложения.

Когда у вас есть небольшой проект, вы можете добавить больше функций. Если вы делаете приложение todo, вы можете спросить:

1. Как я могу искать в задачах?
2. Как я могу сохранять свои задачи между визитами?
3. Как мне добавить аутентификацию в мое приложение todo (чтобы сделать это только для аутентифицированных пользователей)?
4. Как мне добавить в приложение разные страницы?
5. Как мне стилизовать его с помощью библиотеки компонентов, такой как Material UI?

Добавляйте новые функции на основе того, что вы хотите узнать. Возможности безграничны, и они будут способствовать дальнейшему обучению.

Шаг 6. Очень важно задавать вопросы. Всегда задавайте вопросы.

Имейте в виду, что поиск в Интернете - это нормально, когда у вас есть вопрос или когда вы застряли в коде. Это то, что делают все разработчики React, выполняя поиск на таких сайтах, как StackOverflow или Github. Очень важно задавать собственные вопросы.

Обязательно отслеживайте вопросы, которые вы задаете. Каждый раз, когда возникает проблема с проектом React, которую нужно решить, записывайте ее и ищите ответ. Когда находите решение, я обязательно записываю ответ и отмечаю его в своем браузере для дальнейшего использования.

Очень важно записывать свои вопросы и ответы на них. Если у вас однажды возникнет проблема, я могу почти гарантировать, что вы столкнетесь с той же проблемой когда-нибудь в будущем. Запись ваших вопросов и ответов не только послужит отличным ресурсом, но также сэкономит вам много времени и нервы.

Шаг 7. Активное программирование - ваш ключ к успеху

Этот подход, о котором мы говорили, сильно отличается от чтения книги или статьи.

Чтение или потребление информации само по себе называется пассивным обучением и происходит гораздо медленнее. Активное программирование - это активное обучение .

Активное обучение - это то, что побуждает вас больше писать код, задавать вопросы, чаще терпеть неудачи в краткосрочной перспективе, но добиваться успеха и быстрее расти в долгосрочной перспективе.

Шаг 8. Создавайте приложения, похожие на те, которые вы используете ежедневно (и хорошо знаете).

После создания приложения для задач спросите себя, могу ли я сделать небольшую версию Twitter? Могу ли я создать небольшую версию Facebook или другой социальной сети? Могу ли я создать маленькую версию Instagram?

Попробуйте создать что-нибудь еще, что вы используете и с чем знакомы. Вы увидите, что со временем все эти приложения будут иметь схожие функции. Возможность видеть общие черты между приложениями и самостоятельно их разрабатывать - вот что превратит вас из среднего в отличного разработчика.

Шаг 9. Разместите свои лучшие работы и поместите их в свое резюме.

И, наконец, после создания все больших и больших приложений обязательно включите все эти проекты в свое резюме. Для этого вам нужно сначала развернуть их в Интернете.

Развертывать приложения React очень просто. Вам нужно только научиться пользоваться базовыми услугами хостинга.

Включите ссылки на каждый проект в свое резюме, а также описание приложения и технологий, которые вы использовали для его создания. Это сразу покажет ценность, которую вы можете принести потенциальным работодателям.

Если вы хотите стать независимым разработчиком приложений, попробуйте превратить один из этих проектов в реальный бизнес. Вы будете удивлены, сколько людей на это способны. Они изучают React, начинают создавать проекты и превращают один из них в приложение или услугу, которые продают с прибылью.

Шаг 10. Наслаждайтесь!

Изучение React может быть очень неприятным. Даже если вы станете профессиональным разработчиком, временами это все равно будет очень неприятно.

Когда вы станете опытным разработчиком React, вы столкнетесь с проблемами.

Наш последний совет - принимайте участие в увлекательных проектах React, которые вы хотите создать или в которых вы хотите участвовать. Вам не только будет легче учиться, но вы так же узнаете, что вам больше всего нравится в работе разработчика React. Все это придаст вам уверенности и поможет добиться того, чего вы хотите добиться в своей карьере.