📸 Вместе мы построим свой Instagram в живом режиме! Так что пристегни ремни — будет интересно!
👨🏼🔬 В этой инструкции ты узнаешь как настроить и запустить проект.
- Скачай и установи последнюю LTS-версию Node.js;
- Выполни в консоли
node -v
и убедись, что установленная версия Node.js не нижеv8.11.4
; - Выполни в консоли
npm -v
и убедись, что установленная версия npm не ниже5.6.0
; - Установи Yeoman и генератор проекта компании Lectrum:
// Для пользователей UNIX:
sudo npm install -g yo @lectrum/generator-ui
// Для пользователей Windows:
npm install -g yo @lectrum/generator-ui
P.S.: если ты пользователь Windows, настрой себе терминал для удобой работы.
- Скачай и установи Git, если его нет на компьютере;
- Выполни в консоли
git --version
, чтобы проверь версию установленного Git, должно быть не ниже2.18.0
; - Склонируй этот проект:
git clone https://github.com/lectrum/react-workshop.git
- Перейди в проект, выполнив команду:
cd react-workshop
- В терминале, находясь в директории с текущим проектом, выполни команду:
yo @lectrum/ui
- Генератор подготовит все нужные файлы, установит зависимости и запустит проект. Если проект не запустился, выполни команду
npm run start
; - Перейди в браузер и открой страничку http://localhost:3000. Когда страничка загрузится, появится сообщение
«Добро пожаловать!»
; - Открой
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/имя-твоего-репозитория-с-приложением
Ответы на часто задаваемые вопросы можно найти здесь.
MIT © Lectrum