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

Описание

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

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

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

123456789101112131415161718

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» используется для выбора шаблона проекта.

123	yarn create react-app my-app –template cra-template-typescript<span class=”pl-c”># “cra-template” можно опустить</span>yarn create my-app –template typescript

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

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

12345678910111213141516171819202122

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
- ES7 React/Redux/GraphQL/React-Native snippets
- Prettier — Code formatter
Расширения для Google Chrome
- React Developer Tools
- Redux DevTools

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

12345678

”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,

Полный список настроек смотрите здесь.https://yastatic.net/safeframe-bundles/0.80/1-1-0/protected/render.html

Для разработки компонентов в изоляции рекомендуется использовать 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'". Выполняем анализ:

12	yarn buildyarn analyze

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

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

1234567891011

// 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;}

123456789101112131415

// Button.jsimport ’./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, автоматически добавляющего вендорные префиксы.https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-5265008544060842&output=html&h=174&slotname=6021157728&adk=3009603515&adf=4291379345&pi=t.ma~as.6021157728&w=696&fwrn=4&lmt=1613381840&rafmt=11&tp=site_kit&psa=1&format=696×174&url=https%3A%2F%2Fbookflow.ru%2Fshpargalka-po-create-react-app%2F&flash=0&wgl=1&adsid=ChEI8PHAhgYQ9Jjr6J2ExqPgARJMAI4vGIiqH4ah_Fy5XdjRX0WjO_ppiV-0I9YFkXFu34r4CJ04V5tdSwG_cwOX9hvu3gpk9bBibYwKcvI70h_O9B4hb-pjQcmnyZUCfA&uach=WyJXaW5kb3dzIiwiMTAuMCIsIng4NiIsIiIsIjkxLjAuNDQ3Mi4xMDYiLFtdXQ..&dt=1624275647972&bpp=60&bdt=770&idt=865&shv=r20210616&cbv=%2Fr20110914&ptt=9&saldr=aa&abxe=1&cookie=ID%3D6743a4d5726e8698-22b0e3801dc80040%3AT%3D1621872912%3ART%3D1621872912%3AS%3DALNI_MYsDLDw-OY4dK_E-l9g4cMH2sxZEw&prev_fmts=0x0%2C728x90%2C1164x280%2C1349x625%2C324x250&nras=4&correlator=7304430896407&frm=20&pv=1&ga_vid=1634037921.1624275648&ga_sid=1624275648&ga_hid=1575286688&ga_fc=0&rplot=4&u_tz=180&u_his=1&u_java=0&u_h=768&u_w=1366&u_ah=728&u_aw=1366&u_cd=24&u_nplug=3&u_nmime=4&adx=141&ady=4368&biw=1349&bih=625&scr_x=0&scr_y=1877&eid=42530672%2C31060975%2C31060840&oid=3&psts=AGkb-H_ADrREQnKdPLqOZQwTnTjkXqz8RySzgqPXmgIN7tPrrtw6kwEUVanzUVbsS1ZQCAtLE0HmI9FRELqGwvus%2CAGkb-H8TWD2Sd_L3ezz7lFwzh6WKJXVvXByl16sNUvvviztMGHBIcmW6mJh1dWEDdN0nnKfbB4YZGx_2UOtv&pvsid=874014744254892&pem=314&eae=0&fc=1920&brdim=0%2C0%2C0%2C0%2C1366%2C0%2C1366%2C728%2C1366%2C625&vis=1&rsz=%7C%7CoeEbr%7C&abl=CS&pfx=0&fu=128&bc=31&jar=2021-06-19-17&ifi=4&uci=a!4&btvi=2&fsb=1&xpc=pkLcjiA0qJ&p=https%3A//bookflow.ru&dtd=78757

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

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

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

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

123456

{ ”compilerOptions”: { ”baseUrl”: ”src” }, ”include”: [”src”]}

123

import Button from 'components/Button';// вместоimport Button from '../../components/Button';

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

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

12345

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.

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

123

<!– public/index.html –><title>%REACT_APP_TITLE%</title><meta name=”description” content=”%REACT_APP_DESCRIPTION%” />

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

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

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

1	yarn create react-app my-app –template pwa

12	<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

1234567891011

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:

12345678

# установка CLIyarn global add netlify-cli# авторизацияnetlify login# деплой демо-версииnetlify deploy# окончательный деплойnetlify deploy –prod

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

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

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

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

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