🙋🏻‍♂️ Часто задаваемые вопросы

📜 Содержание

📚 Процесс обучения

Могу-ли я получить сертификат без оценки?

Если ты не захочешь публиковать свою оценку в сертификате — просто напиши нам, и мы приготовим сертификат с отметкой «прошёл интенсив».

Как привязать обучающий проект к своему аккаунту Github?

Выполненные домашние задания нужно пушить в репозиторий на твоём аккаунте Github, и отправлять на проверку ментору. Если домашнее задание выполняется в проекте, который ты склонировал с одного из репозиториев Lectrum (например git@github.com:Lectrum/react-online-intensive.git), то такой проект нужно привязать к твоему аккаунту. Это необходимо, потому что в наш репозиторий пушить нельзя. Для сдачи домашек тебе понадобится отдельный репозиторий. Для смены адреса удалённого репозитория воспользуйся этой инструкцией.

Альернативой ручной смене адреса удалённого репозитория может быть форк.

🌏 Настройка окружения

Какие операционные системы поддерживаются обучающими проектами компании Lectrum?

Поддерживаемые операционные системы:

  • macOS: Mojave, High Sierra;
  • Ubuntu: 18.04.01, 16.04.01;
  • Windows: 10.

Как установить Node.js?

Есть несколько способов:

Что такое nvm?

nvm — это сокращение от Node Version Manager. То есть nvm — это менеджер версий Node.js. С помощью nvm на одном компьютере можно держать сразу несколько разных версий Node.js, и легко переключатся между ними. Каждая версия находится в изолированном и независимом окружении, что очень удобно — одна версия Node.js никогда ничего не сломает в другой версии.

Зачем мне устанавливать Node.js именно через nvm?

Дело в том, что nvm — это удобный инструмент для работы с Node.js. Но кроме того, для правильной работы наших проектов необходимо исправить права для npm на твоём компьютере (чтобы можно было выполнять npm install ... без sudo). Если ты по какой-то причине не хочешь устанавливать nvm — не проблема. Главное исправить права для npm. nvm исправляет права для npm автоматически. Но это можно сделать и самостоятельно, следуя этому гайду.

Как установить или обновить Git?

Скачай с официального сайта и установи последнюю версию Git.

Как обновить Node.js?

Есть несколько способов, в зависимости от того, как ты устанавливал Node.js.

  • Первый: если ты установил Node.js установщиком с сайта, то обновить тоже нужно с помощью установщика последней версии.
  • Второй: если ты установил Node.js через nvm, то обновить тоже нужно с помощью команды nvm install --lts --latest-npm.

Я пользователь Windows. Как настроить терминал для удобной работы?

Есть несколько вариантов. Список составлен начиная из лучшего варианта, заканчивая самым обычным:

  • В современной веб-разработке наиболее удобным является UNIX-окружение. Чтобы настроить его установи Ubuntu shell. Это позволит тебе работать на Windows в UNIX-окружении Ubuntu.
  • Рекомендуем также рассмотреть терминал CMDER, альтернативу обычному терминалу Windows Command Prompt (CMD). Например, в CMDER есть встроенный git, а интерфейс выглядит куда приятней, чем в Command Prompt (CMD).
  • Если никакой из вышеперечисленых вариантов не подойдёт, используй встроенный в Windows терминал Command Prompt (CMD).

Какой редактор кода мне использовать?

Мы рекомендуем использовать VSCode. Этот редактор доступен для всех основных операционных систем. А также он быстрый (быстрее Atom), активно развивается, а также обладает богатой базой удобных расширений. Вот список самых полезных:

  • Babel syntax highlightin: эта подсветка является самой современной, поддерживает все фичи JavaScript а также синтаксис JSX React;
  • ESLint: лучший на сегодняшний день линтер JavaScript-кода для VSCode;
  • Prettier: встроенный в VSCode Prettier. С его помощью можно удобно форматировать JavaScript-код нажатием сочетания клавиш. Очень удобно;
  • Auto rename tag: этот плагин будет автоматически обновлять имя парного тега разметки;
  • File icons: добавляет красивые иконки для всевозможных типов файлов в сайдбаре.

Также можно установить полный список расширений, который используется компанией Lectrum одной командой в терминале:

code --install-extension aaron-bond.better-comments
code --install-extension AlanWalk.markdown-toc
code --install-extension alefragnani.project-manager
code --install-extension asvetliakov.snapshot-tools
code --install-extension christian-kohler.npm-intellisense
code --install-extension christian-kohler.path-intellisense
code --install-extension CoenraadS.bracket-pair-colorizer
code --install-extension dbaeumer.vscode-eslint
code --install-extension eamodio.gitlens
code --install-extension esbenp.prettier-vscode
code --install-extension formulahendry.auto-rename-tag
code --install-extension formulahendry.code-runner
code --install-extension gaearon.subliminal
code --install-extension jasonnutter.search-node-modules
code --install-extension mgmcdermott.vscode-language-babel
code --install-extension naumovs.color-highlight
code --install-extension pnp.polacode
code --install-extension redhat.vscode-yaml
code --install-extension robertohuertasm.vscode-icons
code --install-extension sdras.night-owl
code --install-extension Shan.code-settings-sync
code --install-extension shinnn.stylelint
code --install-extension sldobri.daily
code --install-extension streetsidesoftware.code-spell-checker
code --install-extension streetsidesoftware.code-spell-checker-russian
code --install-extension tomphilbin.gruvbox-themes
code --install-extension Tyriar.sort-lines
code --install-extension yogipatel.solarized-light-no-bold

P.S.: перед запуском этого набора команд проверь, есть ли в твоём терминале возможность вызывать Visual Studio Code из терминала с помощью code. Для этого выполни команду code в терминале. Команда должна открыть редактор VSCode. Если этого не произошло пройди инструкцию: Mac, Windows

Что такое Yeoman?

Yeoman — это инструмент для автоматического создания и обновления проектов. С его помощью можно развернуть проект одной командой, что очень удобно.

Нужно ли запускать npm audit fix после установки зависимостей?

Нет, не нужно.

Как убрать предупреждение experimentalDecorators из VSCode?

Пройди инструкцию из этого гайда.

Как настроить PostCSS в VSCode?

Для интеграции синтаксиса PostCSS используй этот плагин.

Как исправить ошибку, связанную с нехваткой памяти при установке PhantomJS для пользователей Ubuntu

О наличии такой ошибки может говорить следующее сообщение в консоли:

Phantom installation failed { Error: spawn ENOMEM

Для решения этой проблемы выполни следующие команды в консоли:

  • sudo fallocate -l 4G /swapfile
  • sudo chmod 600 /swapfile
  • sudo mkswap /swapfile
  • sudo swapon /swapfile
  • echo "/swapfile none swap sw 0 0" | sudo tee -a /etc/fstab

Затем удали node_modules: rm -rf node_modules. И установи зависимости заново: npm install.

Что такое синхронизация, которую мы будем использовать в рамках обучения? И зачем она?

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

Как работает синхронизация?

Синхронизация работает очень просто — в терминале перейди в директорию с обучающим проектом и выполни команду npm run checkpoint. В результате выполнения этой команды, находящийся на компьютере преподавателя код окажется на твоём компьютере. Таким образом ты синхронизируешься с преподавателем, и сможешь продолжать самостоятельно. После выполнения npm run checkpoint, твой код будет сохранён в отдельной ветке. При каждом выполнении npm run checkpoint будет создаваться новая ветка, в которой будет сохранён твой прогресс. Таким образом, позже ты сможешь вернутся и поработать со своим кодом, если захочешь.

Как проверить, что синхронизация работает?

  • Перейди в директорию с обучающим проектом, выполни npm install. Проверь, чтоб в терминале не было ошибок во время установки зависимостей;
  • Затем выполни npm run checkpoint. Программа сообщит тебе детальную информацию о каждом шаге синхронизации;
  • После окончания синхронизации запусти проект командой npm run start и перейди по адресу localhost:3000 в браузере;
  • Если ты видишь сообщение «Поехали!», то синхронизация работает и во время обучения ты сможешь воспользоваться ею в любой момент;
  • Если ты видишь сообщение «Добро пожаловать!», то на твоём компьютере синхронизация не работает. Но не переживай ты всё равно можешь синхронизироваться с преподавателем в любой момент следуя этой инструкции.

🏎 Запуск и работа с проектом

У меня не запускается проект. Что делать?

Есть несколько решений.

  1. Посмотри консоль на наличие ошибок;

  2. Прочитай текст ошибки. Чаще всего, текст ошибки сам по себе объясняет её причину.

    • Самая частая ошибка: Error: listen EADDRINUSE 0.0.0.0:3000. Давай разберёмся как её решить. Читаем:

      • Первое слово — Error, говорит о том, что это ошибка;
      • Второе слово — listen, говорит о том, что ошибка связана с процессом «прослушивания»;
      • Далее — EADDRINUSE 0.0.0.0:3000, первая часть (буквы) — это описание ошибки, вторая часть (цифры) — адрес в формате хост:порт;

      • EADDRINUSE — это аббревиатура. Пу сути её можно разгадать путем обычной логики:

        • E — означает Error, ошибка;
        • ADDR — сокращение от address, адрес;
        • INUSE — сокращение in use — в использовании.
      • В итоге можно сделать вывод, что адрес 0.0.0.0:3000 чем-то используется. Webpack поднимает проект именно на этом адресе. Этот адрес уже занят каким-то процессом, поэтому — возникает ошибка;

      • Решение:

        • Найди, какие процессы твоего компьютера используют данный адрес, и выключи их;
        • Если не можешь найти их через терминал — перегрузи компьютер.

Как остановить запущенный командой npm run start (или yarn start) проект?

В терминале нажми сочетание клавиш CTRL + C.

У меня не работает синхронизация. Что делать?

Ты можешь синхронизироваться с преподавателем вручную. Для этого:

  • Сохрани свой код в отдельной ветке;
  • Затем переключись на ветку lectrum-dev;
  • И выполни git pull;

Если тебе сложно работать с git, то вот подсказка с командами, какие можно использовать:

git add .
git stash —save
git checkout -b имя-ветки-с-твоим-кодом
git stash pop
git add .
git commit -m "Сообщение коммита"
git fetch
git checkout lectrum-dev
git pull

🥊 npm и yarn

В чём разница между npm и yarn?

Это два разных менеджера npm-пакетов. Можно почитать об их отличиях здесь и здесь.

Что лучше: npm или yarn?

На этот, как и на многие другие вопросы типа «а что лучше...?», увы, однозначного ответа нет.

У каждого пакета есть свои достоинства и недостатки. Мы используем yarn, так как по нашему мнению он обладает более удобным и красивым интерфейсом.

✏️ Качество кода: настройка редакторов и IDE

Почему редактор подсвечивает мой код?

Есть несколько возможных причин.

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

Вторая: ваш код подсвечивает линтер, указывая на стилистические ошибки.

Что такое линтер?

Линтер — это статический анализатор кода.

Он сообщает разработчику о стилистических и функциональных ошибках в программном коде. Мы используем ESLint для JavaScript, и stylelint для CSS . Детально о том, как работает линтер на примере ESLint можно узнать здесь.

Что такое Prettier?

Prettier — это инструмент для форматирования JavaScript-кода. Он очень быстрый и с ним легко разобраться. Больше ненужно выравнивать код вручную. Достаточно нажать сочетанию клавиш и prettier выровняет всё за тебя!

Как сделать, чтобы Prettier и ESLint работали вместе?

Всё не так просто.

  • У ESLint есть настройки, по которым он проводит анализ кода и говорит вам об ошибках.
  • Пакет prettier-eslint-cli — это интеграция Prettier и ESLint, как мостик между двумя берегами.
Prettier 🏖 ← мостик prettier-eslint-cli → 🏖 ESLint