Перейти к контенту

Создание React приложения

Create React App — это программное обеспечение с открытым исходным кодом, лицензированное как MIT.

Создавайте приложения React без конфигурации сборки. Приложение Create React работает на MacOS, Windows и Linux. Если что-то не работает или есть вопросы и нужна помощь, обращайтесь в сообщество Spectrum по адресу — spectrum.chat/create-react-app.

 

Краткая информация

npx create-react-app my-app
cd my-app
npm start

Если вы ранее устанавливали create-Reaction-app глобально с помощью npm install -g create-Reaction-app, мы рекомендуем вам удалить пакет с помощью npm uninstall -g create-Reaction-app, чтобы npx всегда использовал последнюю версию.

(npx поставляется с npm 5.2+ и выше, см. инструкции для более старых версий npm)

Затем откройте http: // localhost: 3000 /, чтобы увидеть ваше приложение. Когда вы будете готовы к развертыванию в рабочей среде, создайте минимизированный пакет с помощью npm run build.

npm запуск

Вам не нужно устанавливать или настраивать такие инструменты, как веб-пакет или Babel. Они предварительно настроены и скрыты, так что вы можете сосредоточиться только на коде.

Создайте проект, и все готово.

Создание приложения

Вам понадобится Node 8.16.0 или Node 10.16.0 или более поздняя версия на локальном компьютере разработчика(но на сервере это не требуется). Вы можете использовать nvm(macOS / Linux) или nvm-windows для переключения версий Node между различными проектами.

Чтобы создать новое приложение, вы можете выбрать один из следующих методов:

NPX

npx create-react-app my-app

(npx — это инструмент для запуска пакетов, который поставляется с npm 5.2+ и выше)

npm

npm init react-app my-app

npm init initializer доступно в нпм 6+

Yarn

yarn create react-app my-app

Он создаст каталог с именем my-app внутри текущей папки. Внутри этого каталога он сгенерирует исходную структуру проекта и установит переходные зависимости:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

Нет конфигурации или сложной структуры папок, только файлы, необходимые для создания приложения. После завершения установки вы можете открыть папку вашего проекта:

cd my-app

Внутри недавно созданного проекта вы можете запустить несколько встроенных команд:

npm start или yarn start

Запускает приложение в режиме разработки. Откройте http: // localhost: 3000, чтобы просмотреть его в браузере.

Страница автоматически перезагрузится, если вы внесете изменения в код. Вы увидите ошибки сборки и предупреждения lint в консоли.

ошибки

npm test или yarn test

Запускает тестовый наблюдатель в интерактивном режиме. По умолчанию запускаются тесты, связанные с файлами, измененными с момента последней фиксации.

npm run build или yarn build

Создает приложение для производства в папке сборки. Он корректно объединяет React в производственном режиме и оптимизирует сборку для лучшей производительности.

Сборка сводится к минимуму, а имена файлов содержат хэши. Ваше приложение готово к развертыванию.

 

Инструкция

Вы можете найти подробные инструкции по использованию приложения React и множество советов в его документации.

Как обновить до новой версии?

Обратитесь к Руководству пользователя для получения этой информации.

  • Одна зависимость: существует только одна зависимость сборки. Она использует веб-пакеты, Babel, ESLint и другие проекты, но обеспечивает согласованный опыт поверх них.
  • Не требуется настройка: вам не нужно ничего настраивать. Для вас достаточно удобная конфигурация как разработки, так и рабочей сборки, чтобы вы могли сосредоточиться на написании кода.
  • Без блокировки: вы можете «извлечь» пользовательские настройки в любое время. Выполните одну команду, и все зависимости конфигурации и сборки будут перенесены непосредственно в ваш проект, так что вы можете выбрать их там, где остановились.

Что включено?

В вашей среде будет все необходимое для создания современного одностраничного приложения React:

  • Поддержка синтаксиса React, JSX, ES6, TypeScript и Flow.
  • Языковые дополнения за пределами ES6, такие как оператор распространения объектов.
  • CSS с автопрефиксом, поэтому вам не нужны -webkit- или другие префиксы.
  • Быстрый интерактивный тестовый модуль со встроенной поддержкой отчетов о покрытии.
  • Живой сервер разработки, который предупреждает об общих ошибках.
  • Сценарий сборки для объединения JS, CSS и изображений для производства с хешами и исходными картами.
  • Работник сервиса, работающий в автономном режиме, и манифест веб-приложения, удовлетворяющий всем критериям Progressive Web App(Примечание: использование работника сервиса является обязательным по адресу response-scripts@2.0.0 и выше)
  • Беспроблемные обновления для вышеперечисленных инструментов с одной зависимостью.

Посмотрите это руководство github.com/nitishdayal/cra_closer_look, чтобы узнать, как эти инструменты сочетаются друг с другом.

Эти инструменты предварительно настроены для работы определенным образом. Если ваш проект требует дополнительной настройки, вы можете «извлечь» и настроить его, но тогда вам нужно будет поддерживать эту конфигурацию.

Популярные альтернативы

Приложение Create React отлично подходит для:

  • Обучения в удобной и многофункциональной среде разработки.
  • Запуск новых одностраничных приложений React.
  • Создание примеров с React для ваших библиотек и компонентов.

Вот несколько распространенных случаев, когда вы можете попробовать что-то другое:

  • Если вы хотите попробовать React без сотен зависимостей переходного инструмента сборки, рассмотрите возможность использования одного файла HTML или online sandbox.
  • Если вам нужно интегрировать код React с серверной структурой шаблонов, такой как Rails, Django или Symfony, или если вы не создаете одностраничное приложение, рассмотрите возможность использования более гибких nwb или Neutrino. В частности, для Rails вы можете использовать Rails Webpacker. Для Symfony попробуйте веб-пакет Symfony Encore.
  • Если вам нужно опубликовать компонент React, nwb также может сделать это, а также предустановку Neutrino для компонентов.
  • Если вы хотите выполнить рендеринг сервера с помощью React и Node.js, посмотрите Next.js или Razzle. Приложение Create React не зависит от серверной части и создает только статические пакеты HTML / JS / CSS.
  • Если ваш сайт в основном статичен(например, портфолио или блог), рассмотрите возможность использования Gatsby. В отличие от Create React App, он предварительно визуализирует сайт в HTML во время сборки.
  • Наконец, если вам нужно больше настроек, проверьте Neutrino и его предустановку React.

Все вышеперечисленные инструменты могут работать практически без конфигурации. Если вы предпочитаете настраивать сборку самостоятельно, читайте это руководство.

А сами файлы можете скачать отсюда github.com/facebook/create-react-app.

Оцени статью

Средняя оценка / 5. Количество голосов:

Спасибо, помогите другим - напишите комментарий, добавьте информации к статье.

Или поделись статьей

Видим, что вы не нашли ответ на свой вопрос.

Помогите улучшить статью.

 

Пока нет комментариев.

Добавить комментарий

Ваш e-mail не будет опубликован.

СайдбарКомментарии (0)