react chat
1.0.0
Этот проект был запущен с помощью приложения Create React.
Ниже вы найдете некоторую информацию о том, как выполнять распространенные задачи.
Вы можете найти самую последнюю версию этого руководства здесь.
<title>public папкиpublic папку.env<meta> на сервереnpm start не обнаруживает измененийnpm test зависает на macOS Sierranpm run build слишком раноnpm run build на Herokunpm run build не может минимизироватьПриложение Create React разделено на два пакета:
create-react-app — это глобальная утилита командной строки, которую вы используете для создания новых проектов.react-scripts — это зависимость разработки в сгенерированных проектах (включая этот). Вам практически никогда не понадобится обновлять сам create-react-app : он делегирует всю настройку react-scripts .
Когда вы запускаете create-react-app , он всегда создает проект с последней версией react-scripts , поэтому вы автоматически получаете все новые функции и улучшения во вновь созданных приложениях.
Чтобы обновить существующий проект до новой версии react-scripts , откройте журнал изменений, найдите текущую версию (проверьте package.json в этой папке, если вы не уверены) и примените инструкции по миграции для более новой версии. версии.
В большинстве случаев достаточно добавить версию react-scripts в package.json и запустить npm install в этой папке, но полезно просмотреть журнал изменений на предмет потенциальных критических изменений.
Мы обязуемся свести критические изменения к минимуму, чтобы вы могли безболезненно обновлять react-scripts .
Мы всегда открыты для ваших отзывов.
После создания ваш проект должен выглядеть так:
my-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
Для сборки проекта эти файлы должны существовать с точными именами :
public/index.html — шаблон страницы;src/index.js — это точка входа JavaScript.Вы можете удалить или переименовать другие файлы.
Вы можете создавать подкаталоги внутри src . Для более быстрого восстановления Webpack обрабатывает только файлы внутри src .
Вам нужно поместить любые файлы JS и CSS в src , иначе Webpack их не увидит.
Из public/index.html можно использовать только файлы внутри public .
Прочтите инструкции ниже по использованию ресурсов JavaScript и HTML.
Однако вы можете создать больше каталогов верхнего уровня.
Они не будут включены в производственную сборку, поэтому вы можете использовать их, например, для документации.
В каталоге проекта вы можете запустить:
npm start Запускает приложение в режиме разработки.
Откройте http://localhost:3000, чтобы просмотреть его в браузере.
Страница перезагрузится, если вы внесете изменения.
Вы также увидите любые ошибки в консоли.
npm test Запускает тест-раннер в режиме интерактивного просмотра.
Дополнительную информацию смотрите в разделе о запуске тестов.
npm run build Собирает приложение для производства в папке build .
Он правильно объединяет React в производственном режиме и оптимизирует сборку для достижения наилучшей производительности.
Сборка минимизирована, а имена файлов включают хеши.
Ваше приложение готово к развертыванию!
Дополнительные сведения см. в разделе о развертывании.
npm run eject Примечание: это односторонняя операция. После того, как вы eject , вы не сможете вернуться!
Если вас не устраивает инструмент сборки и варианты конфигурации, вы можете eject в любое время. Эта команда удалит из вашего проекта единственную зависимость сборки.
Вместо этого он скопирует все файлы конфигурации и транзитивные зависимости (Webpack, Babel, ESLint и т. д.) прямо в ваш проект, чтобы вы имели полный контроль над ними. Все команды, кроме eject по-прежнему будут работать, но они будут указывать на скопированные сценарии, чтобы вы могли их настроить. На данный момент вы сами по себе.
Вам не обязательно использовать eject . Рекомендуемый набор функций подходит для небольших и средних развертываний, и вы не должны чувствовать себя обязанным использовать эту функцию. Однако мы понимаем, что этот инструмент не будет полезен, если вы не сможете настроить его, когда будете к этому готовы.
По умолчанию сгенерированный проект использует последнюю версию React.
Вы можете обратиться к документации React для получения дополнительной информации о поддерживаемых браузерах.
Этот проект поддерживает расширенный набор новейшего стандарта JavaScript.
В дополнение к функциям синтаксиса ES6 он также поддерживает:
Узнайте больше о различных этапах предложения.
Хотя мы рекомендуем использовать экспериментальные предложения с некоторой осторожностью, Facebook активно использует эти функции в коде продукта, поэтому мы намерены предоставлять кодовые моды, если какое-либо из этих предложений изменится в будущем.
Обратите внимание, что проект включает лишь несколько полифилов ES6 :
Object.assign() через object-assign .Promise через promise .fetch() через whatwg-fetch . Если вы используете какие-либо другие функции ES6+, требующие поддержки во время выполнения (например, Array.from() или Symbol ), убедитесь, что вы вручную включаете соответствующие полифилы или что браузеры, на которые вы ориентируетесь, уже поддерживают их.
Также обратите внимание, что использование некоторых новых синтаксических функций, таких как for...of или [...nonArrayValue] приводит к тому, что Babel генерирует код, который зависит от функций среды выполнения ES6 и может не работать без полифила. Если у вас есть сомнения, используйте Babel REPL, чтобы увидеть, во что компилируется конкретный синтаксис.
Чтобы настроить подсветку синтаксиса в вашем любимом текстовом редакторе, перейдите на соответствующую страницу документации Babel и следуйте инструкциям. Описаны некоторые из наиболее популярных редакторов.
Примечание. Эта функция доступна в
[email protected]и выше.
Он также работает только с npm 3 или выше.
Некоторые редакторы, включая Sublime Text, Atom и Visual Studio Code, предоставляют плагины для ESLint.
Для линтинга они не нужны. Вы должны увидеть вывод линтера прямо в терминале, а также в консоли браузера. Однако, если вы предпочитаете, чтобы результаты проверки отображались прямо в вашем редакторе, вы можете выполнить некоторые дополнительные действия.
Сначала вам необходимо установить плагин ESLint для вашего редактора. Затем добавьте файл с именем .eslintrc в корень проекта:
{
"extends" : "react-app"
}Теперь ваш редактор должен сообщить о предупреждениях о линтинге.
Обратите внимание: даже если вы продолжите редактировать файл .eslintrc , эти изменения повлияют только на интеграцию редактора . Они не повлияют на вывод терминала и браузера. Это связано с тем, что приложение Create React намеренно предоставляет минимальный набор правил, позволяющих обнаруживать типичные ошибки.
Если вы хотите обеспечить соблюдение стиля кодирования для своего проекта, рассмотрите возможность использования Prettier вместо правил стиля ESLint.
Эта функция в настоящее время поддерживается только Visual Studio Code и WebStorm.
Visual Studio Code и WebStorm сразу поддерживают отладку с помощью Create React App. Это позволяет вам как разработчику писать и отлаживать код React, не выходя из редактора, и, что наиболее важно, это позволяет вам иметь непрерывный рабочий процесс разработки, в котором переключение контекста минимально, поскольку вам не нужно переключаться между инструментами.
Вам потребуется установить последнюю версию VS Code и расширения VS Code Chrome Debugger Extension.
Затем добавьте приведенный ниже блок в файл launch.json и поместите его в папку .vscode в корневом каталоге вашего приложения.
{
"version" : " 0.2.0 " ,
"configurations" : [{
"name" : " Chrome " ,
"type" : " chrome " ,
"request" : " launch " ,
"url" : " http://localhost:3000 " ,
"webRoot" : " ${workspaceRoot}/src " ,
"sourceMapPathOverrides" : {
"webpack:///src/*" : " ${webRoot}/* "
}
}]
}Примечание. URL-адрес может отличаться, если вы внесли изменения с помощью переменных среды HOST или PORT.
Запустите приложение, запустив npm start , и начните отладку в VS Code, нажав F5 или щелкнув зеленый значок отладки. Теперь вы можете писать код, устанавливать точки останова, вносить изменения в код и отлаживать только что измененный код — и все это из вашего редактора.
Возникли проблемы с отладкой кода VS? Пожалуйста, ознакомьтесь с их руководством по устранению неполадок.
Вам потребуется установить расширение Chrome WebStorm и JetBrains IDE Support.
В меню WebStorm Run выберите Edit Configurations... . Затем нажмите + и выберите JavaScript Debug . Вставьте http://localhost:3000 в поле URL-адреса и сохраните конфигурацию.
Примечание. URL-адрес может отличаться, если вы внесли изменения с помощью переменных среды HOST или PORT.
Запустите приложение, запустив npm start , затем нажмите ^D в macOS или F9 в Windows и Linux или щелкните зеленый значок отладки, чтобы начать отладку в WebStorm.
Точно так же вы можете отлаживать свое приложение в IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro и RubyMine.
Prettier — это авторитетный форматировщик кода с поддержкой JavaScript, CSS и JSON. С помощью Prettier вы можете автоматически форматировать код, который вы пишете, чтобы обеспечить стиль кода в вашем проекте. Посетите страницу Prettier на GitHub для получения дополнительной информации и посмотрите эту страницу, чтобы увидеть ее в действии.
Чтобы форматировать наш код всякий раз, когда мы делаем коммит в git, нам необходимо установить следующие зависимости:
npm install --save husky lint-staged prettier Альтернативно вы можете использовать yarn :
yarn add husky lint-staged prettierhusky позволяет легко использовать githooks, как если бы это были скрипты npm.lint-staged позволяет нам запускать сценарии для проиндексированных файлов в git. Прочитайте эту публикацию в блоге о lint-staged, чтобы узнать больше об этом.prettier — это форматировщик JavaScript, который мы будем запускать перед фиксацией. Теперь мы можем убедиться, что каждый файл отформатирован правильно, добавив несколько строк в package.json в корне проекта.
Добавьте следующую строку в раздел scripts :
"scripts": {
+ "precommit": "lint-staged",
"start": "react-scripts start",
"build": "react-scripts build", Затем мы добавляем поле «lint-staged» в package.json , например:
"dependencies": {
// ...
},
+ "lint-staged": {
+ "src/**/*.{js,jsx,json,css}": [
+ "prettier --single-quote --write",
+ "git add"
+ ]
+ },
"scripts": { Теперь, когда вы делаете фиксацию, Prettier автоматически форматирует измененные файлы. Вы также можете запустить ./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx,json,css}" чтобы впервые отформатировать весь проект.
Затем вы можете интегрировать Prettier в свой любимый редактор. Прочтите раздел «Интеграция редактора» на странице Prettier GitHub.
<title> Исходный HTML-файл можно найти в public папке созданного проекта. Вы можете отредактировать в нем тег <title> , чтобы изменить заголовок с «React App» на любой другой.
Обратите внимание, что обычно вы нечасто редактируете файлы в public папке. Например, добавление таблицы стилей выполняется без изменения HTML.
Если вам нужно динамически обновлять заголовок страницы на основе содержимого, вы можете использовать API-интерфейс document.title браузера. Для более сложных сценариев, когда вы хотите изменить заголовок компонентов React, вы можете использовать React Helmet, стороннюю библиотеку.
Если вы используете собственный сервер для своего приложения в производстве и хотите изменить заголовок перед его отправкой в браузер, вы можете следовать советам в этом разделе. Альтернативно, вы можете предварительно создать каждую страницу в виде статического HTML-файла, который затем загружает пакет JavaScript, описанный здесь.
Сгенерированный проект включает React и ReactDOM в качестве зависимостей. Он также включает набор скриптов, используемых Create React App в качестве зависимости для разработки. Вы можете установить другие зависимости (например, React Router) с помощью npm :
npm install --save react-router Альтернативно вы можете использовать yarn :
yarn add react-router Это работает для любой библиотеки, а не только для react-router .
Эта установка проекта поддерживает модули ES6 благодаря Babel.
Хотя вы по-прежнему можете использовать require() и module.exports , мы рекомендуем вместо этого использовать import и export .
Например:
Button.js import React , { Component } from 'react' ;
class Button extends Component {
render ( ) {
// ...
}
}
export default Button ; // Don’t forget to use export default!DangerButton.js import React , { Component } from 'react' ;
import Button from './Button' ; // Import a component from another file
class DangerButton extends Component {
render ( ) {
return < Button color = "red" /> ;
}
}
export default DangerButton ;Помните о разнице между экспортом по умолчанию и именованным экспортом. Это частый источник ошибок.
Мы предлагаем вам использовать импорт и экспорт по умолчанию, когда модуль экспортирует только одну вещь (например, компонент). Это то, что вы получаете, когда используете export default Button и import Button from './Button' .
Именованный экспорт полезен для служебных модулей, экспортирующих несколько функций. Модуль может иметь не более одного экспорта по умолчанию и столько именованных экспортов, сколько вам нужно.
Узнайте больше о модулях ES6:
Вместо загрузки всего приложения до того, как пользователи смогут его использовать, разделение кода позволяет разделить код на небольшие фрагменты, которые затем можно загружать по требованию.
Эта настройка проекта поддерживает разделение кода с помощью динамического import() . Его предложение находится на этапе 3. Форма, подобная функции import() принимает имя модуля в качестве аргумента и возвращает Promise , которое всегда разрешается в объект пространства имен модуля.
Вот пример:
moduleA.js const moduleA = 'Hello' ;
export { moduleA } ;App.js import React , { Component } from 'react' ;
class App extends Component {
handleClick = ( ) => {
import ( './moduleA' )
. then ( ( { moduleA } ) => {
// Use moduleA
} )
. catch ( err => {
// Handle failure
} ) ;
} ;
render ( ) {
return (
< div >
< button onClick = { this . handleClick } > Load </ button >
</ div >
) ;
}
}
export default App ; Это превратит moduleA.js и все его уникальные зависимости в отдельный фрагмент, который загружается только после того, как пользователь нажмет кнопку «Загрузить».
Вы также можете использовать его с синтаксисом async / await , если хотите.
Если вы используете React Router, ознакомьтесь с этим руководством о том, как использовать с ним разделение кода. Вы можете найти сопутствующий репозиторий GitHub здесь.
Также ознакомьтесь с разделом «Разделение кода» в документации React.
В этой настройке проекта для обработки всех ресурсов используется Webpack. Webpack предлагает собственный способ «расширения» концепции import за пределы JavaScript. Чтобы выразить зависимость файла JavaScript от файла CSS, вам необходимо импортировать CSS из файла JavaScript :
Button.css. Button {
padding : 20 px ;
}Button.js import React , { Component } from 'react' ;
import './Button.css' ; // Tell Webpack that Button.js uses these styles
class Button extends Component {
render ( ) {
// You can use them as regular CSS styles
return < div className = "Button" /> ;
}
}Для React это не требуется , но многие люди находят эту функцию удобной. О преимуществах этого подхода можно прочитать здесь. Однако вы должны знать, что это делает ваш код менее переносимым для других инструментов и сред сборки, чем Webpack.
В процессе разработки такое выражение зависимостей позволяет перезагружать стили на лету по мере их редактирования. В рабочей версии все файлы CSS будут объединены в один минимизированный файл .css в выходных данных сборки.
Если вас беспокоит использование семантики, специфичной для Webpack, вы можете поместить весь свой CSS прямо в src/index.css . Он по-прежнему будет импортирован из src/index.js , но вы всегда можете удалить этот импорт, если позже перейдете на другой инструмент сборки.
Эта настройка проекта минимизирует ваш CSS и автоматически добавляет к нему префиксы поставщиков через Autoprefixer, поэтому вам не нужно об этом беспокоиться.
Например, это:
. App {
display : flex;
flex-direction : row;
align-items : center;
}становится таким:
. App {
display : -webkit-box;
display : -ms-flexbox;
display : flex;
-webkit-box-orient : horizontal;
-webkit-box-direction : normal;
-ms-flex-direction : row;
flex-direction : row;
-webkit-box-align : center;
-ms-flex-align : center;
align-items : center;
}Если вам по какой-то причине необходимо отключить автопрефикс, следуйте этому разделу.
Как правило, мы не рекомендуем повторно использовать одни и те же классы CSS в разных компонентах. Например, вместо использования CSS-класса .Button в компонентах <AcceptButton> и <RejectButton> мы рекомендуем создать компонент <Button> с собственными стилями .Button , которые могут отображаться как <AcceptButton> , так и <RejectButton> (но не наследовать).
Следование этому правилу часто делает препроцессоры CSS менее полезными, поскольку такие функции, как примеси и вложение, заменяются композицией компонентов. Однако вы можете интегрировать препроцессор CSS, если считаете это полезным. В этом пошаговом руководстве мы будем использовать Sass, но вы также можете использовать Less или другую альтернативу.
Сначала давайте установим интерфейс командной строки для Sass:
npm install --save node-sass-chokidar Альтернативно вы можете использовать yarn :
yarn add node-sass-chokidar Затем в package.json добавьте в scripts следующие строки:
"scripts": {
+ "build-css": "node-sass-chokidar src/ -o src/",
+ "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",Примечание. Чтобы использовать другой препроцессор, замените команды
build-cssиwatch-cssсогласно документации вашего препроцессора.
Теперь вы можете переименовать src/App.css в src/App.scss и запустить npm run watch-css . Наблюдатель найдет каждый файл Sass в подкаталогах src и создаст рядом с ним соответствующий CSS-файл, в нашем случае перезаписав src/App.css . Поскольку src/App.js по-прежнему импортирует src/App.css , стили становятся частью вашего приложения. Теперь вы можете редактировать src/App.scss , и src/App.css будет создан заново.
Чтобы совместно использовать переменные между файлами Sass, вы можете использовать импорт Sass. Например, src/App.scss и другие файлы стилей компонентов могут включать @import "./shared.scss"; с определениями переменных.
Чтобы включить импорт файлов без использования относительных путей, вы можете добавить параметр --include-path к команде в package.json .
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
Это позволит вам выполнять импорт, например
@import ' styles/_colors.scss ' ; // assuming a styles directory under src/
@import ' nprogress/nprogress ' ; // importing a css file from the nprogress node module На этом этапе вы можете удалить все файлы CSS из системы управления версиями и добавить src/**/*.css в свой файл .gitignore . Обычно рекомендуется хранить продукты сборки вне системы контроля версий.
В качестве последнего шага вам может оказаться удобным автоматически запустить watch-css с помощью npm start и запустить build-css как часть npm run build . Вы можете использовать оператор && для последовательного выполнения двух сценариев. Однако не существует кроссплатформенного способа параллельного запуска двух скриптов, поэтому для этого установим пакет:
npm install --save npm-run-all Альтернативно вы можете использовать yarn :
yarn add npm-run-all Затем мы можем изменить сценарии start и build , включив в них команды препроцессора CSS:
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
- "start": "react-scripts start",
- "build": "react-scripts build",
+ "start-js": "react-scripts start",
+ "start": "npm-run-all -p watch-css start-js",
+ "build-js": "react-scripts build",
+ "build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
} Теперь запуск npm start и npm run build также создает файлы Sass.
Почему node-sass-chokidar ?
Сообщается, что node-sass имеет следующие проблемы:
Сообщается, что node-sass --watch имеет проблемы с производительностью в определенных условиях при использовании на виртуальной машине или с докером.
Бесконечная компиляция стилей # 1939
Сообщается, что node-sass имеет проблемы с обнаружением новых файлов в каталоге № 1891.
Здесь используется node-sass-chokidar поскольку он решает эти проблемы.
В Webpack использование статических ресурсов, таких как изображения и шрифты, работает аналогично CSS.
Вы можете import файл прямо в модуле JavaScript . Это говорит Webpack включить этот файл в пакет. В отличие от импорта CSS, импорт файла дает вам строковое значение. Это значение представляет собой последний путь, на который вы можете ссылаться в своем коде, например, как атрибут src изображения или href ссылки на PDF-файл.
Чтобы уменьшить количество запросов к серверу, при импорте изображений размером менее 10 000 байт вместо пути возвращается URI данных. Это относится к следующим расширениям файлов: bmp, gif, jpg, jpeg и png. Файлы SVG исключены из-за #1153.
Вот пример:
import React from 'react' ;
import logo from './logo.png' ; // Tell Webpack this JS file uses this image
console . log ( logo ) ; // /logo.84287d09.png
function Header ( ) {
// Import result is the URL of your image
return < img src = { logo } alt = "Logo" /> ;
}
export default Header ;Это гарантирует, что при сборке проекта Webpack правильно переместит изображения в папку сборки и предоставит нам правильные пути.
Это работает и в CSS:
. Logo {
background-image : url (. / logo.png);
} Webpack находит все относительные ссылки на модули в CSS (они начинаются с ./ ) и заменяет их конечными путями из скомпилированного пакета. Если вы допустите опечатку или случайно удалите важный файл, вы увидите ошибку компиляции, как и при импорте несуществующего модуля JavaScript. Окончательные имена файлов в скомпилированном пакете генерируются Webpack на основе хэшей контента. Если содержимое файла изменится в будущем, Webpack присвоит ему другое имя в рабочей среде, поэтому вам не придется беспокоиться о долгосрочном кэшировании ресурсов.
Обратите внимание, что это также специальная функция Webpack.
Для React это не требуется , но многим оно нравится (и React Native использует аналогичный механизм для изображений).
Альтернативный способ обработки статических ресурсов описан в следующем разделе.
public папкиПримечание. Эта функция доступна в
[email protected]и выше.
public папка содержит файл HTML, поэтому вы можете настроить его, например, для установки заголовка страницы. Тег <script> с скомпилированным кодом будет добавлен к нему автоматически в процессе сборки.
Вы также можете добавить в public папку другие ресурсы.
Обратите внимание, что вместо этого мы обычно рекомендуем вам import ресурсы в файлы JavaScript. Например, см. разделы о добавлении таблицы стилей и добавлении изображений и шрифтов. Этот механизм дает ряд преимуществ:
Однако есть аварийный люк , который вы можете использовать для добавления актива за пределы системы модулей.
Если вы поместите файл в public папку, он не будет обработан Webpack. Вместо этого он будет скопирован в папку сборки без изменений. Чтобы ссылаться на ресурсы в public папке, вам необходимо использовать специальную переменную PUBLIC_URL .
Внутри index.html вы можете использовать его следующим образом:
< link rel =" shortcut icon " href =" %PUBLIC_URL%/favicon.ico " > Только файлы внутри public папки будут доступны по префиксу %PUBLIC_URL% . Если вам нужно использовать файл из src или node_modules , вам придется скопировать его туда, чтобы явно указать свое намерение сделать этот файл частью сборки.
Когда вы запускаете npm run build , Create React App заменит %PUBLIC_URL% на правильный абсолютный путь, поэтому ваш проект будет работать, даже если вы используете маршрутизацию на стороне клиента или размещаете его по URL-адресу, отличному от root.
process.env.PUBLIC_URL коде JavaScript вы можете использоватьprocess.env.PUBLIC_URL для аналогичных целей:
render ( ) {
// Note: this is an escape hatch and should be used sparingly!
// Normally we recommend using `import` for getting asset URLs
// as described in “Adding Images and Fonts” above this section.
return < img src = { process . env . PUBLIC_URL + '/img/logo.png' } /> ;
}Имейте в виду недостатки этого подхода:
public папке не подвергается постобработке или минимизации.public папку Обычно мы рекомендуем импортировать таблицы стилей, изображения и шрифты из JavaScript. public папка полезна в качестве обходного пути в ряде менее распространенных случаев:
manifest.webmanifest .pace.js вне встроенного кода.<script> . Обратите внимание: если вы добавляете <script> , объявляющий глобальные переменные, вам также необходимо прочитать следующий раздел об их использовании.
Когда вы включаете в HTML-файл скрипт, определяющий глобальные переменные, и пытаетесь использовать одну из этих переменных в коде, линтер будет жаловаться, потому что не может видеть определение переменной.
Этого можно избежать, прочитав глобальную переменную явно из объекта window , например:
const $ = window . $ ;Это делает очевидным, что вы используете глобальную переменную намеренно, а не из-за опечатки.
Альтернативно, вы можете заставить линтер игнорировать любую строку, добавив после нее // eslint-disable-line .
Вам не обязательно использовать React Bootstrap вместе с React, но это популярная библиотека для интеграции Bootstrap с приложениями React. Если вам это нужно, вы можете интегрировать его с приложением Create React, выполнив следующие действия:
Установите React Bootstrap и Bootstrap из npm. React Bootstrap не включает Bootstrap CSS, поэтому его также необходимо установить:
npm install --save react-bootstrap bootstrap@3 Альтернативно вы можете использовать yarn :
yarn add react-bootstrap bootstrap@3 Импортируйте CSS Bootstrap и, при необходимости, CSS темы Bootstrap в начало файла src/index.js :
import 'bootstrap/dist/css/bootstrap.css' ;
import 'bootstrap/dist/css/bootstrap-theme.css' ;
// Put any other imports below so that CSS from your
// components takes precedence over default styles. Импортируйте необходимые компоненты React Bootstrap в файл src/App.js или файлы пользовательских компонентов:
import { Navbar , Jumbotron , Button } from 'react-bootstrap' ; Теперь вы готовы использовать импортированные компоненты React Bootstrap в иерархии компонентов, определенной в методе рендеринга. Вот пример App.js переделанного с использованием React Bootstrap.
Иногда вам может потребоваться настроить визуальные стили Bootstrap (или эквивалентного пакета).
Мы предлагаем следующий подход:
Вот пример добавления настроенного Bootstrap, который следует этим шагам.
Flow — это средство проверки статического типа, которое помогает писать код с меньшим количеством ошибок. Если вы новичок в этой концепции, ознакомьтесь с этим введением в использование статических типов в JavaScript.
Последние версии Flow готовы к работе с проектами Create React App.
Чтобы добавить Flow в проект Create React App, выполните следующие действия:
npm install --save flow-bin (или yarn add flow-bin )."flow": "flow" в раздел scripts вашего package.json .npm run flow init (или yarn flow init ), чтобы создать файл .flowconfig в корневом каталоге.// @flow ко всем файлам, в которых вы хотите ввести проверку (например, к src/App.js ). Теперь вы можете запустить npm run flow (или yarn flow ), чтобы проверить файлы на наличие ошибок типа. При желании вы можете использовать IDE, например Nuclide, для лучшей интеграции. В будущем мы планируем еще более тесно интегрировать его в приложение Create React.
Чтобы узнать больше о Flow, ознакомьтесь с его документацией.
Приложение Create React не предписывает конкретного решения маршрутизации, но React Router является самым популярным.
Чтобы добавить его, запустите:
npm install --save react-router-dom Альтернативно вы можете использовать yarn :
yarn add react-router-dom Чтобы попробовать, удалите весь код в src/App.js и замените его любым из примеров на веб-сайте. Базовый пример — хорошее место для начала.
Обратите внимание: перед развертыванием приложения вам может потребоваться настроить рабочий сервер для поддержки маршрутизации на стороне клиента.
Примечание. Эта функция доступна в
[email protected]и выше.
Ваш проект может использовать переменные, объявленные в вашей среде, как если бы они были объявлены локально в ваших файлах JS. По умолчанию для вас определены NODE_ENV и любые другие переменные среды, начинающиеся с REACT_APP_ .
Переменные среды внедряются во время сборки . Поскольку приложение Create React создает статический пакет HTML/CSS/JS, оно не может прочитать их во время выполнения. Чтобы прочитать их во время выполнения, вам необходимо загрузить HTML в память на сервере и заменить заполнители во время выполнения, как описано здесь. Альтернативно вы можете пересобрать приложение на сервере в любое время, когда вы их измените.
Примечание. Необходимо создать собственные переменные среды, начинающиеся с
REACT_APP_. Любые другие переменные, кромеNODE_ENVбудут игнорироваться, чтобы избежать случайного раскрытия на компьютере закрытого ключа, который может иметь то же имя. Изменение любых переменных среды потребует перезагрузки сервера разработки, если он работает.
Эти переменные среды будут определены для вас в process.env . Например, наличие переменной среды с именем REACT_APP_SECRET_CODE будет отображаться в вашем JS process.env.REACT_APP_SECRET_CODE .
Существует также специальная встроенная переменная среды под названием NODE_ENV . Вы можете прочитать его из process.env.NODE_ENV . Когда вы запускаете npm start , он всегда равен 'development' , когда вы запускаете npm test он всегда равен 'test' , а когда вы запускаете npm run build для создания производственного пакета, он всегда равен 'production' . Вы не можете переопределить NODE_ENV вручную. Это предотвращает случайное развертывание медленно разрабатываемой сборки в рабочей среде разработчиками.
Эти переменные среды могут быть полезны для отображения информации в зависимости от того, где развернут проект, или для использования конфиденциальных данных, находящихся вне контроля версий.
Во-первых, вам необходимо определить переменные среды. Например, предположим, что вы хотите использовать секрет, определенный в среде внутри <form> :
render ( ) {
return (
< div >
< small > You are running this application in < b > { process . env . NODE_ENV } </ b > mode. </ small >
< form >
< input type = "hidden" defaultValue = { process . env . REACT_APP_SECRET_CODE } />
</ form >
</ div >
) ;
} Во время сборки process.env.REACT_APP_SECRET_CODE будет заменен текущим значением переменной среды REACT_APP_SECRET_CODE . Помните, что переменная NODE_ENV будет установлена автоматически.
Когда вы загрузите приложение в браузере и проверите <input> , вы увидите, что для него установлено значение abcdef , а жирный текст покажет среду, предоставляемую при использовании npm start :
< div >
< small > You are running this application in < b > development </ b > mode. </ small >
< form >
< input type =" hidden " value =" abcdef " />
</ form >
</ div > Приведенная выше форма ищет переменную с именем REACT_APP_SECRET_CODE в среде. Чтобы использовать это значение, нам нужно определить его в среде. Это можно сделать двумя способами: либо в вашей оболочке, либо в файле .env . Оба эти способа описаны в следующих нескольких разделах.
Доступ к NODE_ENV также полезен для условного выполнения действий:
if ( process . env . NODE_ENV !== 'production' ) {
analytics . disable ( ) ;
} Когда вы компилируете приложение с помощью npm run build , на этапе минификации это условие будет удалено, и полученный пакет будет меньше.
Примечание. Эта функция доступна в
[email protected]и выше.
Вы также можете получить доступ к переменным среды, начинающимся с REACT_APP_ в файле public/index.html . Например:
< title > %REACT_APP_WEBSITE_NAME% </ title >Обратите внимание, что применимы предостережения из приведенного выше раздела:
NODE_ENV и PUBLIC_URL ), для работы имена переменных должны начинаться с REACT_APP_ .Определение переменных среды может различаться в зависимости от операционной системы. Также важно знать, что этот способ является временным на время сеанса оболочки.
set " REACT_APP_SECRET_CODE = abcdef " && npm start(Примечание. Кавычки вокруг присвоения переменной необходимы, чтобы избежать конечных пробелов.)
( $ env: REACT_APP_SECRET_CODE = " abcdef " ) -and (npm start)REACT_APP_SECRET_CODE=abcdef npm start.envПримечание. Эта функция доступна в
[email protected]и выше.
Чтобы определить постоянные переменные среды, создайте файл с именем .env в корне вашего проекта:
REACT_APP_SECRET_CODE=abcdef
Примечание. Необходимо создать собственные переменные среды, начинающиеся с
REACT_APP_. Любые другие переменные, кромеNODE_ENVбудут игнорироваться, чтобы избежать случайного раскрытия на компьютере закрытого ключа, который может иметь то же имя. Изменение любых переменных среды потребует перезагрузки сервера разработки, если он работает.
Файлы .env должны быть проверены в системе контроля версий (за исключением .env*.local ).
.env можно использовать?Примечание: эта функция доступна с помощью
[email protected]и выше .
.env : по умолчанию..env.local : локальные переопределения. Этот файл загружается для всех сред, кроме тестовой..env.development , .env.test , .env.production : настройки, зависящие от среды..env.development.local , .env.test.local , .env.production.local : локальные переопределения настроек, специфичных для среды.Файлы слева имеют больший приоритет, чем файлы справа:
npm start : .env.development.local , .env.development , .env.local , .envnpm run build : .env.production.local , .env.production , .env.local , .envnpm test : .env.test.local , .env.test , .env (обратите внимание, что .env.local отсутствует) Эти переменные будут действовать как значения по умолчанию, если машина явно не устанавливает их.
Пожалуйста, обратитесь к документации DOTENV для получения более подробной информации.
ПРИМЕЧАНИЕ. Если вы определяете переменные среды для разработки, ваш CI и/или хостинг, скорее всего, также понадобится их определить. Проконсультируйтесь с их документацией, как это сделать. Например, см. Документацию для Трэвиса CI или Heroku.
.envПримечание. Эта функция доступна с
[email protected]и выше.
Разверните переменные уже на вашем компьютере для использования в вашем файле .env (с помощью Dotenv-Expand).
Например, чтобы получить переменную среды npm_package_version :
REACT_APP_VERSION=$npm_package_version
# also works:
# REACT_APP_VERSION=${npm_package_version}
Или расширить переменные локально для текущего файла .env :
DOMAIN=www.example.com
REACT_APP_FOO=$DOMAIN/foo
REACT_APP_BAR=$DOMAIN/bar
Многие популярные библиотеки используют декораторы в своей документации.
Создание приложения React не поддерживает синтаксис декоратора в данный момент, потому что:
Однако во многих случаях вы можете переписать код на основе декоратора без декораторов так же хорошо.
Пожалуйста, обратитесь к этим двум потокам для справки:
Приложение Create React добавит поддержку декоратора, когда спецификация продвигается на стабильную стадию.
React не предписывает конкретный подход к извлечению данных, но люди обычно используют либо библиотеку, такую как Axios, или API fetch() предоставленный браузером. Удобно, чтобы создать приложение React включает в себя полифилл для fetch() поэтому вы можете использовать его, не беспокоясь о поддержке браузера.
Функция Global fetch позволяет легко выполнять запросы AJAX. Он принимает URL в качестве ввода и возвращает Promise , которое разрешается объекту Response . Вы можете найти больше информации о fetch здесь.
Этот проект также включает в себя полифилл перспективы, который обеспечивает полную реализацию обещаний/A+. Обещание представляет собой возможный результат асинхронной операции, вы можете найти больше информации о обещаниях здесь и здесь. И Axios, и fetch() используют обещания под капотом. Вы также можете использовать синтаксис async / await , чтобы уменьшить гнездование обратного вызова.
Вы можете узнать больше о том, чтобы сделать запросы AJAX из Creact Components в записи FAQ на веб -сайте React.
Эти учебники помогут вам интегрировать ваше приложение с помощью бэкэнда API, работающего на другом порте, используя fetch() для доступа к нему.
Проверьте этот урок. Вы можете найти хранилище компаньона GitHub здесь.
Проверьте этот урок. Вы можете найти хранилище компаньона GitHub здесь.
Примечание. Эта функция доступна с
[email protected]и выше.
Люди часто служат приложению React Front-End React от того же хоста и порта, что и их бэкэнд.
Например, настройка производства может выглядеть так после развертывания приложения:
/ - static server returns index.html with React app
/todos - static server returns index.html with React app
/api/todos - server handles any /api/* requests using the backend implementation
Такая настройка не требуется. Однако, если у вас есть такая настройка, удобно писать запросы, такие как fetch('/api/todos') не беспокоясь о перенаправлении их на другой хост или порт во время разработки.
Чтобы сообщить серверу разработки прокси -сервера любые неизвестные запросы на ваш API -сервер в разработке, добавьте поле proxy в свой package.json , например:
"proxy" : "http://localhost:4000" , Таким образом, когда вы fetch('/api/todos') в разработке, сервер разработки признает, что это не статический актив, и он будет доверенным лицом к вашему запросу на http://localhost:4000/api/todos в качестве спада. Сервер разработки будет пытаться только отправлять запросы без text/html в заголовке Accept в прокси.
Удобно, что это позволяет избежать проблем CORS и сообщений об ошибках в разработке:
Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Имейте в виду, что proxy влияет только на разработку (с npm start ), и вы должны убедиться, что такие URL -адреса /api/todos указывают на нужные вещи в производстве. Вам не нужно использовать префикс /api . Любой непризнанный запрос без text/html -принятия заголовка будет перенаправлен на указанный proxy .
Параметр proxy поддерживает HTTP, HTTPS и WebSocket Connections.
Если опция proxy не достаточно гибкая для вас, в качестве альтернативы вы можете:
Когда вы включите опцию proxy , вы выбираете более строгий набор чеков хоста. Это необходимо, потому что оставление бэкэнда открытой для удаленных хостов делает ваш компьютер уязвимым для DNS -атак. Проблема объясняется в этой статье и в этом вопросе.
Это не должно влиять на вас при разработке на localhost , но если вы разрабатываете удаленно, как описано здесь, вы увидите эту ошибку в браузере после того, как включите опцию proxy :
Неверный заголовок хоста
Чтобы обойти его, вы можете указать свой общественный хост разработки в файле с именем .env.development в корне вашего проекта:
HOST=mypublicdevhost.com
Если вы перезапустите сервер разработки сейчас и загрузите приложение с указанного хоста, оно должно работать.
Если у вас все еще есть проблемы или если вы используете более экзотическую среду, такую как облачный редактор, вы можете полностью обойти проверку хоста, добавив линию к .env.development.local . Обратите внимание, что это опасно, и выявляет вашу машину для удаленного выполнения кода с вредоносных веб -сайтов:
# NOTE: THIS IS DANGEROUS!
# It exposes your machine to attacks from the websites you visit.
DANGEROUSLY_DISABLE_HOST_CHECK=true
Мы не рекомендуем этот подход.
Примечание. Эта функция доступна с
[email protected]и выше.
Если опция proxy не достаточно гибкая для вас, вы можете указать объект в следующей форме (в package.json ).
Вы также можете указать любое значение конфигурации http-proxy-middleware или http-proxy .
{
// ...
"proxy" : {
"/api" : {
"target" : "<url>" ,
"ws" : true
// ...
}
}
// ...
} Все запросы, соответствующие этому пути, будут прокси, без исключений. Это включает в себя запросы на text/html , которые стандартная опция proxy не прокси.
Если вам нужно указать несколько прокси, вы можете сделать это, указав дополнительные записи. Матчи - это регулярные выражения, так что вы можете использовать регуляцию, чтобы соответствовать нескольким путям.
{
// ...
"proxy" : {
// Matches any request starting with /api
"/api" : {
"target" : "<url_1>" ,
"ws" : true
// ...
} ,
// Matches any request starting with /foo
"/foo" : {
"target" : "<url_2>" ,
"ssl" : true ,
"pathRewrite" : {
"^/foo" : "/foo/beta"
}
// ...
} ,
// Matches /bar/abc.html but not /bar/sub/def.html
"/bar/[^/]*[.]html" : {
"target" : "<url_3>" ,
// ...
} ,
// Matches /baz/abc.html and /baz/sub/def.html
"/baz/.*/.*[.]html" : {
"target" : "<url_4>"
// ...
}
}
// ...
}При настройке прокси -сервера WebSocket есть дополнительные соображения, о которых следует знать.
Если вы используете двигатель WebSocket, такой как Socket.io, у вас должен быть работа сервера Socket.io, который вы можете использовать в качестве прокси -цели. Socket.io не будет работать со стандартным сервером WebSocket. В частности, не ожидайте, что Socket.io будет работать с тестированием ebsocketcocket.org Echo.
Для настройки сервера Socket.io есть хорошая документация.
Standard Websockets будет работать со стандартным сервером WebSocket, а также с тестированием ebecocket.org Echo. Вы можете использовать библиотеки, такие как WS для сервера, с нативными веб -питаниями в браузере.
В любом случае, вы можете прокси -запросы WebSocket вручную в package.json :
{
// ...
"proxy" : {
"/socket" : {
// Your compatible WebSocket server
"target" : "ws://<socket_url>" ,
// Tell http-proxy-middleware that this is a WebSocket proxy.
// Also allows you to proxy WebSocket requests without an additional HTTP request
// https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade
"ws" : true
// ...
}
}
// ...
} Примечание. Эта функция доступна с
[email protected]и выше.
Вы можете потребовать, чтобы Dev Server обслуживал страницы по HTTPS. Один конкретный случай, когда это может быть полезно, заключается в использовании функции «прокси» для прокси -запросов на сервер API, когда этот сервер API сам обслуживает HTTPS.
Для этого установите переменную среды HTTPS на true , затем запустите Dev Server как обычно с npm start :
set HTTPS = true && npm start ( $ env: HTTPS = $true ) -and (npm start)(Примечание: отсутствие пробела является преднамеренным.)
HTTPS=true npm startОбратите внимание, что сервер будет использовать самоописанный сертификат, поэтому ваш веб-браузер почти определенно отобразит предупреждение при доступе к странице.
<meta> на сервере Поскольку приложение Create React не поддерживает рендеринг сервера, вам может быть интересно, как сделать <meta> теги динамическими и отражать текущий URL. Чтобы решить это, мы рекомендуем добавить заполнителей в HTML, как это:
<!doctype html >
< html lang =" en " >
< head >
< meta property =" og:title " content =" __OG_TITLE__ " >
< meta property =" og:description " content =" __OG_DESCRIPTION__ " > Затем на сервере, независимо от используемого вами бэкэнда, вы можете прочитать index.html в память и заменить __OG_TITLE__ , __OG_DESCRIPTION__ и любые другие заполнители со значениями в зависимости от текущего URL. Просто убедитесь, что дезинфицируйте и избежали интерполированных значений, чтобы они были безопасны для внедрения в HTML!
Если вы используете сервер узлов, вы даже можете поделиться логикой соответствия маршрута между клиентом и сервером. Однако дублирование также отлично работает в простых случаях.
Если вы размещаете свою build со статическим хостингом, вы можете использовать React-Snapshot или React-Snap для создания HTML-страниц для каждого маршрута или относительной ссылки в вашем приложении. Затем эти страницы будут беспрепятственно стать активными или «увлажненными», когда загружается комплект JavaScript.
Есть также возможности использовать это за пределами статического хостинга, чтобы снять давление с сервера при генерации и кэшировании маршрутов.
Основное преимущество предварительного Рендеринга заключается в том, что вы получаете основной контент каждой страницы с полезной нагрузкой HTML, независимо от того, успешно ли ваш пакет JavaScript. Это также увеличивает вероятность того, что каждый маршрут вашего приложения будет подхвачен поисковыми системами.
Вы можете прочитать больше о предварительном использования с нулевой конфигурацией (также называемой снимком) здесь.
Как и в предыдущем разделе, вы можете оставить некоторых заполнителей в HTML, которые вводят глобальные переменные, например:
< ! doctype html >
< html lang = "en" >
< head >
< script >
window.SERVER_DATA = __SERVER_DATA__;
</ script > Затем на сервере вы можете заменить __SERVER_DATA__ json реальных данных прямо перед отправкой ответа. Клиентский код может затем прочитать window.SERVER_DATA для его использования. Обязательно дезинфицируйте JSON, прежде чем отправлять его клиенту, поскольку оно делает ваше приложение уязвимым для атак XSS.
Примечание. Эта функция доступна с
[email protected]и выше.
Прочитайте руководство по миграции, чтобы узнать, как включить его в старых проектах!
Create React App использует Jest в качестве тестового бегуна. Чтобы подготовиться к этой интеграции, мы сделали серьезную обновление шутки, поэтому, если вы слышали плохие вещи об этом несколько лет назад, попробуйте еще одну попытку.
Jest-бегун на основе узлов. Это означает, что тесты всегда работают в среде узлов, а не в реальном браузере. Это позволяет нам обеспечить быструю скорость итерации и предотвратить хлопость.
В то время как Jest обеспечивает глобальные браузеры, такие как window , благодаря JSDOM, они представляют собой только приближения реального поведения браузера. Jest предназначен для использования для модульных тестов вашей логики и вашей компонентов, а не для причуд DOM.
Мы рекомендуем вам использовать отдельный инструмент для сквозных тестов браузера, если они вам нужны. Они выходят за рамки приложения Create React.
Jest будет искать тестовые файлы с любыми из следующих популярных соглашений об именах:
.js в папках __tests__ ..test.js ..spec.js . Файлы .test.js / .spec.js (или папки __tests__ ) могут быть расположены на любой глубине под папкой верхнего уровня src .
Мы рекомендуем поместить тестовые файлы (или папки __tests__ ) рядом с кодом, который они тестируют, так что относительный импорт казался короче. Например, если App.test.js и App.js находятся в одной и той же папке, тест просто должен import App from './App' вместо долгого относительного пути. Колокация также помогает найти тесты быстрее в более крупных проектах.
Когда вы запускаете npm test , Jest запустится в режиме часов. Каждый раз, когда вы сохраняете файл, он будет повторно запустить тесты, так же, как npm start перекомпилировать код.
Наблюдатель включает в себя интерактивный интерфейс командной строки с возможностью запуска всех тестов или сосредоточиться на шаблоне поиска. Он разработан таким образом, чтобы вы могли держать его открытым и наслаждаться быстрыми повторными заездами. Вы можете выучить команды из «Смотреть использование». Обратите внимание, что наблюдатель печатает после каждого пробега:
По умолчанию, когда вы запускаете npm test , Jest будет запускать только тесты, связанные с файлами, измененными с момента последнего коммита. Это оптимизация, предназначенная для того, чтобы ваши тесты работали быстро, независимо от того, сколько у вас тестов. Однако предполагается, что вы не часто совершаете код, который не проходит тесты.
Шута всегда будет прямо упоминать, что он запускал только тесты, связанные с измененными файлами с момента последнего коммита. Вы также можете нажать a в режиме наблюдения, чтобы заставить Jest запустить все тесты.
Jest всегда будет запускать все тесты на сервере непрерывной интеграции или если проект не находится внутри репозитория GIT или Mercurial.
Чтобы создать тесты, добавьте it() (или test() ) блоки с именем теста и его кода. Вы можете при желании обернуть их в блоки describe() для логической группировки, но это не требуется и не рекомендуется.
Jest обеспечивает встроенную глобальную функцию expect() для утверждений. Базовый тест может выглядеть так:
import sum from './sum' ;
it ( 'sums numbers' , ( ) => {
expect ( sum ( 1 , 2 ) ) . toEqual ( 3 ) ;
expect ( sum ( 2 , 2 ) ) . toEqual ( 4 ) ;
} ) ; Все expect() совпадения, поддерживаемые Jest, подробно документированы здесь.
Вы также можете использовать jest.fn() и expect(fn).toBeCalled() для создания «шпионов» или макетных функций.
Существует широкий спектр методов тестирования компонентов. Они варьируются от «теста на дым», подтверждающего то, что компонент рендерится без броска, до мелкого рендеринга и тестирования некоторых результатов, до полного рендеринга и тестирования жизненного цикла компонента и изменений состояния.
Различные проекты выбирают различные компромиссы тестирования в зависимости от того, как часто меняются компоненты и какую логику они содержат. Если вы еще не выбрали стратегию тестирования, мы рекомендуем начать с создания простых тестов на дым для ваших компонентов:
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import App from './App' ;
it ( 'renders without crashing' , ( ) => {
const div = document . createElement ( 'div' ) ;
ReactDOM . render ( < App /> , div ) ;
} ) ; Этот тест собирает компонент и гарантирует, что он не бросал во время рендеринга. Подобные тесты обеспечивают большую ценность с очень небольшими усилиями, поэтому они великолепны в качестве отправной точки, и это тест, который вы найдете в src/App.test.js .
Когда вы сталкиваетесь с ошибками, вызванными изменением компонентов, вы получите более глубокое представление о том, какие их части стоят тестирования в вашем приложении. Это может быть хорошее время, чтобы представить более конкретные тесты, утверждающие конкретный ожидаемый выход или поведение.
Если вы хотите проверить компоненты в изоляции от детских компонентов, которые они визуаливы, мы рекомендуем использовать API shallow() рендеринга из фермента. Чтобы установить его, запустить:
npm install --save enzyme enzyme-adapter-react-16 react-test-renderer В качестве альтернативы вы можете использовать yarn :
yarn add enzyme enzyme-adapter-react-16 react-test-rendererПо состоянию на фермент 3 вам нужно будет установить фермент вместе с адаптером, соответствующим версии React, которую вы используете. (Приведенные выше примеры используют адаптер для React 16.)
Адаптер также должен быть настроен в вашем файле глобальной настройки:
src/setupTests.js import { configure } from 'enzyme' ;
import Adapter from 'enzyme-adapter-react-16' ;
configure ( { adapter : new Adapter ( ) } ) ;Примечание. Имейте в виду, что если вы решите «выбросить» перед созданием
src/setupTests.js, полученный файлpackage.jsonне будет содержать никаких ссылок на него. Читайте здесь, чтобы научиться добавлять это после выброса.
Теперь вы можете написать с ним тест на дым:
import React from 'react' ;
import { shallow } from 'enzyme' ;
import App from './App' ;
it ( 'renders without crashing' , ( ) => {
shallow ( < App /> ) ;
} ) ; В отличие от предыдущего теста на дым с использованием ReactDOM.render() , этот тест только делает <App> и не идет глубже. Например, даже если <App> сам сам по себе отдает <Button> , этот тест пройдет. Мелкий рендеринг отлично подходит для изолированных модульных тестов, но вы все равно можете создать несколько полных тестов рендеринга, чтобы компоненты правильно интегрировались. Фермент поддерживает полный рендеринг с помощью mount() , и вы также можете использовать его для изменений состояния тестирования и жизненного цикла компонентов.
Вы можете прочитать документацию по ферменту для получения дополнительных методов тестирования. Ферментная документация использует Chai и Sinon для утверждений, но вам не нужно использовать их, потому что Jest обеспечивает встроенный expect() и jest.fn() для шпионов.
Вот пример из документации фермента, который утверждает конкретный вывод, переписанный для использования матчеров Jest:
import React from 'react' ;
import { shallow } from 'enzyme' ;
import App from './App' ;
it ( 'renders welcome message' , ( ) => {
const wrapper = shallow ( < App /> ) ;
const welcome = < h2 > Welcome to React </ h2 > ;
// expect(wrapper.contains(welcome)).to.equal(true);
expect ( wrapper . contains ( welcome ) ) . toEqual ( true ) ;
} ) ; Все шутливые сопоставления подробно документированы здесь.
Тем не менее вы можете использовать стороннюю библиотеку утверждений, такую как Chai, если хотите, как описано ниже.
Кроме того, вы можете обнаружить, что Jest-Enzyme полезным для упрощения ваших тестов с помощью читаемых матчеров. contains выше код может быть написан более простой с помощью Jest-Enzyme.
expect ( wrapper ) . toContainReact ( welcome ) Чтобы включить это, установите jest-enzyme :
npm install --save jest-enzyme В качестве альтернативы вы можете использовать yarn :
yarn add jest-enzyme Импортируйте его в src/setupTests.js чтобы сделать свои совпадения доступными в каждом тесте:
import 'jest-enzyme' ; Мы рекомендуем вам использовать expect() для утверждений и jest.fn() для шпионов. Если у вас есть проблемы с ними, пожалуйста, подайте их против шутки, и мы исправим их. Мы намерены продолжать делать их лучше для React, поддерживая, например, довольно печатные элементы реагирования как JSX.
Однако, если вы привыкли к другим библиотекам, таким как Chai и Sinon, или если у вас есть существующий код, использующий их, который вы хотели бы перенести, вы можете импортировать их обычно, как это:
import sinon from 'sinon' ;
import { expect } from 'chai' ;а затем используйте их в своих тестах, как обычно.
Примечание. Эта функция доступна с
[email protected]и выше.
Если ваше приложение использует API браузера, который вам нужно издеваться в своих тестах, или если вам просто нужна глобальная настройка перед выполнением ваших тестов, добавьте src/setupTests.js в свой проект. Он будет автоматически выполнен до запуска ваших тестов.
Например:
src/setupTests.js const localStorageMock = {
getItem : jest . fn ( ) ,
setItem : jest . fn ( ) ,
clear : jest . fn ( )
} ;
global . localStorage = localStorageMockПримечание. Имейте в виду, что если вы решите «выбросить» перед созданием
src/setupTests.js, полученный файлpackage.jsonне будет содержать никаких ссылок на него, поэтому вы должны вручную создать свойствоsetupTestFrameworkScriptFileв конфигурации для Jest, что -то вроде следующего:
"jest" : { // ... "setupTestFrameworkScriptFile" : "<rootDir>/src/setupTests.js" }
Вы можете заменить it() на xit() чтобы временно исключить тест из выполнения.
Точно так же fit() позволяет вам сосредоточиться на конкретном тесте, не проведя другие тесты.
Jest имеет интегрированный репортер покрытия, который хорошо работает с ES6 и не требует конфигурации.
Запустите npm test -- --coverage (обратите внимание на дополнительный -- середине), чтобы включить отчет о покрытии, подобный этим:
Обратите внимание, что тесты работают намного медленнее с покрытием, поэтому рекомендуется запустить его отдельно от обычного рабочего процесса.
Конфигурация покрытия Jest по умолчанию может быть переопределена, добавив любые из следующих поддерживаемых ключей в Jest Config в вашем пакете.
Поддерживается переопределения:
collectCoverageFromcoverageReporterscoverageThresholdsnapshotSerializersПример пакета.json:
{
"name" : " your-package " ,
"jest" : {
"collectCoverageFrom" : [
" src/**/*.{js,jsx} " ,
" !<rootDir>/node_modules/ " ,
" !<rootDir>/path/to/dir/ "
],
"coverageThreshold" : {
"global" : {
"branches" : 90 ,
"functions" : 90 ,
"lines" : 90 ,
"statements" : 90
}
},
"coverageReporters" : [ " text " ],
"snapshotSerializers" : [ " my-serializer-module " ]
}
} По умолчанию npm test запускает наблюдателя с интерактивным CLI. Тем не менее, вы можете заставить его запустить тесты один раз и завершить процесс, установив переменную среды, называемую CI .
При создании сборки вашего приложения с помощью npm run build предупреждения Linter не проверяются по умолчанию. Как и npm test , вы можете заставить сборку выполнить проверку предупреждения Linter, установив переменную среды CI . Если какие -либо предупреждения встречаются, то сборка не удается.
Популярные CI -серверы уже устанавливают переменную среды CI по умолчанию, но вы можете сделать это самостоятельно:
.travis.yml в ваш репозиторий GIT. language: node_js
node_js:
- 6
cache:
directories:
- node_modules
script:
- npm run build
- npm test
Следуйте этой статье, чтобы настроить Circleci с помощью проекта Create React App.
set CI = true && npm test set CI = true && npm run build(Примечание: отсутствие пробела является преднамеренным.)
( $ env: CI = $true ) -and (npm test)( $ env: CI = $true ) -and (npm run build)CI=true npm test CI=true npm run buildКоманда тестирования заставит шутить запускать тесты один раз вместо того, чтобы запустить наблюдателя.
Если вы часто делаете это в разработке, пожалуйста, подайте проблему, чтобы рассказать нам о вашем случае использования, потому что мы хотим сделать наблюдателя лучшим опытом и открыты для изменения того, как он работает для размещения большего количества рабочих процессов.
Команда сборки проверит предупреждения Линтера и не будет сбой, если таковые имеются.
По умолчанию, package.json созданного проекта выглядит следующим образом:
"scripts" : {
"start" : "react-scripts start" ,
"build" : "react-scripts build" ,
"test" : "react-scripts test --env=jsdom" Если вы знаете, что ни один из ваших тестов не зависит от JSDOM, вы можете безопасно удалить --env=jsdom , и ваши тесты будут работать быстрее:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
- "test": "react-scripts test --env=jsdom"
+ "test": "react-scripts test"Чтобы помочь вам принять решение, вот список API, которые нуждаются в JSDOM :
window и documentReactDOM.render()TestUtils.renderIntoDocument() (ярлык для вышеизложенного)mount() в ферментеНапротив, JSDOM не требуется для следующих API:
TestUtils.createRenderer() (неглубокий рендеринг)shallow() в ферментеНаконец, JSDOM также не нужна для тестирования снимка.
Тестирование снимка - это функция Jest, которая автоматически генерирует текстовые снимки ваших компонентов и сохраняет их на диске, поэтому, если вывод пользовательского интерфейса изменяется, вы получаете уведомление без вручную, не записывая какие -либо утверждения на выводе компонента. Узнайте больше о тестировании снимка.
Если вы используете код Visual Studio, существует Jest расширение, которое работает с Create React App Out из коробки. Это обеспечивает много функций, подобных IDE, при использовании текстового редактора: показ статус теста с потенциальными сообщениями об отказе встроенных, запуска и автоматически останавливает наблюдателя и предлагает обновления снимков на клике.
Существуют различные способы настроить отладчика для ваших шуток. Мы охватываем отладку в коде Chrome и Visual Studio.
ПРИМЕЧАНИЕ. Тесты отладки требуют узла 8 или выше.
Добавьте следующее в раздел scripts в package.json вашего проекта.
"scripts" : {
"test:debug" : " react-scripts --inspect-brk test --runInBand --env=jsdom "
} debugger; заявления в любом тесте и запуска:
$ npm run test:debugЭто начнет запускать ваши Jest -тесты, но остановится перед выполнением, чтобы отладчик прикрепился к процессу.
Откройте следующее в Chrome
about:inspect
После открытия этой ссылки будут отображаться инструменты разработчика Chrome. Выберите inspect свой процесс», и точка останова будет установлена на первой строке сценария React (это делается просто для того, чтобы дать вам время, чтобы открыть инструменты разработчика и предотвратить выполнение Jest, прежде чем у вас будет время для этого). Нажмите кнопку, которая выглядит как кнопка «Воспроизведение» в верхней правой части экрана, чтобы продолжить выполнение. Когда Jest выполняет тест, который содержит оператор отладчика, выполнение приостановит, и вы сможете проверить текущий объем и стек вызовов.
ПРИМЕЧАНИЕ. Опция CLI -runinband гарантирует, что Jest Runs Test в том же процессе, а не процессы нереста для отдельных тестов. Обычно Jest параллелизирует тестовые прогоны между процессами, но трудно отлаживать многие процессы одновременно.
Отладка Jest Tests поддерживается из коробки для кода Visual Studio.
Используйте следующий файл конфигурации launch.json :
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug CRA Tests",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
"args": [
"test",
"--runInBand",
"--no-cache",
"--env=jsdom"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
Обычно в приложении у вас есть много компонентов пользовательского интерфейса, и у каждого из них много разных состояний. Например, простой компонент кнопки может иметь следующие состояния:
Обычно трудно увидеть эти состояния без приложения приложения или некоторых примеров.
Создание приложения React не включает никаких инструментов для этого по умолчанию, но вы можете легко добавить сборник рассказов для React (Source) или React StyleGuidist (источник) в ваш проект. Это сторонние инструменты, которые позволяют вам разрабатывать компоненты и видеть все свои штаты в изоляции от вашего приложения .
Вы также можете развернуть свое руководство по сборнику рассказов или стиля в качестве статического приложения. Таким образом, каждый из вашей команды может просматривать и просматривать различные состояния компонентов пользовательского интерфейса, не запуская сервер или создавая учетную запись в вашем приложении.
Стрелка - это среда разработки для компонентов React UI. Это позволяет просмотреть библиотеку компонентов, просматривать различные состояния каждого компонента, а также интерактивно разрабатывать и проверять компоненты.
Сначала установите следующий пакет NPM по всему миру:
npm install -g @storybook/cliЗатем запустите следующую команду в каталоге вашего приложения:
getstorybookПосле этого следуйте инструкциям на экране.
Узнайте больше о React Storybook:
StyleGuidist сочетает в себе руководство по стилю, где все ваши компоненты представлены на одной странице с их документацией для реквизита и примерами использования, с средой для разработки компонентов в изоляции, похожих на сборник рассказов. В StyleGuidist вы пишете примеры в Markdown, где каждый фрагмент кода отображается в качестве живой редактируемой игровой площадки.
Во -первых, установить styleguidist:
npm install --save react-styleguidist В качестве альтернативы вы можете использовать yarn :
yarn add react-styleguidist Затем добавьте эти сценарии в свой package.json :
"scripts": {
+ "styleguide": "styleguidist server",
+ "styleguide:build": "styleguidist build",
"start": "react-scripts start",Затем запустите следующую команду в каталоге вашего приложения:
npm run styleguideПосле этого следуйте инструкциям на экране.
Узнайте больше о React StyleGuidist:
Создание приложения React не предоставляет никаких встроенных функций для публикации компонента в NPM. Если вы готовы извлечь компонент из вашего проекта, чтобы другие люди могли его использовать, мы рекомендуем перенести его в отдельный каталог за пределами вашего проекта, а затем использовать такой инструмент, как NWB, чтобы подготовить его к публикации.
По умолчанию производственная сборка представляет собой полностью функциональное, не в автономном прогрессивном веб-приложении.
Прогрессивные веб -приложения быстрее и надежнее, чем традиционные веб -страницы, и обеспечивают привлекательный мобильный опыт:
sw-precache-webpack-plugin интегрирован в производственную конфигурацию, и он позаботится о создании файла работника службы, который автоматически будет автоматически предварительно пройти все ваши локальные активы и будет держать их в курсе при развертывании обновлений. Сервисный работник будет использовать стратегию «Перво» для обработки всех запросов на локальные активы, включая начальный HTML, гарантируя, что ваше веб-приложение надежно быстро, даже в медленной или ненадежной сети.
Если вы предпочитаете не включать работников обслуживания до вашего первоначального развертывания производства, то ударите вызов в registerServiceWorker() из src/index.js .
Если бы вы ранее включили работников обслуживания в вашем производственном развертывании и решили, что вы хотели бы отключить их для всех ваших существующих пользователей, вы можете поменять звонок на registerServiceWorker() в src/index.js сначала, изменив импорт работника обслуживания :
import { unregister } from './registerServiceWorker' ; а затем вызовите unregister() вместо этого. После того, как пользователь посещает страницу, на которой есть unregister() , работник службы будет удален. Обратите внимание, что в зависимости от того, как обслуживается /service-worker.js , может потребоваться до 24 часов, чтобы кэш был признан недействительным.
Работники по обслуживанию требуют HTTPS, хотя для облегчения местного тестирования, эта политика не распространяется на localhost . Если ваш производственный веб -сервер не поддерживает HTTPS, то регистрация работников службы потерпит неудачу, но остальная часть вашего веб -приложения останется функциональной.
Сервисные работники в настоящее время не поддерживаются во всех веб -браузерах. Регистрация работников обслуживания не будет предпринята в браузерах, в которых отсутствует поддержка.
Сервисный работник включен только в производственной среде, например, на выходе npm run build . Рекомендуется, чтобы вы не включали работника обслуживания в автономном режиме в среде разработки, поскольку это может привести к разочарованию, когда используются ранее кэшированные активы, и не включают последние изменения, которые вы внесли локально.
Если вам нужно протестировать своего автономного обслуживающего работника локально, создайте приложение (с помощью npm run build ) и запустите простой HTTP-сервер из вашего каталога сборки. После запуска сценария сборки create-react-app даст инструкции по одному способу проверки вашей производственной сборки локально, а в инструкциях по развертыванию есть инструкции по использованию других методов. Обязательно всегда используйте окно инкогнито, чтобы избежать осложнений с вашим браузера.
Если возможно, настройте свою производственную среду, чтобы обслуживать сгенерированную service-worker.js . Если это невозможно-например, страницы GITHUB не позволяют вам изменить 10-минутное время срока службы HTTP Cache-тогда имейте в виду, что если вы посетите свой производственный сайт, а затем снова верните перед service-worker.js Http cache, вы продолжите получать ранее кэшированные активы от работника службы. Если у вас есть непосредственная необходимость просмотреть ваше обновленное развертывание производства, выполнение смены-рефреша временно отключит работника службы и извлечет все активы из сети.
Пользователи не всегда знакомы с автономными первыми веб-приложениями. Может быть полезно сообщить пользователю, когда работник службы заполнит заполнение ваших кэшей (показывая сообщение «Это веб -приложение о автономном режиме!», А также сообщит им, когда работник службы получает последние обновления, которые будут доступны В следующий раз, когда они загружают страницу (показывает «новый контент; пожалуйста, обновите». Показывая эти сообщения в настоящее время остается в качестве упражнения для разработчика, но в качестве отправной точки вы можете использовать логику, включенную в src/registerServiceWorker.js , которая демонстрирует, какие события жизненного цикла работника обслуживания, чтобы выслушать каждый сценарий, и и и который в качестве по умолчанию просто регистрирует соответствующие сообщения в консоли JavaScript.
По умолчанию файл сгенерированного работника обслуживания не будет перехватывать или кэшировать какой-либо транспорт перекрестного происхождения, такие как HTTP API-запросы, изображения или встраиваемые, загруженные из другого домена. Если вы хотите использовать стратегию кэширования среды выполнения для этих запросов, вы можете eject , а затем настроить опцию runtimeCaching в разделе SWPrecacheWebpackPlugin в webpack.config.prod.js .
Конфигурация по умолчанию включает в себя манифест веб -приложения, расположенное на public/manifest.json , который вы можете настроить с деталями, специфичными для вашего веб -приложения.
Когда пользователь добавляет веб -приложение в свой Homestreen, используя Chrome или Firefox на Android, метаданные в manifest.json определяют, какие значки, имена и цвета брендинга используют при отображении веб -приложения. Руководство по манифесту веб -приложения предоставляет больше контекста о том, что означает каждая область, и как ваши настройки повлияют на опыт ваших пользователей.
Исследователь исходной карты анализирует пакеты JavaScript, используя исходные карты. Это помогает вам понять, откуда исходит раздутие кода.
Чтобы добавить исходную карту исследователя в проект Create React App, выполните следующие действия:
npm install --save source-map-explorer В качестве альтернативы вы можете использовать yarn :
yarn add source-map-explorer Затем в package.json добавьте следующую строку в scripts :
"scripts": {
+ "analyze": "source-map-explorer build/static/js/main.*",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",Затем, чтобы проанализировать пакет, запустите производственную сборку, затем запустите сценарий анализа.
npm run build
npm run analyze
npm run build создает каталог build с производственной сборкой вашего приложения. Установите свой любимый HTTP -сервер, чтобы посетитель вашего сайта обслуживался index.html , и запросы на статические пути, такие как /static/js/main. /static/js/main.<hash>.js обслуживаются содержимым /static/js/main.<hash>.js Файл.
Для среды, используя узлы, самый простой способ справиться с этим - установить подачу и дать ему справиться с остальными:
npm install -g serve
serve -s build Последняя команда, показанная выше, будет обслуживать ваш статический сайт на порту 5000 . Как и многие внутренние настройки подачи, порт может быть отрегулирован с помощью флагов -p или --port .
Запустите эту команду, чтобы получить полный список доступных параметров:
serve -hВам не обязательно нужен статический сервер, чтобы запустить проект Create React App в производстве. Он работает так же хорошо, интегрированный в существующую динамическую.
Вот программный пример с использованием Node и Express:
const express = require ( 'express' ) ;
const path = require ( 'path' ) ;
const app = express ( ) ;
app . use ( express . static ( path . join ( __dirname , 'build' ) ) ) ;
app . get ( '/' , function ( req , res ) {
res . sendFile ( path . join ( __dirname , 'build' , 'index.html' ) ) ;
} ) ;
app . listen ( 9000 ) ;Выбор вашего серверного программного обеспечения тоже не важен. Поскольку приложение Create React является полностью агрессивным платформой, нет необходимости явно использовать узел.
Папка build со статическими активами является единственной выходом, созданной приложением Create React.
Однако этого недостаточно, если вы используете маршрутизацию на стороне клиента. Read the next section if you want to support URLs like /todos/42 in your single-page app.
If you use routers that use the HTML5 pushState history API under the hood (for example, React Router with browserHistory ), many static file servers will fail. For example, if you used React Router with a route for /todos/42 , the development server will respond to localhost:3000/todos/42 properly, but an Express serving a production build as above will not.
This is because when there is a fresh page load for a /todos/42 , the server looks for the file build/todos/42 and does not find it. The server needs to be configured to respond to a request to /todos/42 by serving index.html . For example, we can amend our Express example above to serve index.html for any unknown paths:
app.use(express.static(path.join(__dirname, 'build')));
- app.get('/', function (req, res) {
+ app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
}); If you're using Apache HTTP Server, you need to create a .htaccess file in the public folder that looks like this:
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
It will get copied to the build folder when you run npm run build .
If you're using Apache Tomcat, you need to follow this Stack Overflow answer.
Now requests to /todos/42 will be handled correctly both in development and in production.
On a production build, and in a browser that supports service workers, the service worker will automatically handle all navigation requests, like for /todos/42 , by serving the cached copy of your index.html . This service worker navigation routing can be configured or disabled by eject ing and then modifying the navigateFallback and navigateFallbackWhitelist options of the SWPreachePlugin configuration.
When users install your app to the homescreen of their device the default configuration will make a shortcut to /index.html . This may not work for client-side routers which expect the app to be served from / . Edit the web app manifest at public/manifest.json and change start_url to match the required URL scheme, for example:
"start_url" : "." , By default, Create React App produces a build assuming your app is hosted at the server root.
To override this, specify the homepage in your package.json , for example:
"homepage" : "http://mywebsite.com/relativepath" ,This will let Create React App correctly infer the root path to use in the generated HTML file.
Note : If you are using react-router@^4 , you can root <Link> s using the basename prop on any <Router> .
More information here.
Например:
< BrowserRouter basename = "/calendar" />
< Link to = "/today" / > // renders <a href="/calendar/today"> Note: this feature is available with
[email protected]and higher.
If you are not using the HTML5 pushState history API or not using client-side routing at all, it is unnecessary to specify the URL from which your app will be served. Instead, you can put this in your package.json :
"homepage" : "." , This will make sure that all the asset paths are relative to index.html . You will then be able to move your app from http://mywebsite.com to http://mywebsite.com/relativepath or even http://mywebsite.com/relative/path without having to rebuild it.
See this blog post on how to deploy your React app to Microsoft Azure.
See this blog post or this repo for a way to use automatic deployment to Azure App Service.
Install the Firebase CLI if you haven't already by running npm install -g firebase-tools . Sign up for a Firebase account and create a new project. Run firebase login and login with your previous created Firebase account.
Then run the firebase init command from your project's root. You need to choose the Hosting: Configure and deploy Firebase Hosting sites and choose the Firebase project you created in the previous step. You will need to agree with database.rules.json being created, choose build as the public directory, and also agree to Configure as a single-page app by replying with y .
=== Project Setup
First, let ' s associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we ' ll just set up a default project.
? What Firebase project do you want to associate as default ? Example app (example-app-fd690)
=== Database Setup
Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.
? What file should be used for Database Rules ? database.rules.json
✔ Database Rules for example-app-fd690 have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to uploaded with firebase deploy. If you
have a build process for your assets, use your build ' s output directory.
? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔ Wrote build/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete! IMPORTANT: you need to set proper HTTP caching headers for service-worker.js file in firebase.json file or you will not be able to see changes after first deployment (issue #2440). It should be added inside "hosting" key like next:
{
"hosting": {
...
"headers": [
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
]
...
Now, after you create a production build with npm run build , you can deploy it by running firebase deploy .
=== Deploying to ' example-app-fd690 ' ...
i deploying database, hosting
✔ database: rules ready to deploy.
i hosting: preparing build directory for upload...
Uploading: [ ============================== ] 75%✔ hosting: build folder uploaded successfully
✔ hosting: 8 files uploaded successfully
i starting release process (may take several minutes)...
✔ Deploy complete !
Project Console: https://console.firebase.google.com/project/example-app-fd690/overview
Hosting URL: https://example-app-fd690.firebaseapp.comFor more information see Add Firebase to your JavaScript Project.
Note: this feature is available with
[email protected]and higher.
homepage to package.json The step below is important!
If you skip it, your app will not deploy correctly.
Open your package.json and add a homepage field for your project:
"homepage" : " https://myusername.github.io/my-app " ,or for a GitHub user page:
"homepage" : " https://myusername.github.io " , Create React App uses the homepage field to determine the root URL in the built HTML file.
gh-pages and add deploy to scripts in package.json Now, whenever you run npm run build , you will see a cheat sheet with instructions on how to deploy to GitHub Pages.
To publish it at https://myusername.github.io/my-app, run:
npm install --save gh-pages Alternatively you may use yarn :
yarn add gh-pages Add the following scripts in your package.json :
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build", The predeploy script will run automatically before deploy is run.
If you are deploying to a GitHub user page instead of a project page you'll need to make two additional modifications:
package.json scripts to push deployments to master : "scripts": {
"predeploy": "npm run build",
- "deploy": "gh-pages -d build",
+ "deploy": "gh-pages -b master -d build", npm run deployThen run:
npm run deploygh-pages Finally, make sure GitHub Pages option in your GitHub project settings is set to use the gh-pages branch:
You can configure a custom domain with GitHub Pages by adding a CNAME file to the public/ folder.
GitHub Pages doesn't support routers that use the HTML5 pushState history API under the hood (for example, React Router using browserHistory ). This is because when there is a fresh page load for a url like http://user.github.io/todomvc/todos/42 , where /todos/42 is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /todos/42 . If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj ) . Read more about different history implementations in React Router.index.html page with a special redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you'll need to add code handling the redirect parameter to index.html . You can find a detailed explanation of this technique in this guide. Use the Heroku Buildpack for Create React App.
You can find instructions in Deploying React with Zero Configuration.
Sometimes npm run build works locally but fails during deploy via Heroku. Following are the most common cases.
If you get something like this:
remote: Failed to create a production build. Reason:
remote: Module not found: Error: Cannot resolve 'file' or 'directory'
MyDirectory in /tmp/build_1234/src
It means you need to ensure that the lettercase of the file or directory you import matches the one you see on your filesystem or on GitHub.
This is important because Linux (the operating system used by Heroku) is case sensitive. So MyDirectory and mydirectory are two distinct directories and thus, even though the project builds locally, the difference in case breaks the import statements on Heroku remotes.
If you exclude or ignore necessary files from the package you will see a error similar this one:
remote: Could not find a required file.
remote: Name: `index.html`
remote: Searched in: /tmp/build_a2875fc163b209225122d68916f1d4df/public
remote:
remote: npm ERR! Linux 3.13.0-105-generic
remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/node" "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/npm" "run" "build"
In this case, ensure that the file is there with the proper lettercase and that's not ignored on your local .gitignore or ~/.gitignore_global .
To do a manual deploy to Netlify's CDN:
npm install netlify-cli -g
netlify deploy Choose build as the path to deploy.
To setup continuous delivery:
With this setup Netlify will build and deploy when you push to git or open a pull request:
yarn build as the build command and build as the publish directoryDeploy siteSupport for client-side routing:
To support pushState , make sure to create a public/_redirects file with the following rewrite rules:
/* /index.html 200
When you build the project, Create React App will place the public folder contents into the build output.
Now offers a zero-configuration single-command deployment. You can use now to deploy your app for free.
Install the now command-line tool either via the recommended desktop tool or via node with npm install -g now .
Build your app by running npm run build .
Move into the build directory by running cd build .
Run now --name your-project-name from within the build directory. You will see a now.sh URL in your output like this:
> Ready! https://your-project-name-tpspyhtdtk.now.sh (copied to clipboard)
Paste that URL into your browser when the build is complete, and you will see your deployed app.
Details are available in this article.
See this blog post on how to deploy your React app to Amazon Web Services S3 and CloudFront.
Install the Surge CLI if you haven't already by running npm install -g surge . Run the surge command and log in you or create a new account.
When asked about the project path, make sure to specify the build folder, for example:
project path: /path/to/project/build Note that in order to support routers that use HTML5 pushState API, you may want to rename the index.html in your build folder to 200.html before deploying to Surge. This ensures that every URL falls back to that file.
You can adjust various development and production settings by setting environment variables in your shell or with .env.
| Переменная | Разработка | Производство | Использование |
|---|---|---|---|
| БРАУЗЕР | ✅ | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a browser to override this behavior, or set it to none to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to npm start will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the .js extension. | |
| ХОЗЯИН | ✅ | By default, the development web server binds to localhost . You may use this variable to specify a different host. | |
| ПОРТ | ✅ | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. | |
| HTTPS | ✅ | When set to true , Create React App will run the development server in https mode. | |
| PUBLIC_URL | ✅ | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in package.json ( homepage ). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. | |
| КИ | ? | ✅ | When set to true , Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. |
| REACT_EDITOR | ✅ | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can send a pull request to detect your editor of choice. Setting this environment variable overrides the automatic detection. If you do it, make sure your systems PATH environment variable points to your editor's bin folder. You can also set it to none to disable it completely. | |
| CHOKIDAR_USEPOLLING | ✅ | When set to true , the watcher runs in polling mode, as necessary inside a VM. Use this option if npm start isn't detecting changes. | |
| GENERATE_SOURCEMAP | ✅ | When set to false , source maps are not generated for a production build. This solves OOM issues on some smaller machines. | |
| NODE_PATH | ✅ | ✅ | Same as NODE_PATH in Node.js, but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting NODE_PATH=src . |
npm start doesn't detect changes When you save a file while npm start is running, the browser should refresh with the updated code.
If this doesn't happen, try one of the following workarounds:
index.js and you're referencing it by the folder name, you need to restart the watcher due to a Webpack bug..env file in your project directory if it doesn't exist, and add CHOKIDAR_USEPOLLING=true to it. This ensures that the next time you run npm start , the watcher uses the polling mode, as necessary inside a VM.If none of these solutions help please leave a comment in this thread.
npm test hangs on macOS Sierra If you run npm test and the console gets stuck after printing react-scripts test --env=jsdom to the console there might be a problem with your Watchman installation as described in facebookincubator/create-react-app#713.
We recommend deleting node_modules in your project and running npm install (or yarn if you use it) first. If it doesn't help, you can try one of the numerous workarounds mentioned in these issues:
It is reported that installing Watchman 4.7.0 or newer fixes the issue. If you use Homebrew, you can run these commands to update it:
watchman shutdown-server
brew update
brew reinstall watchman
You can find other installation methods on the Watchman documentation page.
If this still doesn't help, try running launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist .
There are also reports that uninstalling Watchman fixes the issue. So if nothing else helps, remove it from your system and try again.
npm run build exits too early It is reported that npm run build can fail on machines with limited memory and no swap space, which is common in cloud environments. Even with small projects this command can increase RAM usage in your system by hundreds of megabytes, so if you have less than 1 GB of available memory your build is likely to fail with the following message:
The build failed because the process exited too early. This probably means the system ran out of memory or someone called
kill -9on the process.
If you are completely sure that you didn't terminate the process, consider adding some swap space to the machine you're building on, or build the project locally.
npm run build fails on HerokuThis may be a problem with case sensitive filenames. Please refer to this section.
If you use a Moment.js, you might notice that only the English locale is available by default. This is because the locale files are large, and you probably only need a subset of all the locales provided by Moment.js.
To add a specific Moment.js locale to your bundle, you need to import it explicitly.
Например:
import moment from 'moment' ;
import 'moment/locale/fr' ; If import multiple locales this way, you can later switch between them by calling moment.locale() with the locale name:
import moment from 'moment' ;
import 'moment/locale/fr' ;
import 'moment/locale/es' ;
// ...
moment . locale ( 'fr' ) ;This will only work for locales that have been explicitly imported before.
npm run build fails to minifySome third-party packages don't compile their code to ES5 before publishing to npm. This often causes problems in the ecosystem because neither browsers (except for most modern versions) nor some tools currently support all ES6 features. We recommend to publish code on npm as ES5 at least for a few more years.
module field in package.json . Note that even if a library provides an ES Modules version, it should still precompile other ES6 features to ES5 if it intends to support older browsers .Fork the package and publish a corrected version yourself.
If the dependency is small enough, copy it to your src/ folder and treat it as application code.
In the future, we might start automatically compiling incompatible third-party modules, but it is not currently supported. This approach would also slow down the production builds.
Ejecting lets you customize anything, but from that point on you have to maintain the configuration and scripts yourself. This can be daunting if you have many similar projects. In such cases instead of ejecting we recommend to fork react-scripts and any other packages you need. This article dives into how to do it in depth. You can find more discussion in this issue.
If you have ideas for more “How To” recipes that should be on this page, let us know or contribute some!
