Создавайте приложения React без конфигурации сборки.
Приложение Create React работает на macOS, Windows и Linux.
Если что-то не работает, сообщите о проблеме.
Если у вас есть вопросы или вам нужна помощь, задавайте их в обсуждениях GitHub.
npx create-react-app my-app
cd my-app
npm start
Если вы ранее установили create-react-app
глобально с помощью npm install -g create-react-app
, мы рекомендуем вам удалить пакет с помощью npm uninstall -g create-react-app
или yarn global remove create-react-app
чтобы гарантировать что npx всегда использует последнюю версию.
(npx поставляется с npm 5.2+ и выше, см. инструкции для более старых версий npm)
Затем откройте http://localhost:3000/, чтобы увидеть свое приложение.
Когда вы будете готовы к развертыванию в рабочей среде, создайте минифицированный пакет с помощью npm run build
.
Вам не нужно устанавливать или настраивать такие инструменты, как Webpack или Babel.
Они предварительно настроены и скрыты, чтобы вы могли сосредоточиться на коде.
Создайте проект, и все готово.
Вам понадобится Node 14.0.0 или более поздняя версия на локальном компьютере разработки (но на сервере это не обязательно). Мы рекомендуем использовать последнюю версию LTS. Вы можете использовать nvm (macOS/Linux) или nvm-windows для переключения версий Node между разными проектами.
Чтобы создать новое приложение, вы можете выбрать один из следующих методов:
npx create-react-app my-app
(npx — это инструмент запуска пакетов, который поставляется с npm 5.2+ и выше, см. инструкции для более старых версий npm)
npm init react-app my-app
npm init <initializer>
доступен в npm 6+
yarn create react-app my-app
yarn create <starter-kit-package>
доступен в Yarn 0.25+
Внутри текущей папки будет создан каталог с именем 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
└── setupTests.js
Никакой настройки или сложной структуры папок, только файлы, необходимые для создания приложения.
После завершения установки вы можете открыть папку проекта:
cd my-app
Внутри вновь созданного проекта вы можете запустить некоторые встроенные команды:
npm start
или yarn start
Запускает приложение в режиме разработки.
Откройте http://localhost:3000, чтобы просмотреть его в браузере.
Страница автоматически перезагрузится, если вы внесете изменения в код.
Вы увидите ошибки сборки и предупреждения в консоли.
npm test
или yarn test
Запускает наблюдатель тестов в интерактивном режиме.
По умолчанию запускает тесты, связанные с файлами, измененными с момента последней фиксации.
Подробнее о тестировании.
npm run build
или yarn build
Собирает приложение для производства в папке build
.
Он правильно объединяет React в производственном режиме и оптимизирует сборку для достижения наилучшей производительности.
Сборка минимизирована, а имена файлов включают хеши.
Ваше приложение готово к развертыванию.
Подробные инструкции по использованию приложения Create React и множество советов вы можете найти в его документации.
Эту и другую информацию можно найти в руководстве пользователя.
Одна зависимость: существует только одна зависимость сборки. Он использует Webpack, Babel, ESLint и другие замечательные проекты, но поверх них обеспечивает целостный опыт.
Никакой настройки не требуется: вам не нужно ничего настраивать. Вам будет предоставлена достаточно хорошая конфигурация сборок для разработки и производства, чтобы вы могли сосредоточиться на написании кода.
Нет блокировки: вы можете «извлечь» пользовательскую настройку в любое время. Запустите одну команду, и все зависимости конфигурации и сборки будут перенесены непосредственно в ваш проект, так что вы сможете продолжить с того места, на котором остановились.
В вашей среде будет все необходимое для создания современного одностраничного приложения React:
-webkit-
или другие префиксы.[email protected]
и выше )Ознакомьтесь с этим руководством, чтобы получить представление о том, как эти инструменты сочетаются друг с другом.
Компромисс заключается в том, что эти инструменты предварительно настроены для работы определенным образом . Если ваш проект нуждается в дополнительной настройке, вы можете «извлечь» и настроить его, но тогда вам нужно будет поддерживать эту конфигурацию.
Приложение Create React отлично подходит для:
Вот несколько распространенных случаев, когда вы можете попробовать что-то еще:
Если вы хотите попробовать React без сотен зависимостей инструментов транзитивной сборки, рассмотрите возможность использования вместо этого одного HTML-файла или онлайн-песочницы.
Если вам нужно интегрировать код 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 или Next.js. В отличие от приложения Create React, Gatsby предварительно преобразует веб-сайт в HTML во время сборки. Next.js поддерживает как серверный, так и предварительный рендеринг.
Наконец, если вам нужны дополнительные настройки , обратите внимание на Neutrino и его пресет React.
Все вышеперечисленные инструменты могут работать практически без настройки.
Если вы предпочитаете настраивать сборку самостоятельно, следуйте этому руководству.
Ищете что-то подобное, но для React Native?
Ознакомьтесь с Expo CLI.
Мы будем рады вашей помощи в create-react-app
! Посетите CONTRIBUTING.md для получения дополнительной информации о том, что мы ищем и с чего начать.
Create React App — это проект, поддерживаемый сообществом, и все участники — волонтеры. Если вы хотите поддержать будущую разработку приложения Create React, рассмотрите возможность пожертвования в наш открытый коллектив.
Этот проект существует благодаря всем людям, которые вносят свой вклад.
Спасибо Netlify за размещение нашей документации.
Мы благодарны авторам существующих смежных проектов за идеи и сотрудничество:
Create React App — это программное обеспечение с открытым исходным кодом, лицензированное как MIT. Логотип приложения Create React доступен по лицензии Creative Commons Attribution 4.0 International.