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

GuDron · 17 Фев 2021

Для просмотра ссылки Войди или Зарегистрируйся

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

1
2
3

yarn create react-app my-app --template cra-template-typescript
# "cra-template" можно опустить
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
- ES7 React/Redux/GraphQL/React-Native snippets
- Prettier — Code formatter
Расширения для Google Chrome
- React Developer Tools
- Redux DevTools

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

1
2
3
4
5
6
7
8

"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:

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

GuDron · 17 Фев 2021

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

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

1
2
3
4
5
6
7
8
9
10
11

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 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:

1

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

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

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

1
2
3
4
5
6

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

1
2
3

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

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

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

1
2
3
4
5

REACT_APP_TITLE="Some title"
REACT_APP_DESCRIPTION="Some description"
REACT_APP_BASE_URL=Для просмотра ссылки Войди или Зарегистрируйся
# расширение переменной
REACT_APP_IMG_URL=$REACT_APP_BASE_URL/img/

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

1
2
3

<title>%REACT_APP_TITLE%</title>
<meta name="description" content="%REACT_APP_DESCRIPTION%" />

1

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

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

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.

По умолчанию все запросы отправляются к серверу, на котором запущено приложение (Для просмотра ссылки Войди или Зарегистрируйся). Для перенаправления запросов к серверу, использующему другой порт, необходимо добавить в файл 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>Для просмотра ссылки Войди или Зарегистрируйся<span class="pl-pds">"</span></span>

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

1	yarn add http-proxy-middleware

1
2
3
4
5
6
7
8
9
10
11

const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'Для просмотра ссылки Войди или Зарегистрируйся',
changeOrigin: true,
})
)
}

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

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

1
2
3
4
5
6
7
8

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

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

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

GuDron

dumpz.ws