Создание и настройка React-App
- Создать репозиторий и склонировать на ПК
- Установить React application Открыть терминал в папке проекта и установить react-app
npx create-react-app . 3. Удалить ненужные файлы 3.1 public/index.html В папке public оставить только index.html. Удалить код из index.html, создать базовую разметку с помощью Emmet.
Разметка может выглядеть так:
<title>Document</title> 3.2 /src В папке /src достаточно оставить index.js, App.js, index.css, App.cssВ папке /src создать папку components для размещения будущих компонентов.
3.3 index.js В index.js достаточно оставить следующий код:
// index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App';
ReactDOM.render( <React.StrictMode> </React.StrictMode>, document.getElementById('root'), ); 3.4 App.js В App.js достаточно оставить следующий код:
// App.js import './App.css';
function App() { return
export default App; 3.4 App.css В App.css удалить ненужные стили.
- Запустить сервер проверить, нет ли ошибкок. npm start
- Настройка pre-commit хуков 5.1 Установка зависимостей Установить в проект следующие пакеты.
Примечание: react-app корректно работает с более старой версией eslint 7.11.0
npm install --save-dev prettier [email protected] 5.2 Инициализация lint-staged и husky Пользователям MacOS и Linux систем необходимо выполнить в терминале следующую команду. Она установит и настроит husky и lint-staged в зависимости от инструментов качества кода из зависимостей проекта в package.json.
npx mrm lint-staged Пользователям Windows необходимо выполнить следующую команду. Она делает тоже самое.
npx mrm@2 lint-staged 5.3 Настройка в VSCode Провреить наличие следующих раширений:
Prettier - Code formatter
Formatting Toggle
ESLint
Можно добавить настройки Prettier, создав файл .prettierrc.yaml в корневой папке проекта. Можно добавить следующие настройки.
printWidth: 100 useTabs: false semi: true singleQuote: true trailingComma: 'all' bracketSpacing: true arrowParens: 'avoid' proseWrap: 'always' Открыть настройки VSCode и проверить следующее:
autoSave
Превью настроек VSCode
formatOnSave
Превью настроек VSCode
codeActionsOnSave
Превью настроек VSCode
Или же добавить код в файл settings.json
Ctrl + Shift + P => settings.json => Open Settings (JSON)
{ "files.autoSave": "onFocusChange", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true } } 6. Настройка Деплоя Ссылка на create-react-app
В package.json добавить следующию строку:
"homepage": "https://имя_пользователя.github.io/имя_репозитория" Сделать билд через терминал:
npm run build Установить пакет gh-pages
npm install --save gh-pages В package.json в scripts добавить 2 скрипта:
"scripts": { // добавить к остальным скриптам "predeploy": "npm run build", "deploy": "gh-pages -d build", Запустить деплой
npm run deploy Скрипт predeploy запускать не нужно, он выполнится автоматически. Будет создана ветка gh-pages, выполнен автоккоммит и её пуш в ваш репозиторий на GitHub.сom, в настройках GitHub Pages автоматически будет подставлена ветка gh-pages, достаточно взять ссылку. Сам проект как обычно коммитим, пушим, чтобы код отразился в ветке main.
Если у кого-то не получилось настроить, я не виноват :) Не забудьте 7. Дальнейшая работа с проектом Работаем, делаем коммиты и пушим на GitHub как обычно. Страница автоматически не обновится. Если нужно залить на GitHub Pages, делаете повторно npm run deploy. Или же можете настроить автодеплой. Меня этот вопрос на данный момент не волнует.