Гайд по Create React App -'React'-

1. Создаем репозиторий на Github
2. Создаем React приложение -

         npx create-react-app .

3. Eсли еще не установлены, ставим - React DevTools
4. Установить валидация пропсов -

         npm i prop-types

5. Установить Prettier

         npm install --save-dev prettier eslint

6. Добавляем в корень папки фаил -

         .prettierrc

-и там такие настройки :

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "proseWrap": "always"
}

7. Установить lint и huskyrc -

         npx mrm@2 lint-staged

8. Добавляем в корень папки фаил -

.huskyrc

-и там такие настройки :

{
  "hooks": {
    "pre-comit": "lint-staged"
  }
}

9. Добавляем в корень папки фаил -

        .lintstagedrc

-и там такие настройки :

{
  "src/**/*.{json,css,scss,md}": ["prettier --write"],
  "src/**/*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix"]
}

10. Добавляем в корень папки фаил -

   .eslintcache

---

В VSCode => setting.json в конце добавялем для комфортной работы, после установки плагинов для авто сохранения и форматирования файлов.

{
  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Деплой на Github pages: Video

1. В файле "package.json"

 "homepage": "https://Vitaliy-Yakovlev.github.io/my-app"

2. Добавить пакет -

         npm install --save gh-pages

1. Добавить в package.json такие скрипты:

"predeploy": "npm run build",
"deploy": "gh-pages -d build"

npm run deploy

---

Деплой на NETLIFY

1. Создаем файл в корне проекта (src)

       netlify.toml

*там настройка:

[build]
 publish = "build"

 [[redirects]]
  from="/*"
  to="/index.html"
  status = 200

1. Устанавливаем пакет -

         npm install netlify-cli -g

2. Выполняем команду -

         netlify login

3. Добавялем скрипт -

"predeploy": "npm run build",
"deploy": "netlify deploy -p"

4. При первом деплои, стрелками выбрать : + Create & configure a new site
5. Зайти на страницу -

            netlify open --site

---

Видео инструкция

1. Netlify CLI и npm-скрипты
2. Создания проекта и деплой