как скомпилировать react приложение

Использование Babel и Webpack для настройки React-проекта с нуля

Существует немало инструментов, позволяющих подготовить среду для React-разработки. Например, в наших материалах учебного курса по React используется средство create-react-app, позволяющее создать шаблонный проект, содержащий всё необходимое для разработки React-приложений. Автор статьи, перевод которой мы публикуем сегодня, хочет рассказать о том, как самостоятельно настроить окружение для разработки React-проектов с использованием Babel и Webpack. Эти инструменты используются и в проектах, создаваемых средствами create-react-app, и мы полагаем, что всем, кто изучает React-разработку, интересно будет познакомиться с ними и с методикой создания React-проектов на более глубоком уровне. А именно, речь пойдёт о том, как сконфигурировать Webpack таким образом, чтобы это средство использовало бы Babel для компиляции JSX-кода в JavaScript-код, и как настроить сервер, используемый при разработке React-проектов.

Webpack

Webpack используется для компиляции JavaScript-модулей. Этот инструмент часто называют «бандлером» (от bundler) или «сборщиком модулей». После его установки работать с ним можно, используя интерфейс командной строки или его API. Если вы не знакомы с Webpack — рекомендуется почитать об основных принципах его работы и посмотреть его сравнение с другими сборщиками модулей. Вот как, на высоком уровне, выглядит то, что делает Webpack.

Webpack берёт всё, от чего зависит проект, и преобразует это в статические ресурсы, которые могут быть переданы клиенту. Упаковка приложений — это очень важно, так как большинство браузеров ограничивает возможности по одновременной загрузке ресурсов. Кроме того, это позволяет экономить трафик, отправляя клиенту лишь то, что ему нужно. В частности, Webpack использует внутренний кэш, благодаря чему модули загружаются на клиент лишь один раз, что, в итоге, приводит к ускорению загрузки сайтов.

Babel

Babel — это транспилятор, который, в основном, используется для преобразования конструкций, принятых в свежих версиях стандарта ECMAScript, в вид, понятный как современным, так и не самым новым браузерам и другим средам, в которых может выполняться JavaScript. Babel, кроме того, умеет преобразовывать в JavaScript и JSX-код, используя @babel/preset-react.

Именно благодаря Babel мы, при разработке React-приложений, можем пользоваться JSX. Например, вот код, в котором используется JSX:

Выглядит такой код аккуратно, он понятен, его легко читать и редактировать. Глядя на него, сразу можно понять, что он описывает компонент, возвращающий элемент

Преимущества первого примера перед вторым очевидны.

Предварительные требования

Для того чтобы настроить проект React-приложения, нам понадобятся следующие npm-модули.

Готовый проект, которым мы будем здесь заниматься, можно найти в этом репозитории.

Настройка Webpack

Свойство entry задаёт главный файл с исходным кодом проекта. Значение свойства mode указывает на тип окружения для компиляции (в нашем случае это окружение разработки — development ) и на то, куда нужно поместить скомпилированный файл.

Работа над проектом

с идентификатором root мы будем использовать для вывода React-приложения.

Теперь установим пакеты react и react-dom:

Внесём в index.js следующий код:

Это — стандартный код для подобных файлов React-приложений. Тут мы подключаем библиотеки, подключаем файл компонента и выводим приложение в тег

Вот код файла app.component.js :

Вот код файла app.component.css :

Настройка Babel

Благодаря этим настройкам Babel будет знать о том, какие пресеты ему нужно использовать. Теперь настроим Webpack на использование Babel.

Настройка Webpack на работу с Babel

Тут мы воспользуемся библиотекой babel-loader, которая позволит использовать Babel с Webpack. Фактически, речь идёт о том, что Babel сможет перехватывать и обрабатывать файлы до их обработки Webpack.

▍JS-файлы

Вот правила, касающиеся работы с JS-файлами (этот код пойдёт в файл webpack.config.js ), они представляют собой одно из свойств объекта с настройками, экспортируемого этим файлом:

▍CSS-файлы

Добавим в массив rules объекта module настройки для обработки CSS-файлов:

▍Статические ресурсы

Если система встретит файл с расширением PNG, SVG, JPG или GIF, то для обработки такого файла будет использован file-loader. Обработка таких файлов важна для правильной подготовки и оптимизации проекта.

Настройка сервера разработки

Вот полный код файла webpack.config.js :

Сейчас всё готово к тому, чтобы запустить сервер разработки следующей командой:

Если теперь перейти по адресу http://localhost:9000, можно будет увидеть страницу нашего проекта.

Страница проекта в браузере

Для того чтобы собрать проект воспользуйтесь следующей командой:

После этого можно будет открыть файл index.html в браузере и увидеть то же самое, что можно было видеть, запустив сервер разработки и перейдя по адресу http://localhost:9000.

Итоги

В этом материале приведён обзор настройки Webpack и Babel для их использования в React-проектах. На самом деле, на той базе, которую мы сегодня разобрали, можно создавать гораздо более сложные конфигурации. Например, вместо CSS можно воспользоваться LESS, вместо обычного JS писать на TypeScript. При необходимости можно, например, настроить минификацию файлов и многое другое. Конечно, если сегодня состоялось ваше первое знакомство с процессом самостоятельной настройки React-проектов, вам может показаться, что всё это очень сложно и куда легче воспользоваться готовым шаблоном. Однако после того, как вы немного в этом разберётесь, вы поймёте, что некоторое увеличение сложности настроек даёт вам большую свободу, позволяя настраивать свои проекты именно так, как вам это нужно, не полагаясь полностью на некие «стандартные» решения и снизив свою зависимость от них.

Уважаемые читатели! Какой подход вы чаще всего используете при подготовке рабочей среды для React-проектов?

Источник

Настраиваем React среду, часть 4

Russian (Pусский) translation by Anton L (you can also view the original English article)

Раньше React был известен тем, что на нём было проблематично начать создавать приложение, так как вам нужно понимать, как настроить инструменты сборки самостоятельно. Всё это необходимо было сделать, до того как вы напишите хотя бы одну строку React кода.

Инструмент create-react-app значительно помог с решением данной проблемы, теперь любой может создать полностью рабочее React приложение, без каких-либо знаний конфигурации инструментов сборки. create-react-app подойдёт для большинства приложений, особенно если вы новичок в React.

Как только вы станете более опытным при работе с React, у вас могут появиться свои потребности для приложения и следовательно кастомная конфигурация файлов настройки. В этом случае, следует знать как настроить инструменты сборки самостоятельно, однако create-react-app по умолчанию прячет данные инструменты.

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

По началу эта задача может показать пугающей, однако вы оцените все плюсы полного контроля над каждой конфигурацией. Вы сможете решить для себя какие именно инструменты использовать в приложении, которые могут различаться от проекта к проекту. Данный подход также позволит вам с лёгкостью добавить актуальные инструменты сборки, которые появляются каждый день.

Вы готовы создать ваше первое React приложение с нуля? Давайте приступим.

Создаём файловую структуру приложения

Чтобы продемонстрировать как настроить инструменты сборки React, мы создадим такое же, очень простое, React приложение, как в предыдущий туториалах этой серии.

Если вы выбрали все опции по умолчанию, package.json будет выглядеть следующим образом:

Теперь нам надо добавить React и ReactDOM скрипты в наш проект. Мы сделаем это с помощью npm, пакетный менеджер Node.js.

В той же директории, введите:

Добавьте файл index.html, со следующим кодом в эту же папку:

Нам нужно скомпилировать наше приложение в один JavaScript файл и использовать при этом JSX, ES6 классы и модули. Для этого установим модули Webpack и Babel, посредством npm.

Давайте сперва поставим Babel. Напишите следующее в окне командной строки:

Будут установлены все необходимые модули для Babel, чтобы компилировать ES6 и JSX код, в обычный JavaScript.

Теперь давайте установим Webpack, с помощью командной строки, как обычно:

После этого будут установлены новые модули, наш package.json файл будет выглядеть следующим образом:

Это значит, что модуль необходим во время фазы процесса разработки (то есть сборки), нашего приложения. С другой стороны, зависимости (такие как React и ReactDOM) являются зависимостями необходимыми во время запуска реального приложения, допустим на удалённом сервере и будут нужны в конечном итоге вместе с нашим кодом.

Конфигурация Webpack

Webpack нам нужен, чтобы делать три вещи

Не стоит слишком беспокоиться о синтаксисе на данный момент; просто осмотритесь и попытайтесь понять, что происходит.

Сборка и тестирование

Должно быть уже знакомо, если вы до этого читали туториалы из этой серии.

Из командной строки, запустите:

Обратите внимание на JavaScript файл, который был добавлен для нас и как компонент был отображён для корректного DOM элемента.

Автоматизация процесса компиляции

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

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

Финальные штрихи для нашего приложения

Чтобы всё было готово. Давайте добавим два небольших компонента, которые мы использовали в предыдущих туториалах.

Мы получим тот же результат что и раньше, за исключением того, что на этот раз мы вручную настроили сборку React приложения.

Шаблоны настройки React для повторного использования

После того как вы вручную настроили и создали файлы конфигурации, вам не придётся делать это снова с нуля. Для будущих проектов, вы можете повторно использовать существующие файлы, тем самым проекты на React можно быстро настроить и начать работу.

Вы можете даже создать набор определённых сборок с которыми можно начать работу над различными React приложениями, после чего сохранить их на GitHub. Затем клонировать репозиторий с начальной конфигурацией проекта, после чего запустить npm init для установки необходимых Node.js модулей.

Скачайте и установите проект

Проект React из этого туториала доступен, можете его скачать и поработать с ним, либо использовать как шаблон для новых проектов.

Введите следующие команды, для установки и компиляции React приложения.

Первая команда скачает модули Node.js, необходимые проекту, на это потребуется минута или две. Следующая команда скомпилирует React приложение и запустит мини сервер, показав вам результат в браузере.

Попробуйте сделать изменения в React приложении. Каждый раз сохранив их, ваше приложение повторно скомпилируется и окно браузера автоматически обновится, отобразив новую версию приложения.

Когда вы хотите собрать проект для распространения, запустите команду.

Заключение

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

Как только вы освоитесь с настройкой сборки React, я думаю процесс разработки приложение порадует вас. Я буду рад услышать ваши комментарии. Дайте мне знать какой проект вы хотите создать с React!

Источник

Как создать и развернуть Full-Stack React-приложение

Привет, Хабр! Представляю вашем вниманию перевод статьи «How to Build and Deploy a Full-Stack React-App» автора Frank Zickert.

Компоненты инфраструктуры позволяют легко создавать, запускать и развертывать полноценное React-приложение. С этими React-компонентами вы можете сосредоточиться на написании бизнес-логики вашего приложения. Вам не нужно беспокоиться о его конфигурации.

Хотите стать full-stack разработчиком? Full-stack приложение дополняет интерактивный веб-интерфейс React сервером и базой данных. Но такое приложение требует гораздо больше настроек, чем простое одностраничное приложение.

Мы используем компоненты инфраструктуры. Эти React-Компоненты позволяют нам определять нашу инфраструктурную архитектуру как часть нашего React-приложения. Нам больше не нужны никакие другие настройки, такие как Webpack, Babel или Serverless.

Старт

Вы можете настроить свой проект тремя способами:

Скрипт сборки добавляет еще три скрипта в package.json:

Определите архитектуру вашего приложения

Проекты, основанные на компонентах инфраструктуры, имеют четкую структуру. У вас есть один компонент верхнего уровня. Это определяет общую архитектуру вашего приложения.

Подкомпоненты (дочерние компоненты) уточняют(расширяют) поведение приложения и добавляют функции.

определяет время выполнения вашего приложения. Например, вы можете иметь dev и prod версию. Вы можете запускать и развертывать каждую отдельно.

— это страница вашего приложения. он работает как в react-router. Вот туториал о том, как работать с маршрутами.

определяет функцию, которая выполняется на стороне сервера. Он может иметь один или несколько — компонентов в качестве дочерних.

работает как Express.js-middleware.
добавляет базу данных NoSQL в ваше приложение. Принимает — компоненты как дочерние. описывает тип элементов в вашей базе данных.

Эти компоненты — все, что нам нужно для создания нашего full-stack приложения. Как видите, наше приложение имеет: одну среду выполнения, одна страница, два сервиса и базу данных с одной записью.

Структура компонентов обеспечивает четкое представление о вашем приложении. Чем больше становится ваше приложение, тем важнее это.

Проектирование Базы данных

создает Amazon DynamoDB. Это база данных ключ-значение (NoSQL). Она обеспечивает высокую производительность в любом масштабе. Но в отличие от реляционных баз данных, она не поддерживает сложные запросы.

Обладая этими знаниями, давайте взглянем на наш :

описывает структуру наших данных. Мы определяем имена для наших primaryKey и rangeKey. Вы можете использовать любое имя, кроме некоторых ключевых слов DynamoDB, которые вы можете найти здесь. Но имена, которые мы используем, имеют функциональные последствия:

Добавить элементы в базу данных

Компонент — принимает три параметра:

DataLayer обеспечивает доступ к базе данных. Посмотрим как!

Асинхронная функция mutate применяет изменения к данным в нашей базе данных. Это требует клиента и команды мутации в качестве параметров.

Данные элемента — это объект Javascript, который имеет все необходимые пары ключ-значение. В нашем сервисе мы получаем этот объект из тела запроса. Для User объект имеет следующую структуру:

Получить элементы из базы данных

Получить элементы из базы данных так же просто, как добавить их.

Посмотрите на свое Full-Stack приложение в действии

Если вы еще не запустили свое приложение, сейчас самое время сделать это: npm run start- .

Этот пост не описывает, как вы вводите данные, которые вы помещаете в базу данных, и как вы отображаете результаты. callAddUserService и callGetUserService инкапсулируют все, что является специфическим для сервисов и базы данных. Вы просто помещаете туда объект Javascript и получаете его обратно.

Вы найдете исходный код этого примера в этом GitHub-репозитории. Он включает в себя очень простой пользовательский интерфейс.

Источник

Создание и настройка проекта React с помощью приложения Create React App

Published on April 29, 2020

Автор выбрал Creative Commons для получения пожертвования в рамках программы Write for DOnations.

Введение

React — популярная система JavaScript для создания клиентских приложений. Первоначально эта система была разработана Facebook и быстро стала популярной, поскольку она позволяет разработчикам создавать быстрые приложения на основе интуитивно понятной парадигмы программирования, соединяющей JavaScript с похожим на HTML синтаксисом под названием JSX.

Раньше для создания нового проекта React требовался сложный процесс, состоящий из множества шагов и включающий систему для сборки, компилятор для конвертации современного синтаксиса в читаемый всеми браузерами код, а также базовую структуру директорий. Однако сейчас появилось приложение Create React App, включающее все пакеты JavaScript, необходимые для запуска проекта React, включая системы компиляции кода, проверки соблюдения стандартов кодирования, тестирования и сборки. Также приложение включает сервер с функцией горячей перезагрузки, обновляющей страницу при внесении изменений в код. Также оно создает структуру директорий и компонентов, позволяя перейти к программированию уже через несколько минут.

Другими словами, вам не нужно беспокоиться о настройке Webpack или другой системы сборки. Вам не нужно настраивать Babel для компиляции кода для совместимости с разными браузерами. Вам не нужно беспокоиться о работе со сложными системами разработки современных клиентских интерфейсов. Вы можете начать создание кода React с минимумом начальной подготовки.

К завершению этого обучающего руководства у вас будет работающее приложение React, которое вы сможете использовать как основу для любых будущих приложений. Вы внесете первые изменения в код React, обновите стили и выполните сборку для создания полностью минифицированной версии вашего приложения. Также вы будете использовать сервер с горячей перезагрузкой, чтобы мгновенно получать обратную связь и детально изучать компоненты проекта React. Наконец, вы начнете писать собственные компоненты и создадите структуру, которая сможет расти и адаптироваться вместе с вашим проектом.

Предварительные требования

Для прохождения этого обучающего руководства вам потребуется следующее:

Node.js версии 10.16.0, установленный на вашем компьютере. Чтобы установить его в macOS или Ubuntu 18.04, следуйте указаниям руководства Установка Node.js и создание локальной среды разработки в macOS или раздела Установка с помощью PPA руководства Установка Node.js в Ubuntu 18.04.

Также вам нужно понимать основы языка JavaScript, для изучения которого вам подойдет серия Программирование на JavaScript, а также обладать базовыми знаниями языков HTML и CSS.

Шаг 1 — Создание нового проекта с помощью приложения Create React App

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

Для установки базового проекта выполните следующую команду:

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

После успешного выполнения скрипта вы увидите соответствующее сообщение:

Также вы увидите список команд npm для выполнения, сборки, запуска и тестирования вашего приложения. Более подробно вы узнаете об этом в следующем разделе.

Теперь ваш проект настроен в новой директории. Перейдите в новую директорию:

Теперь вы находитесь в корневой директории вашего проекта. Вы уже создали новый проект и добавили в него все зависимости. Однако вы не предприняли никаких действий для запуска проекта. В следующем разделе вы научитесь использовать пользовательские скрипты для сборки и тестирования проекта.

Шаг 2 — Использование скриптов react-scripts

Перейдите в директорию проекта и изучите ее. Вы можете открыть всю директорию в текстовом редакторе или вывести файлы из него в терминале с помощью следующей команды:

В любом случае вы увидите примерно следующую структуру:

Расскажем обо всех элементах подробнее:

node_modules/ содержит все внешние библиотеки JavaScript, используемые приложением. Вам нечасто потребуется использовать его.

Директория public/ содержит базовые файлы HTML, JSON и изображений. Это корневые ресурсы вашего проекта. Вы сможете узнать о них более подробно на шаге 4.

В директории src/ содержится код React JavaScript для вашего проекта. В основном вы будете работать именно с этой директорией. Более подробно мы расскажем об этой директории на шаге 5.

README.md — это файл разметки, содержащий много полезной информации о приложении Create React App, в том числе обзор команд и ссылки на расширенные опции конфигурации. Сейчас лучше оставить файл README.md в первозданном виде. По мере развития проекта вы будете заменять данные по умолчанию более подробной информацией о вашем проекте.

Откройте файл package.json в предпочитаемом текстовом редакторе:

Эти скрипты перечислены в порядке важности. Первый скрипт запускает локальную среду разработки, к чему мы перейдем на следующем шаге. Второй скрипт выполняет сборку вашего проекта. Вы узнаете об этом более подробно на шаге 4, но лучше запустить его сейчас и посмотреть, что произойдет.

Скрипт build

Вы немедленно увидите следующее сообщение:

Это покажет вам, что приложение Create React App компилирует ваш код в пригодный для использования пакет.

После завершения вы увидите следующее:

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

Скрипт test

Для запуска скрипта test введите следующую команду:

После запуска этого скрипта на вашем терминале будут выведены результаты тестирования, а командная строка терминала будет скрыта. Он будет выглядеть примерно так:

Во-вторых, Jest не просто запускает тест один раз и закрывается. Он продолжает работать в терминале. Если вы внесете изменения в исходный код, он проведет тесты снова.

Скрипт eject

Ценность приложения Create React App заключается в том, что вам не нужно беспокоиться о значительном количестве аспектов настройки конфигурации. Для создания современных приложений JavaScript требуется множество разных инструментов, от Webpack и других сборочных систем до Babel и других средств компиляции. Приложение Create React App выполняет за вас все задачи по настройке конфигурации, поэтому извлечение проекта из приложения означает, что вам придется вносить все сложные настройки самостоятельно.

Минус приложения Create React App заключается в том, что вы не можете полностью персонализировать проект. Для большинства проектов это неважно, однако если вы захотите полностью контролировать все аспекты процесса сборки, вам нужно будет выполнить извлечение кода. Однако, как мы уже говорили выше, после извлечения кода вы не сможете обновлять его с новыми версиями приложения Create React App, и вам придется вручную добавлять все улучшения.

На данный момент вы выполнили скрипты для сборки и тестирования вашего кода. На следующем шаге мы запустим проект на рабочем сервере.

Шаг 3 — Запуск сервера

На этом шаге вы инициализируете локальный сервер и запустите проект в своем браузере.

Перед запуском сервера вы ненадолго увидите замещающий текст, а потом появится следующий экран:

Если вы запускаете скрипт в локальной системе, он откроет проект в окне браузера и переключит фокус с терминала на браузер.

В браузере вы увидите следующий шаблон проекта React:

Пока скрипт работает, у вас будет активный локальный сервер. Для остановки скрипта следует закрыть окно или вкладку терминала или ввести CTRL+C или ⌘-+c в окне или на вкладке терминала, где выполняется ваш скрипт.

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

Шаг 4 — Изменение главной страницы

Также вы можете вывести список файлов с помощью команды ls :

Вы увидите список файлов следующего вида:

Файл manifest.json содержит структурированный набор метаданных, описывающий ваш проект. Помимо прочего, в нем указывается, какие значки следует использовать для разных размеров экрана.

Файл index.html представляет собой корневую часть вашего приложения. Именно этот файл считывает сервер, и именно его отображает ваш браузер. Откройте файл в текстовом редакторе и посмотрите на него.

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

Вот что вы увидите:

В текстовом редакторе измените значение тега с React App на Sandbox :

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

Теперь вернитесь в текстовый редактор. Каждый проект React начинается с корневого элемента. На странице может быть несколько корневых элементов, но один должен присутствовать обязательно. Так React узнает, куда поместить сгенерированный код HTML. Найдите элемент

В браузере вы увидите сообщение об ошибке:

Измените имя с base на root :

Вы запустили сервер и внесли небольшое изменение в корневую страницу HTML. Пока еще вы не меняли код JavaScript. В следующем разделе мы начнем изменять код React JavaScript.

Шаг 5 — Изменение тега заголовка и стилей

Вы увидите в терминале или текстовом редакторе следующие файлы.

Рассмотрим каждый из этих файлов по отдельности.

Откройте файл App.test.js :

Когда вы откроете этот файл, вы увидите простой тест:

Здесь имеется несколько файлов CSS, поскольку вы можете импортировать стили в компонент, как если бы они представляли собой другой файл JavaScript. Поскольку у вас имеется возможность импортировать CSS в компонент напрямую, вы также можете разделить файл CSS для его применения к отдельному компоненту. Так вы разделяете области беспокойства. Вы не храните все файлы CSS отдельно от JavaScript. Вместо этого все элементы CSS, JavaScript, разметки и изображений сгруппированы вместе.

Откройте файл App.css в предпочитаемом текстовом редакторе. Если вы работаете из командной строки, вы можете использовать следующую команду:

Вы увидите следующий код:

Это стандартный файл CSS без специальных инструментов предварительной обработки CSS. Если хотите, вы можете добавить их позднее, но вначале у вас будут только простые файлы CSS. Создатели приложения Create React App старались не делать его безапелляционным, но при этом предоставить полностью готовую среду.

Проверьте браузер. Вот как это выглядело раньше:

Вот как это будет выглядеть после изменения:

Сохраните и закройте файл.

Вы увидите следующее:

Пока что вы еще не видели ничего, что вы видите в браузере. Чтобы увидеть это, откройте файл App.js :

Код в этом файле выглядит как набор стандартных элементов HTML. Вы увидите следующее:

Измените содержимое тега

с Edit src/App.js and save to reload. на Hello, world и сохраните изменения.

Переключитесь в браузер, и вы увидите изменения:

Вы внесли первое изменение в компонент React.

Здесь происходит еще несколько вещей. Посмотрите на элемент img :

Обратите внимание, как вы передаете logo в фигурных скобках. Каждый раз, когда вы передаете атрибуты, которые не являются строками или числами, вам нужно будет использовать фигурные скобки. React обрабатывает их как элементы JavaScript, а не как строки. В этом случае вы не импортируете образ, а ссылаетесь на него. Когда Webpack выполняет сборку проекта, он обрабатывает образ и задает для источника соответствующее место.

Закройте текстовый редактор.

Если вы посмотрите на элементы DOM в браузере, вы увидите, что он добавляет путь. Если вы используете Chrome, вы можете просмотреть элемент, щелкнув его правой кнопкой мыши и выбрав пункт Inspect.

Вот как это будет выглядеть в браузере:

В DOM содержится следующая строка:

Ваш код будет немного отличаться, поскольку у логотипа другое имя. Webpack нужно убедиться, что путь изображения уникальный. Так что даже если вы импортируете изображения с одинаковым именем, они будут сохраняться на разных путях.

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

Шаг 6 — Сборка проекта

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

Откройте build/index.html в текстовом редакторе.

Вы увидите примерно следующее:

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

Заключение

В этом обучающем руководстве вы создали свое первое приложение React и настроили проект с помощью инструментов сборки JavaScript без необходимости вдаваться в технические детали. В этом и заключается польза приложения Create React App: вам не нужно знать все, чтобы начать работу. Приложение позволяет игнорировать сложные этапы сборки и сосредоточиться исключительно на коде React.

Вы изучили команды для запуска, тестирования и сборки проекта. Вы будете использовать эти команды регулярно, так что запомните их для будущих обучающих руководств. Не менее важно, что вы изменили свой первый компонент React.

Если вы хотите увидеть React в действии, пройдите обучающее руководство Отображение данных из DigitalOcean API с помощью React.

Источник