React быстро растет среди разработчиков и признан самой любимой технологией в опросе разработчиков StackOverflow 2019 года. Настройка инструментов для разработки приложения React может быть пугающей и трудоемкой задачей.
Здесь много движущихся частей. Например, настройка Babel для преобразования JSX в готовый для браузера код и настройка Webpack для объединения ресурсов вашего проекта. Таким образом, решением является инструмент create react app CLI , позволяющий создавать и запускать приложения React без какой-либо конфигурации.
Учебное пособие по созданию приложения React. Для начинающих
Мы начинаем это руководство с установки React с помощью следующей команды. На момент написания этой статьи мы использовали версию React 16.3.1 . Он поставляется с новым API жизненного цикла и контекста.
Официальный API контекста
В течение многих лет React js предлагал экспериментальный API для контекста. Это был мощный инструмент, его использование не приветствовалось из-за проблем, присущих API, а также из-за того, что основная группа разработчиков всегда намеревалась заменить экспериментальный API на лучший.
Версия 16.3 представляет новый контекстный API, который более эффективен и поддерживает как проверку статического типа, так и подробные обновления. Вы можете найти больше в его официальном блоге.
Установите приложение create response на Mac
Чтобы установить приложение create response на нашей машине Mac нам нужно уже установить Node.js. Я установил Node.js версии 9.8.0, а у npm — версия 5.6.0. Create React App — лучший способ начать создание нового приложения React. Он настраивает вашу среду разработки так, чтобы вы могли использовать новейшие функции JavaScript, предоставляя отличные возможности для разработчиков и оптимизируя ваше приложение для производства. Вам понадобится Node> = 6 на вашем компьютере. Теперь откройте свой терминал и установите следующее.
npx create-react-app reactstarter
Установка займет 30-40 секунд, а затем вы увидите терминал как ниже.
Это означает, что шаблон React успешно создан на нашей машине Mac. Теперь нам нужно запустить сервер веб-пакетов, чтобы мы могли получить доступ к нашему приложению в браузере. Введите в терминале следующую команду.
cd reactstarteryarn start
Yarn — это менеджер пакетов, разработанный Facebook. Он запускает сервер, и мы можем получить доступ к нашему приложению по умолчанию по адресу http://localhost: 3000/. Вы увидите что-то вроде экрана ниже.
Откройте этот проект в редакторе кода, и я использую код Visual Studio. Структура нашего проекта по умолчанию выглядит как на изображении ниже..
Теперь откройте src> > Файл App.js и измените что-нибудь. Давайте удалим изображение SVG. Если вы сохраните файл, webpack перекомпилирует код, и страница обновится автоматически, а изменения отобразятся в браузере. Теперь вы можете создать столько компонентов, сколько захотите, импортировать в файл App.js , и этот файл будет включен в наш основной файл index.html . путем компиляции с помощью webpack.
Затем для рабочего режима введите следующую команду.
yarn build
Это сгенерирует производство сборка, которая лучше всего оптимизирована. Таким образом, создание приложения для реагирования экономит массу времени на настройку всех различных модулей.
Это все для примера create response app. Мы рассмотрим подробные руководства в следующих статьях.
