Шпаргалка по Create React App (Create react app cheatsheet)
Описание
Create react app (CRA) — это интерфейс командной строки (command line interface, CLI), позволяющий создавать предварительно настроенные React-проекты. Предварительная настройка включает в себя, но не исчерпывается, настройкой Webpack и Babel.
Создание и запуск проекта
«my-app» — произвольное название проекта.
yarn create react-app my-app
# или
npm init react-app my-app
# или
npx create-react-app my-app
# смена директории
cd my-app
# запуск в режиме разработки
yarn start
# или
npm run start
# производственная сборка
yarn build
# или
npm run build
Флаг «—template» используется для выбора шаблона проекта.
yarn create react-app my-app --template cra-template-typescript
# "cra-template" можно опустить
yarn create my-app --template typescript
Имеется возможность создавать собственные шаблоны.
Структура проекта
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js
Самыми важными файлами являются следущие:
public/index.html
— шаблон страницы (приложения)src/index.js
— «входная точка» JavaScript в терминологии «бандлеров»
Эти файлы удалять нельзя. Обратите внимание: Вебпак обрабатывает только файлы, находящиеся в директории src
.
Вспомогательные инструменты
- Расширения для VSCode
- Расширения для Google Chrome
Настройки VSCode для Prettier (settings.json
):
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.endOfLine": "auto",
"prettier.jsxSingleQuote": true,
"prettier.packageManager": "yarn",
"prettier.singleQuote": true,
"prettier.semi": false,
"prettier.trailingComma": "none",
"prettier.useEditorConfig": false,
Полный список настроек смотрите здесь.
Для разработки компонентов в изоляции рекомендуется использовать Storybook:
npx -p @storybook/cli sb init
Для анализа бандла рекомендуется использовать source-map-explorer.
Устанавливаем пакет с помощью yarn add source-map-explorer
. Добавляем в раздел scripts
файла package.json
строку "analyze": "source-map-explorer 'build/static/js/*.js'"
. Выполняем анализ:
yarn build
yarn analyze
Стили и другие статические ресурсы
Поскольку для сборки проекта используется Вебпак, все статические ресурсы (стили, изображения, шрифты и т.д.) должны импортироваться в JavaScript-файлы:
// Button.css или Button.modules.css
@font-face {
font-family: 'Montserrat';
src: url('./Montserrat-Regular.ttf');
}
.btn {
padding: 0.25em 0.75em;
font-family: 'Montserrat', sans-serif;
font-size: 1.25em;
color: #1c1c1c;
}
// Button.js
import './Montserrat-Regular.ttf'
import './Button.css'
// или
import styles from './Button.module.css'
import likeImg from './like.png'
export default function Button() {
return (
<button className="btn" /*или*/ className={styles.btn} >
<img className="btn_like" src={likeImg} alt="like" />
</button>
)
}
Для стилизации также можно использовать специальные библиотеки, например, styled-components. Шпаргалку по работе с данной библиотекой смотрите здесь.
Для сброса стилей в index.css
нужно добавить строку @import-normalize;
.
При сборке проекта CSS автоматически минифицируется и обрабатывается с помощью autoprefixer, автоматически добавляющего вендорные префиксы.
При большом количестве статических ресурсов, их можно поместить в директорию public
. Ссылка на такие файлы делается с помощью process.env.PUBLIC_URL
:
<img src={process.env.PUBLIC_URL + '/img/logo.png'} />
Обратите внимание: такие файлы не будут обрабатываться Вебпаком.
Абсолютный путь
Для использования абсолютных путей при импорте компонентов, необходимо в корневой директории (my-app
) создать файл jsconfig.json
или tsconfig.json
(при использовании TypeScript) следующего содержания:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
import Button from 'components/Button';
// вместо
import Button from '../../components/Button';
Пользовательские переменные среды окружения
Самый простой способ определения «кастомных» переменных среды окружения состоит в создании файла .env
в корневой директории (my-app
):
REACT_APP_TITLE="Some title"
REACT_APP_DESCRIPTION="Some description"
REACT_APP_BASE_URL=http://example.com/
# расширение переменной
REACT_APP_IMG_URL=$REACT_APP_BASE_URL/img/
Такие переменные должны начинаться с REACT_APP
.
Использование:
<!-- public/index.html -->
<title>%REACT_APP_TITLE%</title>
<meta name="description" content="%REACT_APP_DESCRIPTION%" />
<img src={`${process.env.REACT_APP_IMG_URL}/logo.png`} />
Значения переменных заменяются при сборке проекта.
Прогрессивное приложение
CRA позволяет легко создавать прогрессивные веб-приложения:
yarn create react-app my-app --template pwa
// src/index.js
serviceWorker.register();
Обратите внимание: регистрацию сервис-воркера следует запускать только при сборке проекта.
Проксирование (перенаправление запросов), шпаргалка по Create React App.
По умолчанию все запросы отправляются к серверу, на котором запущено приложение (http://localhost:3000
). Для перенаправления запросов к серверу, использующему другой порт, необходимо добавить в файл package.json
следующую строку:
"proxy": "http://localhost:5000"
Также можно воспользоваться специальной библиотекой:
yarn add http-proxy-middleware
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:5000',
changeOrigin: true,
})
)
}
Шпаргалка по Create React App. Разворачивание (деплой) проекта.
Существует множество различных вариантов разворачивания приложения. Это можно сделать как локально, так и с помощью генераторов статических сайтов, таких как Netlify, Heroku, Vercel и т.д.
На мой взгляд, самым простым способом является «деплой» SPA-приложения на Netlify:
# установка CLI
yarn global add netlify-cli
# авторизация
netlify login
# деплой демо-версии
netlify deploy
# окончательный деплой
netlify deploy --prod
Имеется возможность продолжительной (длящейся) интеграции с Netlify репозитория, размещенного на Github.
Другие варианты «деплоя» смотрите здесь.
Возможно вам будет интересно:
— Шпаргалка по Jest с примерами кода.
— Шпаргалка по Redux с примерами кода (stylesheet).