Полное руководство, как стать веб-разработчиком в 2021 году. Часть 2

Инструменты разработчика

В это время вам также следует начать изучение того, как работать с инструментами разработчика в вашем браузере. Мы предпочитаем инструменты разработчика Chrome, потому что они отлично подходят для отладки и работы с JavaScript и DOM. Независимо от вашего выбора, мы бы предпочли создавать проекты и отлаживать любые проблемы, с которыми вы сталкиваетесь, с помощью инструментов разработчика, вместо того, чтобы часами смотреть на ваш код.

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

Некоторые важные моменты:

1. Мы рекомендуем придерживаться инструментов разработчика Chrome, потому что они очень мощные.
2. Узнайте о манипуляциях с DOM, отладке сетевых запросов, установке точек останова для событий, переходе по источникам, поиске кода в ресурсах вашего веб-сайта, регулировании скорости сети и многом другом.
3. Это будет постоянное обучение, как и все другие технологии. Вы не должны стремиться изучать инструменты разработчика сразу, просто изучите небольшие, но важные вещи и двигайтесь дальше. Вы узнаете намного больше, работая с проектами и т. д.

Git

Вам нужно изучить систему управления версиями (VCS), и это должно быть git. Git – это широко используемая VCS, используемая командами и компаниями для управления своими кодовыми базами среди сотрудников. Git может быть очень сложным для изучения, но изначально ваш пример использования git будет заключаться в развертывании вашего кода на GitHub или аналогичном сайте.

Это необходимо, потому что, когда вы изучаете git, вы можете нажать на github. Когда вы можете нажать на github, вы можете интегрироваться со многими сервисами, такими как страницы GitHub, Vercel, Netlify и т. д., Чтобы создать предварительный просмотр вашего веб-сайта/проекта в реальном времени. Этим предварительным просмотром в реальном времени можно поделиться с друзьями, семьей и даже добавить в свое резюме.

Когда вы устроитесь на работу или будете работать с командой из 2+ разработчиков, вам все равно понадобятся знания git. Но даже для индивидуального разработчика это имеет первостепенное значение, так как значительно упрощает цикл развертывания на действующем веб-сайте.

Некоторые важные моменты:

1. Git может очень быстро стать сложным. Не запутайтесь с большим количеством команд git. Как индивидуальный разработчик, вам вряд ли понадобится что-либо, кроме 5-7 часто используемых команд.
2. Хотя пункт 1 верен, вы все равно должны понимать общую архитектуру того, как работает git, какие есть ветки, что подразумевается под удаленными репозиториями и т. д. Это снова прочная основа понимания, которую вы должны иметь.

NPM/Yarn

NPM и Yarn – два самых популярных менеджера пакетов для JavaScript. Оба они существуют для одной цели – управления зависимостями в вашей кодовой базе. Зависимость – это пакет/программное обеспечение, которое обычно не разрабатывается вами/вашей командой, но вы все равно можете использовать и интегрировать его в свое приложение. Например, система дизайна, такая как бутстрап или попутный CSS, является зависимостью.

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

Некоторые важные моменты:

1. NPM и пряжа – очень близкие понятия. Когда вы узнаете о npm, вы также узнаете о package.json, о том, зачем они нужны, и многом другом. Все это также можно перенести на yarn v1 в качестве менеджера пакетов.
2. Поэтому не стоит особо задумываться о том, какой менеджер пакетов вам следует изучить. Изучите любой (например, Yarn), и вы можете автоматически переключиться на другой, если этого требует ваш проект.

React

React – библиотека, пользующаяся огромной поддержкой сообщества. Любая проблема/ошибка, с которой вы столкнулись с React – скорее всего, кто-то уже сделал эту ошибку и задал вопрос на 1000 веб-сайтах. Поэтому, если вы хороший гуглер, у вас не должно возникнуть проблем при работе с React.

Некоторые важные моменты:

1. На первый взгляд React выглядит просто, но для масштабной работы требуется разработка ментальной модели. Речь идет не только о концепциях и хуках, но и о том, как спроектировать ваше приложение, сделать его поддерживаемым, выбрать правильные библиотеки для экосистемы и т. д.
2. React не применяет никаких стандартных практик для общих задач, таких как сетевые запросы или пользовательский интерфейс. Но мы рекомендуем следующие варианты – react-query для сетевых запросов, попутный CSS или материальный UI для библиотеки UI.
3. Не изучайте подробно компоненты на основе классов, если вам не нужно работать с устаревшей кодовой базой, которая требует от вас глубокого изучения. Компоненты на основе классов – это не будущее React. Убегайте от руководств, которые учат вас компонентам на основе классов. Вместо этого узнайте о функциональных компонентах и ​​хуках.

Сборщики модулей

Webpack – один из самых популярных сборщиков модулей, который React использует прямо сейчас из коробки. Опять же, вам не обязательно глубоко изучать webpack, но вы должны знать, что это за файл webpack.config.js.

ESBuild также является еще одним относительно очень быстрым сборщиком модулей на данный момент, но поддержка плагинов для него пока невелика. Как новичку, вам пока не нужно беспокоиться о ESBuild.

Тестирование кода

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

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

Упражняться! Упражняться! Упражняться!

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

Как научиться фронтенд-разработке?

Приведенный выше список не является исчерпывающим списком тем, но определенно является хорошим руководством для начала. Теперь вопрос в том, как научиться веб-разработке через интерфейс?

Вам нужен бесплатный подход к обучению

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

1. Часто используйте Google для обучения и выяснения сомнений.
2. Смотрите видео на YouTube, но убедитесь, что они относительно новые, особенно по таким темам, как JavaScript и React.
3. Практикуйтесь самостоятельно, создавайте проекты и развертывайте их в Интернете, чтобы люди могли их увидеть.
4. Пройдите бесплатные курсы.

Вывод

На самом деле время – деньги, иногда даже более важные, чем деньги. Что вы хотите потратить (или можете потратить), зависит от вас. Но мы бы порекомендовали, даже если это не кодирование, потратить деньги на свое образование, чтобы получить ускорение и ясность в том, чего вы пытаетесь достичь, определенно того стоит.

Начало:

• Полное руководство, как стать веб-разработчиком в 2021 году. Часть 1

(1 оценок, среднее: 5,00 из 5)

Загрузка...