Воркшоп по React: Резюме

👋🏼 Добро пожаловать на воркшоп! 📋 Этот репозиторий — стартовая точка для твоего мини-проекта «CV». Тебе нужно самостоятельно выполнить задание — создать CV по макету, используя знания, полученные на протяжении воркшоп. 👨🏽‍🔬 Из инструкции ниже ты узнаешь как настроить и использовать проект.

📜 Содержание

• 🚀 Для запуска проекта выполни следующие шаги
• 🖥 Техническое задание
• 🤖 Краткий обзор команд для проекта
• 🤔 FAQ

🚀 Для запуска проекта выполни следующие шаги

1. Скачай и установи последнюю LTS-версию Node.js.
2. Выполни в консоли node -v и убедись, что установлена последняя версия Node.js не ниже v8.11.3;
3. Введи в консоли npm -v и убедись, что установлена последняя версия npm не ниже 5.6.0;
4. Скачай и установи Git, если его нет на компьютере;
5. Введи git --version, чтобы проверь версию установленного Git, должно быть не ниже 2.18.0;
6. Склонируй и запусти этот проект: git clone https://github.com/Lectrum/react-trial-hometask.git;
7. Чтобы перейти в директорию с проекта, после клонирования выполни команду cd react-trial-hometask;
8. Чтобы установить зависимости проекта, выполни команду npm install;
9. Чтобы запустить проект в режиме разработки, самое время выполнить  командуnpm start;
10. Перейди в браузер и открой страничку http://localhost:3000. Когда страничка загрузится, ты увидишь страницу с сообщением «Воркшоп по React, домашнее задание: стартовая точка.
11. Открой Chrome Dev Tools и перейди на вкладку Console, там не должно быть каких-либо ошибок.

🖥 Техническое задание

• Суть задания: создать резюме, следуя референтной версии
• Для старта можно использовать подготовленные компоненты и стили
• Несколько компонентов содержат и разметку и стили, остальные — только стили. Если верстать не нравится/не хочется — можно использовать их как стартовую точку
• При желании можно удалить компоненты и стили, и сделать все самостоятельно
• При распечатке компонентов нужно максимально использовать переборы JavaScript — на пример .map, вручную дублировать компоненты в возвращаемом значении метода render — нельзя
• В плане контента — можно заменить имеющийся данные об Илоне Маске данными о себе
• Компоненты-списки содержат файлы формата .json с данными для рендера — их использование обязательно (можете описать данные о себе внутри этих файлов)
• Эти .json-файлы находятся в директории source/theme/assets/data — по-файлу на компонент (имена файлов соответствуют именам компонентов)
• Закомментированного и не нужного кода в приложении быть не должно
• А также, линтер должен быть чистым

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

Заметка: запускать через yarn «имя команды» или npm run «имя команды».

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

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

🤔 FAQ

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