Создание каталога

При первом создании приложения React вы начинаете с запуска следующих команд в терминале:

Mkdir ‹имя_каталога›

Cd ‹имя_каталога›

Инициализация NPM

Mkdir создает новый каталог, а команда cd позволяет вам изменить каталог, в котором вы сейчас находитесь, и войти в новый, который вы только что создали. Следующая команда npm init создает файл package.json для вашего нового приложения React.

Пакеты NPM

Чтобы приложение работало успешно, должны быть установлены все необходимые пакеты и другие пакеты, необходимые им для работы. Сначала мы устанавливаем веб-пакет с помощью команды:

npm i — сохранить-dev webpack webpack-cli webpack-dev-сервер

Webpack — это конструктор модулей, который переводит все зависимости на язык, понятный браузеру. Затем следующая команда устанавливает плагины babel:

npm i — save-dev babel-loader @babel/preset-env @babel/core @babel/plugin-syntax-dynamic-import @babel/plugin-transform-runtime @babel/preset-react babel-eslint @babel/runtime

Babel — это компилятор Javascript, который преобразует JSX в базовый ванильный Javascript, чтобы приложения можно было запускать в любом браузере. Зависимости React также должны быть установлены с помощью:

npm я реагирую

React — это библиотека, которая используется для создания пользовательских интерфейсов. React-DOM — это средство визуализации, используемое React, которое позволяет отображать нашу программу в браузере.

Создание группировщика

После установки всех зависимостей необходимо создать файл webpack.config.js, чтобы конкретно указать, как должны быть объединены файлы приложения. Также необходимо создать файл index.js.

После создания файлов вернитесь к файлу webpack.config.js. Ниже приведена возможная конфигурация для этого файла:

Подводя итог, файл webpack.config.js говорит веб-пакету взять index.js из записи, проверить все указанные расширения файлов, а затем применить к ним правила, указанные в module.rules. Когда мы создаем наше приложение React, связанный код создается в виде файла main.js в общей папке.

Создание файла .babelrc

Поскольку в нашем файле веб-пакета указано, что должен использоваться загрузчик babel, следующим шагом будет создание файла .babelrc в основной папке проекта. Базовая конфигурация для этого файла будет:

В файле .babelrc указаны конкретные подключаемые модули и пресеты, которые мы будем использовать из установленного ранее пакета babel. Теперь, когда эти файлы готовы, мы переходим к созданию двух папок: «public» и «src». «Public» должен содержать файл index.html, а «src» содержит файл App.js. Обычно используемый начальный код для файла index.js:

Корневой элемент, указанный в «ReactDOM.render(‹App /›, document.getElementById(«root»))», создается в файле index.html.

Основной формат файла Index.html

Поскольку корневой HTML-элемент еще не создан, мы переходим к index.html и вставляем общий шаблон HTML ниже:

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

Вышеприведенный код создает элемент div, содержащий утверждение «Create react app работает без npx create-react-app!» Когда вызывается функция App, наш элемент возвращается. Поскольку он импортируется и ссылается на него в index.js, этот файл получит возвращаемое значение и отобразит его в элемент с именем «root», который был создан в файле index.html.

Редактирование Package.json

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

Теперь, после запуска npm start, мы говорим коду выполнить webpack-dev-server. Когда выполняется сборка npm run, связанный код создается в виде файла main.js с использованием webpack. Кроме того, при выполнении сборки наш файл main.js в общей папке будет создан для представления сборки для разработки.

Чтобы завершить наш проект, мы запускаем npm start, который откроет браузер на порту, который мы указали в нашем файле webpack.config.js. На этом этапе у нас должна быть работающая сборка реагирующего приложения без использования набора инструментов create-react-app.