/react-workshop

Lectrum education

Primary LanguageJavaScriptMIT LicenseMIT

Lectrum favicon Воркшоп по React


Package version Last commit Dependencies Last update
Подписывайся на наш Facebook

👋🏼 Добро пожаловать!

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


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


📜 Содержание


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

  1. Скачай и установи последнюю LTS-версию Node.js;
  2. Выполни в консоли node -v и убедись, что установленная версия Node.js не ниже v8.11.4;
  3. Выполни в консоли npm -v и убедись, что установленная версия npm не ниже 5.6.0;
  4. Установи Yeoman и генератор проекта компании Lectrum:
// Для пользователей UNIX:
sudo npm install -g yo @lectrum/generator-ui

// Для пользователей Windows:
npm install -g yo @lectrum/generator-ui

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

  1. Скачай и установи Git, если его нет на компьютере;
  2. Выполни в консоли git --version, чтобы проверь версию установленного Git, должно быть не ниже 2.18.0;
  3. Склонируй этот проект:
git clone https://github.com/lectrum/react-workshop.git
  1. Перейди в проект, выполнив команду:
cd react-workshop
  1. В терминале, находясь в директории с текущим проектом, выполни команду:
yo @lectrum/ui
  1. Генератор подготовит все нужные файлы, установит зависимости и запустит проект. Если проект не запустился, выполни команду npm run start;
  2. Перейди в браузер и открой страничку http://localhost:3000. Когда страничка загрузится, появится сообщение «Добро пожаловать!»;
  3. Открой Chrome Dev Tools и перейди на вкладку console, там не должно быть каких-либо ошибок.

🤖 Краткий обзор команд для проекта

Заметка: эти команды станут доступны после первого выполнения команды yo @lectrum/ui.
Запускать через yarn «имя команды» или npm run «имя команды».

Команда Описание
start запустить проект для разработки
build запустить сборку проекта
build:analyze запустить сборку проекта и запустить режим детального анализа результата сборки
lint:javascript провести анализ исходного JavaScript-кода на стилистические ошибки
lint:css провести анализ исходного CSS-кода на стилистические ошибки
lint провести анализ всего исходного кода на стилистические ошибки
test запустить тесты
test:watch запустить тесты в watch-режиме
test:debug запустить тесты в debug-режиме
soundcheck запустить все линтеры и тесты
prettier отформатировать исходный код с помощью prettier
deploy собрать и задеплоить приложение на свой Github Pages
commit сделать стандартизированный коммит

Заметка: после деплоя на Github Pages приложение будет доступно по адресу:
https://имя-твоего-пользователя-гитхаб.github.io/имя-твоего-репозитория-с-приложением


🤔 FAQ

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

Лицензия

MIT © Lectrum

Сделано с любовь