Как я стал полноценным веб-разработчиком
#MERN #MongoDB #Express.js #React #Node.js
Хотя мне не пришлось начинать с нуля, у меня было немало ухабов на этом пути. Вот почему я чувствовал себя обязанным поделиться тем, как я нашел способ стать полноценным веб-разработчиком.
Я имею научно-техническое образование, поэтому кодирование на языках высокого уровня (Python/MATLAB) было для меня довольно родным, особенно для анализа данных и разработки алгоритмов. Я также окунул свои руки в электронику/IoT, поэтому хорошо разбирался в языках более низкого уровня, таких как C/C++.
Если вы не знакомы с концепцией языков более высокого / более низкого уровня, я бы отослал вас к начальной части обучающего видео на YouTube, ссылка на которое приведена ниже. Хотя это учебник по Node.js, он очень четко объясняет архитектуру языков программирования в первые несколько минут.
Хотя может показаться, что для того, чтобы стать веб-разработчиком с полным стеком, нужно просто изучить кучу разных языков программирования, очень полезно сначала понять общую картину того, как все стеки связаны друг с другом. Это укрепляет основу и всегда сохраняет ясность картины для нас.
Первый этап становления веб-разработчиком включает в себя изучение основ HTML и CSS. Несмотря на то, что это очень важный первый шаг, настоящие веб-разработчики больше никогда не используют обычный HTML. Они пишут код, который генерирует для них HTML (подробнее об этом позже). Это может показаться шагом, который вы хотите пропустить, чтобы перемотать вперед вещи, но я уверяю вас, что без этого невозможно двигаться вперед. Поскольку он такой простой и широко используемый, существуют миллионы бесплатных курсов на выбор. Лично я нашел первую ссылку, когда вы гуглите HTML tutorial, которая от w3schools, более чем достаточна.
Затем вы переходите к немного сложной части изучения javascript. Именно здесь большинство людей, которые не являются прирожденными программистами, могут сдаться. Однако, как и в большинстве других вещей в жизни, для выполнения которых требуются навыки и талант, чтобы добиться успеха в чем-то, нужна практика. Опять же, есть много бесплатных ресурсов, которые помогут вам изучить JavaScript, и w3school тоже достаточно хорош для этого.
Практика не означает, что вы должны писать один и тот же код javascript или делать одни и те же заметки из руководств несколько раз (для запоминания). Вместо этого вы должны практиковаться в создании проектов javascript (с помощью HTML/CSS). Поначалу вы можете очень часто застревать, но после 2–3 неудачных попыток вы, скорее всего, сами удивитесь. Завершение этого шага очень приятно, так как поможет вам увидеть, как все волшебство (анимация, стили…) происходит на веб-сайтах.
Этого должно быть достаточно, чтобы стать разработчиком интерфейса-любителя. Если вдруг на данный момент вы почувствуете, что внешний интерфейс — это ваше естественное призвание, и вы хотите стать действительно хорошим в этом, я бы все же посоветовал вам хотя бы понять основы внутренней веб-разработки, чтобы все было ясно и понятно. перспектива.
Чтобы начать работу с внутренней частью, вы должны сначала понять основные концепции баз данных и серверов. Изучение SQL — хорошее начало. Он отличается от других языков, во-первых, тем, что вы не очень легко видите, что происходит в бэкэнде. Иногда сложно представить, что происходит. Но понять основы довольно просто. И в кратчайшие сроки вы должны начать писать сложные запросы.
Я прошел онлайн-курс по написанию SQL-запросов на сайте coursera.org. Несмотря на то, что это платный курс, он позволяет вам получить доступ ко всем материалам курса бесплатно и требует оплаты только в том случае, если вы хотите получить сертификат в конце. Чтобы попрактиковаться в своих навыках, необходимо создать базу данных и поэкспериментировать с ней. Поскольку сбор большого количества данных и создание таблиц может быть довольно утомительным, я нашел замечательный веб-сайт, который вам обязательно стоит посетить, если вы ищете огромное количество бесплатных данных, которые постоянно обновляются и предоставляются в легко понятных форматах. Она называется Наш мир в данных.
Именно в этот момент в моем путешествии я немного запутался и почувствовал себя потерянным. Я создал несколько проектов, которые помогли мне отточить свои навыки работы с интерфейсом, разрабатывая и создавая веб-сайты. Я также был знаком с основными концепциями систем баз данных. Но я понятия не имел, как база данных связана с интерфейсом. Я начал читать о серверах и полнофункциональных приложениях. Это дало мне больше ясности в том, чего я действительно хотел достичь и куда я хотел идти. Но я плохо представлял себе, как туда добраться. После долгих исследований я решил использовать стек MERN для веб-разработки.
Первый шаг к тому, чтобы стать разработчиком стека MERN, — это изучить React. Так как я узнал большую часть своих основ HTML/CSS на w3schools, я попытался изучить основы React оттуда. У них есть отличная функция Попробуйте сами, которая помогает практиковать HTML/CSS и JavaScript на ходу. Однако для реакции эта функция недоступна, и вам нужно создать собственное приложение для реакции, чтобы тестировать и практиковать концепции, которые вы изучаете. Это может превратиться в хлопот, и это не поможет вам понять основы.
Поэтому, как только я освоил основы, я подумал, что должен попытаться создать несколько веб-приложений React. Поэтому я погуглил десятку лучших проектов DIY React, над которыми нужно поработать. Я нашел этот удивительный, но ужасный список проектов, на которые я решил потратить месяц, чтобы попытаться завершить их. 10-реактивных-проектов, которые должен попробовать каждый новичок. Все они поставляются с учебным пособием на YouTube и репозиториями начатого/завершенного кода на github для сборки. Однако некоторые пакеты, которые они используют, устарели, и на данном этапе очень сложно разобраться во всем самостоятельно. Я обнаружил, что провожу часы, просматривая комментарии на YouTube и блоги, пытаясь решить проблемы. Но в конце концов я прошел через большинство из них.
Если вы решите заняться проектами «сделай сам», на этом этапе позвольте мне дать вам несколько важных предостережений, прежде чем вы начнете с ними. Первый проект — создание фотогалереи с помощью React и Firebase. Это отличный стартовый проект, потому что он соединяет интерфейсный интерфейс, который вы создаете на React, с серверной базой данных на Firebase. Это было именно то, что я пытался понять, прежде чем начал изучать React.
Проблема в том, что на полпути вы понимаете, что API Firbase, который он использует, был обновлен Google, поэтому вам нужно просмотреть документацию, чтобы понять, как вещи (API) работают в обновленной версии. Хотя весь процесс вначале был довольно разочаровывающим, он очень помог мне научиться использовать Firebase и API базы данных в целом. Это также дает вам невероятный прилив уверенности, если вы во всем разберетесь сами.
Если вы проходите этот проект и застряли, как я, и после просмотра документов вы все еще не можете в нем разобраться, возможно, вам поможет сравнение вашего кода с моим завершенным кодом (из github) для этого проекта.
После завершения моего первого проекта я понял, что многие концепции, использованные в нем, были для меня новыми. Поэтому я изучил его (NetNinja/Shaun) канал на YouTube, и у него есть несколько замечательных руководств по React для начинающих и по таким концепциям, как React Context и хуки. Я нашел их чрезвычайно полезными, и в конце концов Youtube сделал свое дело, и мне пришлось уйти в кроличью нору…
Следующие 2 проекта предназначены для создания трекера расходов и игры с палачом, которые отлично подходят, если вы хотите использовать концепции React Hooks and Context, которые вы изучили ранее. После уроков на YouTube я обнаружил, что с этими проектами довольно легко справиться, и я мог делать один или два проекта каждый день. Честно говоря, все, что я делал, это точно следил за тем, как они создавали приложение на YouTube. Иногда мне казалось, что я на самом деле не применяю свои собственные навыки или знания, делая это, но в конце концов вы понимаете, что проходите через «Притворяйтесь, пока не обработаете».
Удивительно, но я даже обновил некоторые вещи в проектах выше, чтобы сделать их еще лучше. Это важно, так как дает вам возможность изучить ряд новых пакетов, доступных в npm (Node Package Manager). Изучение npm — это фундаментальный и важный шаг, который вы должны знать, если хотите хорошо разбираться в React. Я бы даже посоветовал немного почитать о (недавней) истории возникновения React, поскольку она кажется довольно интересной.
Возвращаясь к проекту палача, упомянутому выше, вы найдете только 5 или около того слов, которые вы можете выбрать случайным образом для игры. Поэтому я задался вопросом, существует ли библиотека слов (например, словарь), из которой вы можете выбирать случайным образом. И вуаля! Я нашел именно то, что искал на npm. Это пакет под названием случайные слова, и вы используете его для генерации нового слова каждый раз, когда начинаете новую игру. Вы можете проверить мой готовый код для этого проекта с пакетом random-words здесь.
В то время я решил пропустить следующие несколько проектов либо потому, что они были не слишком интересны или похожи на те, что были раньше, либо просто были слишком длинными. Однако я попробовал последний в списке, который показался довольно интересным. Он назывался «Как улучшить Spotify с помощью React». Тем не менее, я должен предостеречь вас от этого. Помимо плохого и быстрого объяснения (личное мнение), в нем также нигде не упоминается, что вам нужна учетная запись Spotify permium для выполнения проекта. Вы должны понять это самостоятельно после 30 минут бессмысленного последовательного кодирования.
Освоив R (React) стека MERN, следующим шагом будет добавление E и N из стека MERN в ваш набор навыков. Изучение узла и экспресса помогает понять, как настроен сервер и как к нему обращаться через внешний интерфейс. Это действительно позволяет увидеть всю архитектуру веб-приложения в перспективе.
Чтобы продолжить, я вернулся на канал NetNinja, чтобы начать изучать Node.js и Express.js. Я понял, каким измученным наставником он был, и у него есть отличная серия учебных пособий. (который вы могли видеть ранее, если узнали об архитектуре языка программирования из этого поста).
Изучая похожие видео (которые YouTube предлагает в зависимости от того, что вы смотрите), я также наткнулся на еще одного отличного онлайн-репетитора по имени Дэйв Грей. Он очень похож на NetNinja и также имеет несколько отличных серий по React. Я следовал его руководствам по Node и Express. Тот, который указан ниже, довольно длинный, и мне потребовалась неделя, чтобы пройти его (даже после пропуска нескольких частей, с которыми я был знаком). Но объяснения довольно просты. Кроме того, он также охватывает MongoDB и mongoose, что дает вам представление о M стека MERN.
Если 7-часовой учебник слишком длинный для вас, вы также можете обратиться к другим его сериям руководств, где он объясняет вещи по частям и почти похож (если не точно такой же) на более длинное видео.
Некоторые из концепций, которые очень четко объясняются здесь, включают аутентификацию и авторизацию, создание ретрансляторов узлов, использование JWT, создание и вызов API и многое другое. После изучения руководств первый проект, который вы хотите получить в свои руки, основан на создании внешнего пользовательского интерфейса React с функциями аутентификации (регистрация, вход в систему, выход из системы) с использованием сервера узла в фоновой части. У Дейва есть отличная серия руководств по этому вопросу, которая поможет вам сразу применить на практике ваш новый набор навыков. (Примечание: здесь было бы полезно, если бы вы изучили более длинную версию руководства Дейва по Node.js, поскольку он использует ее в качестве серверной части в этом проекте.)
Последним шагом является выполнение некоторых проектов или просмотр учебных пособий по MongoDB, если концепции все еще не очень ясны. Возможно, это так, поскольку MongoDB несколько отличается от более традиционных баз данных на основе SQL. В этот момент вы, вероятно, почувствуете, что приближаетесь к концу своего пути к тому, чтобы стать полноценным разработчиком MERN.
Теперь вам следует приступить к созданию собственных проектов MERN (используя онлайн-руководства или собственные идеи). Поначалу будет казаться, что вы довольно часто теряетесь в концепциях и вам приходится возвращаться к основам, чтобы правильно понять реализацию. Но со все большим и большим опытом вы постепенно становитесь лучше и открываете для себя много нового.
Через несколько недель вы сможете повторно использовать компоненты из одного проекта в другом и создать целое портфолио проектов для постоянной работы (и улучшения). В конце концов вы надеетесь обнаружить, что некоторые из них превращаются в настоящие продукты, которые другие люди находят полезными в своей жизни. Помня об этом духе, все, что нам нужно делать, это мечтать о большем и идти вперед. Удачи в вашем собственном путешествии и счастливого кодирования!
