Шпаргалка по Create React App

0
794
Шпаргалка по Create React App (Create react app cheatsheet)

Шпаргалка по Create React App (Create react app cheatsheet)

Описание

Create react app (CRA) — это интерфейс командной строки (command line interface, CLI), позволяющий создавать предварительно настроенные React-проекты. Предварительная настройка включает в себя, но не исчерпывается, настройкой Webpack и Babel.

Создание и запуск проекта

«my-app» — произвольное название проекта.

Флаг «—template» используется для выбора шаблона проекта.

Имеется возможность создавать собственные шаблоны.

Структура проекта

Самыми важными файлами являются следущие:

  • public/index.html — шаблон страницы (приложения)
  • src/index.js — «входная точка» JavaScript в терминологии «бандлеров»

Эти файлы удалять нельзяОбратите внимание: Вебпак обрабатывает только файлы, находящиеся в директории src.

Вспомогательные инструменты

Настройки VSCode для Prettier (settings.json):

Полный список настроек смотрите здесь.

Для разработки компонентов в изоляции рекомендуется использовать Storybook:

Для анализа бандла рекомендуется использовать source-map-explorer.

Устанавливаем пакет с помощью yarn add source-map-explorer. Добавляем в раздел scripts файла package.json строку "analyze": "source-map-explorer 'build/static/js/*.js'". Выполняем анализ:

Стили и другие статические ресурсы

Поскольку для сборки проекта используется Вебпак, все статические ресурсы (стили, изображения, шрифты и т.д.) должны импортироваться в JavaScript-файлы:

Для стилизации также можно использовать специальные библиотеки, например, styled-components. Шпаргалку по работе с данной библиотекой смотрите здесь.

Для сброса стилей в index.css нужно добавить строку @import-normalize;.

При сборке проекта CSS автоматически минифицируется и обрабатывается с помощью autoprefixer, автоматически добавляющего вендорные префиксы.

При большом количестве статических ресурсов, их можно поместить в директорию public. Ссылка на такие файлы делается с помощью process.env.PUBLIC_URL:

Обратите внимание: такие файлы не будут обрабатываться Вебпаком.

Абсолютный путь

Для использования абсолютных путей при импорте компонентов, необходимо в корневой директории (my-app) создать файл jsconfig.json или tsconfig.json (при использовании TypeScript) следующего содержания:

Пользовательские переменные среды окружения

Самый простой способ определения «кастомных» переменных среды окружения состоит в создании файла .env в корневой директории (my-app):

Такие переменные должны начинаться с REACT_APP.

Использование:

Значения переменных заменяются при сборке проекта.

Прогрессивное приложение

CRA позволяет легко создавать прогрессивные веб-приложения:

Обратите внимание: регистрацию сервис-воркера следует запускать только при сборке проекта.

Проксирование (перенаправление запросов), шпаргалка по Create React App.

По умолчанию все запросы отправляются к серверу, на котором запущено приложение (http://localhost:3000). Для перенаправления запросов к серверу, использующему другой порт, необходимо добавить в файл package.json следующую строку:

Также можно воспользоваться специальной библиотекой:

Шпаргалка по Create React App. Разворачивание (деплой) проекта.

Существует множество различных вариантов разворачивания приложения. Это можно сделать как локально, так и с помощью генераторов статических сайтов, таких как Netlify, Heroku, Vercel и т.д.

На мой взгляд, самым простым способом является «деплой» SPA-приложения на Netlify:

Имеется возможность продолжительной (длящейся) интеграции с Netlify репозитория, размещенного на Github.

Другие варианты «деплоя» смотрите здесь.

 

Возможно вам будет интересно:

 — Шпаргалка по Jest с примерами кода.

 — Шпаргалка по Redux с примерами кода (stylesheet).