Воркшоп по React

👋🏼 Привет и добро пожаловать!

📸 Вместе мы построим свой Instagram в живом режиме! Так что пристегни ремни — будет интересно!

👨🏼‍🔬 В этой инструкции ты узнаешь как настроить и запустить проект.

📜 Содержание

• 🚀 Инструкция по запуску проекта
• 🤖 Краткий обзор команд для проекта
• 🤔 FAQ

🚀 Инструкция по запуску проекта

Список поддерживаемых нами операционных систем можно найти здесь.

1. Скачай и установи последнюю LTS-версию Node.js:

• Пользователям MacOS и Ubuntu нужно установить nvm, а затем выполнить в консоли nvm install 8.12.0.;

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

• Пользователям Windows Node.js можно установить обычным установщиком с официального сайта.

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

2. Выполни в консоли node -v и убедись, что установленная версия Node.js не ниже v8.12.0;
3. Выполни в консоли npm -v и убедись, что установленная версия npm не ниже 6.4.1;
4. Установи Yeoman и генератор проекта компании Lectrum:

npm install -g yo @lectrum/generator-ui

Если ты пользователь Windows, настрой себе терминал для удобной работы.

5. Скачай и установи Git, если его нет на компьютере;
6. Выполни в консоли git --version, чтобы проверить версию установленного Git, должно быть не ниже 2.18.0;
7. Важно:

• ❗️ Если ты пользователь MacOS:
  1. Выполни в консоли xcode-select --install;
  2. Затем установи Homebrew и выполни в консоли brew install libgcrypt.
• ❗️ Если ты пользователь Ubuntu:
  1. Выполни в консоли sudo apt install libssl-dev.

8. Склонируй этот проект:

git clone https://github.com/lectrum/react-workshop.git

9. Перейди в проект, выполнив команду:

cd react-workshop

10. В терминале, находясь в директории с текущим проектом, выполни команду:

yo @lectrum/ui

❗️ При нехватке памяти у пользователей Ubuntu может возникнуть следующая ошибка при установке:

Phantom installation failed { Error: spawn ENOMEM

Чтобы исправить эту ошибку выполни следующие шаги из инструкции.

После первой установки генератор попросит разрешения об анонимном сборе статистической информации. На этот вопрос можно ответить на своё усмотрение. Мы рекомендуем отвечать «нет» (нажать клавишу n).

Возможно генератор найдёт устаревшие файлы и спросит нужно ли их обновить. Нужно согласиться (нажать клавишу y).

11. Генератор подготовит все нужные файлы, установит зависимости и запустит проект. Если проект не запустился, выполни команду npm run start;
12. Перейди в браузер и открой страницу по адресу http://localhost:3000. После загрузки сборки появится страница со стартовой точкой;
13. Открой Chrome Dev Tools и перейди на вкладку console, там не должно быть каких-либо ошибок.

👉🏼 Хозяйке на заметку

Все доступные команды и возможности сгенерированного проекта можно найти по этой ссылке.

🤔 FAQ

Ответы на часто задаваемые вопросы можно найти здесь.

Лицензия

MIT © Lectrum