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

Описание

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

Настройки 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,

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

Для разработки компонентов в изоляции рекомендуется использовать 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, автоматически добавляющего вендорные префиксы.https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-5265008544060842&output=html&h=174&slotname=6021157728&adk=3009603515&adf=1874954860&pi=t.ma~as.6021157728&w=696&fwrn=4&lmt=1613381840&rafmt=11&psa=1&format=696×174&url=https%3A%2F%2Fbookflow.ru%2Fshpargalka-po-create-react-app%2F&flash=0&host=ca-host-pub-2644536267352236&wgl=1&dt=1643201691432&bpp=5&bdt=1187&idt=759&shv=r20220120&mjsv=m202201200301&ptt=9&saldr=aa&abxe=1&cookie=ID%3D53d09eedf053366f-22c28a372bcd0013%3AT%3D1643201667%3ART%3D1643201667%3AS%3DALNI_Mb1ucFagtDc-cmhxjeor_SzpI1WJQ&prev_fmts=0x0%2C1164x280%2C324x250%2C324x73%2C1349x615%2C728x90&nras=5&correlator=1229086841436&frm=20&pv=1&ga_vid=1863745948.1643201692&ga_sid=1643201692&ga_hid=1103373832&ga_fc=0&rplot=4&u_tz=120&u_his=1&u_h=768&u_w=1366&u_ah=728&u_aw=1366&u_cd=24&u_sd=1&adx=141&ady=5352&biw=1349&bih=615&scr_x=0&scr_y=2920&eid=31063751%2C44750774%2C44753738%2C31064036&oid=2&psts=AGkb-H9l4DLF0MRsY_ew1JmBXyQPRjdlClZJFvA9fzNhMQd26koMoMeqnnsQ3rN-0YeVZzIMUGLnD0MaPjtN%2CAGkb-H9xbXGskUXjFKaF8K9O-gPMN7p3KV6q3j5Xy8C093qwe5RpJmEii4ZtUDJAESfESsbtruPtSSq04KteEQ%2CAGkb-H-52b7JrIGazoqU8CVZdD8ZCWUFSsJoLfd1iUTXBCcycgh41Q0RokohG89BnW5ZOeM2Tx3GHquLsAHLrQ%2CAGkb-H8oN61Lh6lZXyn27vkOinY4_FeZRBUqnqJ9jQJ7GUhZXwueXisAfEKxIR_oP_IqrHCtzHoulpYKvQ&pvsid=2056912092083785&pem=199&tmod=28635716&nvt=1&eae=0&fc=1920&brdim=-8%2C-8%2C-8%2C-8%2C1366%2C0%2C1382%2C744%2C1366%2C615&vis=1&rsz=%7C%7CoeEbr%7C&abl=CS&pfx=0&fu=128&bc=31&ifi=2&uci=a!2&btvi=3&fsb=1&xpc=WLQ07LKCdT&p=https%3A//bookflow.ru&dtd=M

При большом количестве статических ресурсов, их можно поместить в директорию 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.

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