Шпаргалка по Create React App (Create react app cheatsheet)
Описание
Create react app (CRA) — это интерфейс командной строки (command line interface, CLI), позволяющий создавать предварительно настроенные React-проекты. Предварительная настройка включает в себя, но не исчерпывается, настройкой Webpack и Babel.
Создание и запуск проекта
«my-app» — произвольное название проекта.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | yarn create react-app my-app <span class="pl-c"># или</span> npm init react-app my-app <span class="pl-c"># или</span> npx create-react-app my-app <span class="pl-c"># смена директории</span> <span class="pl-c1">cd</span> my-app <span class="pl-c"># запуск в режиме разработки</span> yarn start <span class="pl-c"># или</span> npm run start <span class="pl-c"># производственная сборка</span> yarn build <span class="pl-c"># или</span> npm run build |
Флаг «—template» используется для выбора шаблона проекта.
1 2 3 | yarn create react-app my-app --template cra-template-typescript <span class="pl-c"># "cra-template" можно опустить</span> yarn create my-app --template typescript |
Имеется возможность создавать собственные шаблоны.
Структура проекта
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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):
1 2 3 4 5 6 7 8 | <span class="pl-s"><span class="pl-pds">"</span>editor.defaultFormatter<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>esbenp.prettier-vscode<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>prettier.endOfLine<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>auto<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>prettier.jsxSingleQuote<span class="pl-pds">"</span></span>: <span class="pl-c1">true</span>, <span class="pl-s"><span class="pl-pds">"</span>prettier.packageManager<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>yarn<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>prettier.singleQuote<span class="pl-pds">"</span></span>: <span class="pl-c1">true</span>, <span class="pl-s"><span class="pl-pds">"</span>prettier.semi<span class="pl-pds">"</span></span>: <span class="pl-c1">false</span>, <span class="pl-s"><span class="pl-pds">"</span>prettier.trailingComma<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>none<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>prettier.useEditorConfig<span class="pl-pds">"</span></span>: <span class="pl-c1">false</span>, |
Полный список настроек смотрите здесь.
Для разработки компонентов в изоляции рекомендуется использовать Storybook:
1 | 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'". Выполняем анализ:
1 2 | yarn build yarn analyze |
Стили и другие статические ресурсы
Поскольку для сборки проекта используется Вебпак, все статические ресурсы (стили, изображения, шрифты и т.д.) должны импортироваться в JavaScript-файлы:
1 2 3 4 5 6 7 8 9 10 11 | <span class="pl-c1">/</span><span class="pl-c1">/</span> But<span class="pl-k">to</span>n.<span class="pl-c1">css</span> или <span class="pl-ent">Button</span>.<span class="pl-c1">modules</span>.<span class="pl-c1">css</span> <span class="pl-k">@font-face</span> { <span class="pl-c1">font-family</span>: <span class="pl-s">'Montserrat'</span>; <span class="pl-c1">src</span>: <span class="pl-en">url</span>(<span class="pl-s">'./Montserrat-Regular.ttf'</span>); } .<span class="pl-c1">btn</span> { <span class="pl-c1">padding</span>: <span class="pl-c1">0.25<span class="pl-smi">em</span></span> <span class="pl-c1">0.75<span class="pl-smi">em</span></span>; <span class="pl-c1">font-family</span>: <span class="pl-s">'Montserrat'</span><span class="pl-kos">,</span> sans-serif; <span class="pl-c1">font-size</span>: <span class="pl-c1">1.25<span class="pl-smi">em</span></span>; <span class="pl-c1">color</span>: <span class="pl-pds"><span class="pl-kos">#</span>1c1c1c</span>; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="pl-c">// Button.js</span> <span class="pl-k">import</span> <span class="pl-s">'./Montserrat-Regular.ttf'</span> <span class="pl-k">import</span> <span class="pl-s">'./Button.css'</span> <span class="pl-c">// или</span> <span class="pl-k">import</span> <span class="pl-s1">styles</span> <span class="pl-k">from</span> <span class="pl-s">'./Button.module.css'</span> <span class="pl-k">import</span> <span class="pl-s1">likeImg</span> <span class="pl-k">from</span> <span class="pl-s">'./like.png'</span> <span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">function</span> <span class="pl-v">Button</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-kos">(</span> <span class="pl-c1"><</span><span class="pl-ent">button</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"btn"</span> <span class="pl-c">/*или*/</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">styles</span><span class="pl-kos">.</span><span class="pl-c1">btn</span><span class="pl-kos">}</span> <span class="pl-c1">></span> <span class="pl-c1"><</span><span class="pl-ent">img</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"btn_like"</span> <span class="pl-c1">src</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">likeImg</span><span class="pl-kos">}</span> <span class="pl-c1">alt</span><span class="pl-c1">=</span><span class="pl-s">"like"</span> /<span class="pl-c1">></span> <span class="pl-c1"><</span>/<span class="pl-ent">button</span><span class="pl-c1">></span> <span class="pl-kos">)</span> <span class="pl-kos">}</span> |
Для стилизации также можно использовать специальные библиотеки, например, styled-components. Шпаргалку по работе с данной библиотекой смотрите здесь.
Для сброса стилей в index.css нужно добавить строку @import-normalize;.
При сборке проекта CSS автоматически минифицируется и обрабатывается с помощью autoprefixer, автоматически добавляющего вендорные префиксы.
При большом количестве статических ресурсов, их можно поместить в директорию public. Ссылка на такие файлы делается с помощью process.env.PUBLIC_URL:
1 | <<span class="pl-ent">img</span> <span class="pl-e">src</span><span class="pl-k">=</span><span class="pl-pse">{</span><span class="pl-c1">process</span><span class="pl-k">.</span><span class="pl-c1">env</span><span class="pl-k">.</span><span class="pl-c1">PUBLIC_URL</span> <span class="pl-k">+</span> <span class="pl-s"><span class="pl-pds">'</span>/img/logo.png<span class="pl-pds">'</span></span><span class="pl-pse">}</span> /> |
Обратите внимание: такие файлы не будут обрабатываться Вебпаком.
Абсолютный путь
Для использования абсолютных путей при импорте компонентов, необходимо в корневой директории (my-app) создать файл jsconfig.json или tsconfig.json (при использовании TypeScript) следующего содержания:
1 2 3 4 5 6 | { <span class="pl-s"><span class="pl-pds">"</span>compilerOptions<span class="pl-pds">"</span></span>: { <span class="pl-s"><span class="pl-pds">"</span>baseUrl<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>src<span class="pl-pds">"</span></span> }, <span class="pl-s"><span class="pl-pds">"</span>include<span class="pl-pds">"</span></span>: [<span class="pl-s"><span class="pl-pds">"</span>src<span class="pl-pds">"</span></span>] } |
1 2 3 | <span class="pl-k">import</span> <span class="pl-smi">Button</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>components/Button<span class="pl-pds">'</span></span>; <span class="pl-c">// вместо</span> <span class="pl-k">import</span> <span class="pl-smi">Button</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>../../components/Button<span class="pl-pds">'</span></span>; |
Пользовательские переменные среды окружения
Самый простой способ определения «кастомных» переменных среды окружения состоит в создании файла .env в корневой директории (my-app):
1 2 3 4 5 | REACT_APP_TITLE=<span class="pl-s"><span class="pl-pds">"</span>Some title<span class="pl-pds">"</span></span> REACT_APP_DESCRIPTION=<span class="pl-s"><span class="pl-pds">"</span>Some description<span class="pl-pds">"</span></span> REACT_APP_BASE_URL=http://example.com/ <span class="pl-c"># расширение переменной</span> REACT_APP_IMG_URL=<span class="pl-smi">$REACT_APP_BASE_URL</span>/img/ |
Такие переменные должны начинаться с REACT_APP.
Использование:
1 2 3 | <span class="pl-c"><!-- public/index.html --></span> <span class="pl-kos"><</span><span class="pl-ent">title</span><span class="pl-kos">></span>%REACT_APP_TITLE%<span class="pl-kos"></</span><span class="pl-ent">title</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">meta</span> <span class="pl-c1">name</span>="<span class="pl-s">description</span>" <span class="pl-c1">content</span>="<span class="pl-s">%REACT_APP_DESCRIPTION%</span>" /> |
1 | <<span class="pl-ent">img</span> <span class="pl-e">src</span><span class="pl-k">=</span><span class="pl-pse">{</span><span class="pl-k">`</span><span class="pl-k">${</span><span class="pl-c1">process</span><span class="pl-k">.</span><span class="pl-c1">env</span><span class="pl-k">.</span><span class="pl-c1">REACT_APP_IMG_URL</span><span class="pl-k">}</span><span class="pl-s">/logo.png</span><span class="pl-k">`</span><span class="pl-pse">}</span> /> |
Значения переменных заменяются при сборке проекта.
Прогрессивное приложение
CRA позволяет легко создавать прогрессивные веб-приложения:
1 | yarn create react-app my-app --template pwa |
1 2 | <span class="pl-c">// src/index.js</span> <span class="pl-smi">serviceWorker</span><span class="pl-k">.</span><span class="pl-en">register</span>(); |
Обратите внимание: регистрацию сервис-воркера следует запускать только при сборке проекта.
Проксирование (перенаправление запросов), шпаргалка по Create React App.
По умолчанию все запросы отправляются к серверу, на котором запущено приложение (http://localhost:3000). Для перенаправления запросов к серверу, использующему другой порт, необходимо добавить в файл package.json следующую строку:
1 | <span class="pl-s"><span class="pl-pds">"</span>proxy<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>http://localhost:5000<span class="pl-pds">"</span></span> |
Также можно воспользоваться специальной библиотекой:
1 | yarn add http-proxy-middleware |
1 2 3 4 5 6 7 8 9 10 11 | <span class="pl-k">const</span> { <span class="pl-smi">createProxyMiddleware</span> } <span class="pl-k">=</span> <span class="pl-c1">require</span>(<span class="pl-s"><span class="pl-pds">'</span>http-proxy-middleware<span class="pl-pds">'</span></span>) <span class="pl-c1">module</span><span class="pl-k">.</span><span class="pl-c1">exports</span> <span class="pl-k">=</span> <span class="pl-k">function</span>(<span class="pl-smi">app</span>) { <span class="pl-smi">app</span><span class="pl-k">.</span><span class="pl-en">use</span>( <span class="pl-s"><span class="pl-pds">'</span>/api<span class="pl-pds">'</span></span>, <span class="pl-en">createProxyMiddleware</span>({ <span class="pl-c1"><span class="pl-s">target</span>:</span> <span class="pl-s"><span class="pl-pds">'</span>http://localhost:5000<span class="pl-pds">'</span></span>, <span class="pl-c1"><span class="pl-s">changeOrigin</span>:</span> <span class="pl-c1">true</span>, }) ) } |
Шпаргалка по Create React App. Разворачивание (деплой) проекта.
Существует множество различных вариантов разворачивания приложения. Это можно сделать как локально, так и с помощью генераторов статических сайтов, таких как Netlify, Heroku, Vercel и т.д.
На мой взгляд, самым простым способом является «деплой» SPA-приложения на Netlify:
1 2 3 4 5 6 7 8 | <span class="pl-c"># установка CLI</span> yarn global add netlify-cli <span class="pl-c"># авторизация</span> netlify login <span class="pl-c"># деплой демо-версии</span> netlify deploy <span class="pl-c"># окончательный деплой</span> netlify deploy --prod |
Имеется возможность продолжительной (длящейся) интеграции с Netlify репозитория, размещенного на Github.
Другие варианты «деплоя» смотрите здесь.
Возможно вам будет интересно:
— Шпаргалка по Jest с примерами кода.
— Шпаргалка по Redux с примерами кода (stylesheet).
![Хрестоматия iOS паттернов. [Дима Малеев]](https://bookflow.ru/wp-content/uploads/2017/11/Khrestomatiya-iOS-patternov-100x70.jpg "Хрестоматия iOS паттернов. [Дима Малеев]")
