Освоение основ

Я попытался задокументировать все ссылки для каждой концепции, о которой здесь говорится. Многие из используемых примеров взяты из самой документации по javascript. Тем не менее, проекты будут уникальными и адаптированы к вашим личным интересам. Цель здесь состоит в том, чтобы быстро дать вам задокументированные примеры, разобрать и объяснить на примерах из реального мира и заставить вас практиковать это как можно скорее.

Реалистичные ожидания —

Как и все остальное, это потребует времени и самоотверженности, чтобы научиться и освоить. Теперь, прежде чем вы сдадитесь, я хотел бы заверить вас, что овладение основными понятиями в течение 30–90 дней вполне возможно. Тем не менее, до того, как вы будете приняты на работу в агентство или уверенно пойдете за более высокооплачиваемыми контрактами, сочетание выполнения небольших проектов и уделения времени еженедельной практике со временем приведет к желаемому работодателем уровню навыков.

Итак, сколько вы должны посвящать еженедельно овладению этим новым навыком? Если вы полный новичок в STEM, то это может быть немного сложнее, но все же возможно.

Приведу два основных сценария и ожидания:

Первый вариант –

Более 20 часов в неделю каждую неделю

30 дней, чтобы освоить основные концепции и 1 год, чтобы стать профессионалом

Вариант второй —

Менее 20 часов в неделю каждую неделю

60–90 дней, чтобы освоить основные концепции и 1–3 года, чтобы стать профессионалом

ВОА ВОА ВОА…. Я думал, вы сказали максимум 90 дней, чтобы овладеть основными понятиями? Ну да. Основные концепции — это основы, получение навыков, желаемых работодателями, требует немного больше усилий и самоотверженности. Вместо того, чтобы думать, что 1 или даже 3 года — это долго, рассмотрите альтернативную перспективу. ПОЛНОСТЬЮ СМЕНИТЬ НОВУЮ ПРОФЕССИЮ ВАМ НУЖНО ВСЕГО 1–3 ГОДА.

Разработка программного обеспечения — это быстрорастущая карьера с высоким спросом (я имею в виду ВЫСОКИЙ СПРОС). Средняя зарплата младших инженеров/разработчиков составляет от 50 000 до 80 000 долларов, а более продвинутые инженеры/разработчики превышают порог в 100 000 долларов [1].

Предварительные требования

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

Методология

Поучительная методология, которую я решил внедрить, во многом отражает то, как я изучаю новые концепции. Я делаю общие мазки по предмету и провожу анализ 80/20 концепций, ведущих к профессиональному мастерству. Обычно для более чем 80-процентного понимания нового предмета требуется небольшое количество понятий. Это означает учиться больше, узнавая меньше [2][3]. Как инженер-компьютерщик и разработчик программного обеспечения вы быстро переосмыслите свой мир, чтобы приспособиться к своей новой ментальной структуре. Вы будете более критично подходить к проблемам и искать наиболее эффективное и действенное решение ваших проблем.

Итак, я сосредоточился на подборе контента, который лучше всего отражает подход 80/20. Я кратко упомяну наиболее важную информацию в начальном разделе, а также создам шпаргалки, перечисленные под разделом, подобно тому, что я использую при изучении и обучении. Тем не менее, я настоятельно рекомендую вам играть более активную роль в обучении, создав свою собственную шпаргалку, на которую можно ссылаться при сборке, в дополнение к простому проведению часов на экране (либо построению, либо чтению кода).

Цели

Цели перечислены в соответствующих разделах программы. Тем не менее, я стремлюсь научить вас к концу этого учебного курса, как освоить основы javascript в базовом разделе, быть в состоянии уверенно создавать веб-сайты и базовые веб-приложения для клиентов в течение 3-6 месяцев в умеренном разделе и полностью создавать полноценные веб-приложения — даже нативные приложения — с использованием таких фреймворков, как React и React Native в разделе «Дополнительно».

Ограничение

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

Ограничения для курса перечислены в соответствующем разделе, но основные ограничения касаются основных понятий, таких как HTML и React. Поскольку этот учебный курс посвящен javascript, я не хотел разбавлять инструкцию, сосредоточив внимание на концепциях HTML/CSS или углубившись в изучение фреймворка React (что используется в расширенном разделе). Поэтому я предлагаю вам просмотреть эти ресурсы, чтобы помочь вам в соответствующих разделах:

HTML для начинающих:

CSS для начинающих:

React для начинающих:

После прохождения базового раздела, ведущего к разделу «Умеренный», вы должны быстро освоить концепции HTML и CSS, а также я расскажу вам о пакетах, которые значительно упрощают реализацию обеих концепций.

React — это фреймворк для javascript, так что это просто javascript с немного другими нюансами. Пройдите курс React для начинающих, чтобы получить представление о концепциях, но вы будете шокированы тем, насколько он похож на vanilla js и jquery.

Основы

Цели:

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

  • Основы ванильного Javascript

Предпосылки

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

Ограничение

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

01 Типы языков

  1. Пример использования проекта

https://www.javascripting.com/

02 Настройка вашей среды

  1. Установка VSCode
  2. Варианты среды кодирования
  3. Наше окружение
  4. Первое приложение

03 Структуры данных и объекты

  1. Тип против нетипа
  2. Примитивные типы
  3. Объекты (все остальное)

04 Операторы

  1. Основные операторы
  2. Операторы сравнения
  3. Продвинутые операторы

05 Заявления JS

  1. Объявления и функции
  2. Итерации
  3. Поток управления

06 Методы и функции

  1. Выражение функции против объявлений
  2. Функции
  3. Область действия вложенного оператора
  4. Перезвонить Fn
  5. Методы

07 Встроенные объекты

  1. Список наиболее часто используемых
  2. Список отдыха (ресурс)

08 Создание объектов

  1. Тип функций
  2. Литералы объекта
  3. Это ключевое слово

09 Объектно-ориентированное программирование

  1. Классы
  2. Расширенные методы

10 ошибок и их обработка

  1. Время синтаксического анализа и время выполнения
  2. Пытаться
  3. Поймать
  4. Бросать
  5. Ну наконец то
  6. Другие

11 мини-проект

  1. Строим вместе
  2. Выбери свой собственный [список идей проекта]

Умеренный

Цели:

Цели этого раздела «Учебного курса» — научить вас создавать веб-сайты, изучать DOM и манипуляции с DOM для создания надежного пользовательского интерфейса, изучать пакеты и то, как они помогают вам создавать больше, делая меньше, и создавать базовые веб-сайты. приложения с ограниченным функционалом. Мы также рассмотрим концепции, которые будут более подробно рассмотрены в расширенном разделе.

  • Основы HTML/CSS
  • Jquery — Взаимодействие с пользователем/события

Предварительный запрос

Освоив организованное всестороннее понимание Базового раздела, вы сможете легко перейти к этой части Bootcamp. Я также перечислил ресурсы HTML/CSS выше, чтобы вы могли их просмотреть, так как в этом разделе мы в основном фокусируемся на jquery и взаимодействии с пользователем. Я буду создавать веб-сайт, поэтому ваше понимание основ HTML/CSS приветствуется, но не обязательно на 100% на этом этапе.

Ограничение

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

01 HTML — краткий обзор

  1. Теги и CSS — структурирование контента и улучшение внешнего вида контента
  2. Структура тега
  3. Основы CSS

02 ДОМ

  1. Типы манипуляций (изменение CSS, добавление контента, реакция на пользовательские события)
  2. Упражнение для каждого ^
  3. Практическое упражнение

03 Модули и пакеты

  1. Обзор (подробнее в разделе «Дополнительно»)
  2. Jquery
  3. Другие пакеты


Модули JavaScript
Это руководство содержит все необходимое для начала работы с синтаксисом модулей JavaScript.developer.mozilla.org



04 JSON

  1. Как пользоваться
  2. JSON в строку и обратно
  3. Другие типы

05 Введение в базу данных

  1. Организация — Таблицы и записи
  2. Поля и значения
  3. Операции — сортировка, выборка/добавление,
  4. СУБД — Введение Firebase
  5. Плоская БД против реляционной БД
  6. Пример
  7. Расширенная информация:

06 Генераторы и итераторы

  1. Синтаксис
  2. Урожай

07 Асинхронно / Ожидание

  1. Синхронный против асинхронного
  2. Обещать
  3. потом
  4. Дополнительная информация:

08 Декораторы

  1. Подклассы
  2. Украшение
  3. Fn высшего порядка — см. Обратные вызовы

09 Развернуть сайт

  1. Введение в Firebase
  2. Командные строки

10 Модель параллелизма и цикл событий

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



Модель параллелизма и цикл событий
JavaScript имеет модель параллелизма, основанную на цикле событий, который отвечает за выполнение кода, сбор и…developer.mozilla .org



11 Управление памятью

Дополнительная информация:



Управление памятью
Языки низкого уровня, такие как C, имеют примитивы ручного управления памятью, такие как malloc() и free(). В отличие от…developer.mozilla.org



12 Строгий режим

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

'strict mode'

var a = 0
var b = '0'
const compare = (a,b) => {
   else if (a === b) {
      console.log('a === b')
   } else {
      console.log('a != b')
   }
}

compare(a,b)
// Expected Result: 'a != b'

Дополнительная информация:



Строгий режим
Строгий режим JavaScript, представленный в ECMAScript 5, — это способ подписаться на ограниченный вариант JavaScript, тем самым…developer.mozilla.org



12 мини-проект

  1. Создать сайт

Передовой

Цели:

В этом последнем и заключительном разделе «Учебного лагеря» мы собираемся погрузиться в изучение надежного фреймворка. Мы кратко рассмотрим основы фреймворка React, поговорим о планировании приложений, рассмотрим облачные функции, использование аутентификации и изучим передовые методы передачи объектов в вашем приложении.

Предварительный запрос:

Вам необходимо понимать HTML/CSS и освоить Основы из первого раздела. Кроме того, во втором разделе (Умеренный) вы должны освоить основные концепции баз данных, использование и управление внешними данными, декораторами (или функциями высшего порядка), а также узнать, как передавать данные на сервер и с сервера. от клиента.

Ограничение:

Этот раздел не дает подробного объяснения React. Если вы продолжите использовать реакцию в качестве предпочтительной среды и погрузитесь в гибридный язык реакции-натива, вы можете быть ограничены в создании полностью нативного приложения для iOS или Android. В противном случае этот раздел может потенциально (со временем на практике) помочь вам разработать относительно надежные приложения с очень желательной функциональностью и вооружить вас набором навыков, востребованным уважаемыми работодателями.

01 React.js и React Native — общий обзор

  1. Обратитесь к Основам 01 для фреймворков
  2. JSX — виртуальный дом
  3. Компоненты и реквизит
  4. Состояние — данные и пользовательский интерфейс (динамические данные)
  5. Вложенные компоненты
  6. Функции как свойства и состояние обновления

02 Планирование приложений

  1. Определение цели и задач
  2. Определение основной функциональности
  3. Блок-схема пользовательской навигации
  4. Дизайн пользовательского интерфейса
  5. Создание и тестирование UI/UX
  6. Создание серверных/основных функций
  7. Управление базами данных
  8. Добавить авторизацию
  9. Бета-тест
  10. Запуск

03 Сервер против клиента

  1. Краткая информация

04 Настройка вашей среды

  1. Введение в НПМ
  2. Папка проекта — Папки src
  3. Hello World — Упражнение

05 Класс против функций конструктора

  1. Когда использовать?
  2. Жизненный цикл компонента

06 Настройка компонентов навигации

  1. React-Router-Dom — npm
  2. Маршрутизатор, коммутатор, ссылка, перенаправление

07 Первый экран — основной/приборный/главный

  1. Собираем это вместе

08 Другой компонент экрана

  1. Повтор 07

09 страниц ссылок — React-Router-Dom

  1. Ссылка в файле app.js
  2. адресовать

10 Завершите другие компоненты

  1. Повторите 07 (возможно, не компоненты пользовательского интерфейса)

11. Сделайте компоненты функциональными

  1. Посмотрите на шаг № 6 в планировании приложений

12 Добавить фиктивные данные

13 Создать магазин

  1. Передача данных от компонентов
  2. Магазин/Действие/Редуктор
  3. Преобразователь
  4. HoCs

14 Создание проекта Firebase

  1. Настройка консоли ФБ
  2. Связывание проекта
  3. Правила безопасности
  4. Создание экземпляра
  5. Создание БД и вызов данных

15. Асинхронный код с Redux

  1. Использование преобразователь
  2. Остановить отправку для асинхронного запуска

17 Подключение Redux к Firestore/Firebase

  1. React-Redux-Firebase
  2. Redux-Firestore
  3. Улучшение магазина и действий

18 Добавить и вызвать данные из Firebase

  1. Добавление в базу данных
  2. Звонок из базы данных

11 Настройка аутентификации Firebase

  1. Аутентификация Firebase
  2. Зарегистрируйтесь / Войдите с помощью электронной почты и пароля

19 Зарегистрироваться, войти, выйти

  1. Аутентификация Firebase
  2. Создание Документа пользователя в Коллекции пользователей

20 Подключение аутентификации Firebase к Redux

  1. Отслеживание состояния аутентификации

21 Охрана маршрута

  1. Использование аутентификации при загрузке или перенаправлении

22 Безопасность

  1. Правила

23 облачных функции

  1. Настройка среды (firebase-tools)
  2. Два типа триггера
  3. Защитные функции

24 Сортировка данных Firestore

  1. Список заказа
  2. Методы фильтрации

25 Развертывание

  1. Инициализация и развертывание

26 мини-проект

  1. Маленькое приложение

использованная литература

https://www.glassdoor.com/Salaries/entry-level-software-engineer-salary-SRCH_KO0,29.htm

https://www.amazon.com/80-20-Principle-Secret-Achieving/dp/0385491743

https://www.amazon.com/4-Hour-Workweek-Escape-Live-Anywhere/dp/0307465357

Спасибо за чтение! Если вам понравилась эта статья, не забудьте поаплодировать нам внизу! Это много значит для меня, и это помогает другим людям увидеть историю.

Свяжитесь со мной:

Инстаграм| Твиттер| Ютуб| "Групповой чат"

Сценарист: Ангел Мондрагон.