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

Необходимые понятия, которые нужно знать

  • Webpack — помогает объединить код в один файл.
  • Babel — используется для преобразования кода ECMAScript 2015+ (ES6+) в обратно совместимую версию JavaScript, которая может выполняться старыми движками JavaScript.
  • Node.js — установка узла, создание package.json и установка модулей узла с помощью npm.

Эта статья поможет нам понять

  • Как webpack и babel работают в более практическом смысле;
  • Фактический процесс создания приложения React от начала до конца;
  • Как строится разработка и производственная сборка и ее значение;
  • Настройка необходимых данных сервера;
  • Написание конфигов webpack и babel и понимание логики, которая там существует;
  • Как мы можем настроить рендеринг на стороне клиента и на стороне сервера;
  • Понимание того, как HMR работает в React.

Исходный код

Шаг за шагом

1. Убедитесь, что узел установлен в вашей системе

Установите Node.js в свою систему и убедитесь, что он установлен, набрав node -v в своем терминале.

2. Создайте папку проекта и package.json

Создайте папку проекта с любым именем и перейдите к ней, а затем используйте npm init, чтобы создать файл package.json внутри папки. Перейдите к папке.

3. Установите зависимости веб-пакета

npm i --save-dev webpack webpack-cli webpack-dev-server
  • webpack — позволит нам объединить весь наш код в окончательную сборку.
  • webpack-cli —инструмент командной строки для предоставления разработчикам гибкого набора команд для увеличения скорости при настройке пользовательского проекта веб-пакета. Если вы используете webpack v4 или более позднюю версию и хотите вызывать webpack из командной строки, вам понадобится это
  • webpack-dev-server —сервер разработки Webpack представляет собой мини-сервер Node.js Express server.It использует библиотеку под названием SockJS для эмуляции веб-сокета. Позволит нам создать среду разработки localhost.

4. Установите зависимости Babel

npm i --save-dev babel-loader @babel/preset-env @babel/core 
@babel/plugin-transform-runtime 
@babel/preset-react 
@babel/eslint-parser 
@babel/runtime
@babel/cli
  • babel-loader — позволяет транспилировать файлы JavaScript с помощью babel и webpack. предоставляет утилиту-загрузчик, которая позволяет пользователям добавлять пользовательскую обработку конфигурации Babel для каждого файла, который он обрабатывает.
  • @babel/preset-env —позволяет вам использовать последнюю версию JavaScript без необходимости микроуправления тем, какие преобразования синтаксиса (и, при необходимости, полифиллы браузера) необходимы вашей целевой среде (средам). Это делает вашу жизнь проще, а пакеты JavaScript меньше!
  • @babel/core —основной пакет
  • @babel/plugin-transform-runtime —плагин, который позволяет повторно использовать внедренный вспомогательный код Babel для экономии размера кода.
  • @babel/preset-react —используйте пресет реакции, когда мы используем Reactjs. Помогает конвертировать html-файлы в файл на основе реакции.
  • babel-eslint —парсер, который позволяет ESLint работать с исходным кодом, преобразованным Babel.
  • @babel/runtime —пакет, содержащий полифилл и многие другие вещи, на которые может ссылаться Babel.
  • @babel/cli —интерфейс командной строки для использования babel

5. Установите необходимые линтеры и путь

npm i --save-dev eslint eslint-config-airbnb-base 
eslint-plugin-jest 
eslint-config-prettier
path

6. Установите реакцию и реакцию-дом

npm i react react-dom

7. Создайте файл index.html

Создайте папку с именем «public» в корне проекта. Внутри создайте index.html.

8. Создайте файл App.js

Создайте папку src и внутри нее создайте файл с именем App.js. Добавьте в него следующий код:

8. Создайте файл index.js

Создайте файл index.js в корне проекта или в любом другом месте. Это будет точкой входа для нашего веб-пакета.

Добавьте в него следующий код:

9. Создайте файл webpack.config.js

Создайте файл с именем webpack.config.js в корне проекта и добавьте следующий код. Более того, этот файл содержит конфигурации, которые обеспечивают объединение файлов в один файл и настройку сервера разработки.

Комментарии в коде помогают нам понять, что делает каждая строка:

10. Создайте файл .babelrc

Создайте файл с именем .babelrc в корне и добавьте следующий код.

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

11. Обновите файл package.json

Добавьте в него сценарии запуска и сборки — строки номер 7 и 8.

  • Сценарий start просит запустить webpack-dev-server в нашем текущем проекте на порту 9500 из общей папки.
  • Команда сборки просит нас собрать этот пакет в файле main.js. На самом деле вся логика выполняется в файле webpack.config.js.

12. Окончательная структура папок проекта должна быть такой

13. Запустите «npm run build»

  • После добавления вышеуказанного кода нажмите npm run build. он создает файл main.js в нашей общедоступной папке. На самом деле размер файла более 1 МБ. Это наша разработка.

14. Запустите «npm start»

Запустите приложение, введя npm start из терминала. Это запустит наш сервер разработки.

Окончательный код можно найти по ссылке на репозиторий, которой я поделился выше.

💡Примечание. Если вы хотите поделиться своими компонентами React и повторно использовать их в нескольких проектах, вы можете использовать набор инструментов с открытым исходным кодом, например Bit, который позволяет создавать повторно используемые компоненты. Вы можете разрабатывать компоненты изолированно и публиковать их как автономные объекты, которые можно искать, тестировать и устанавливать в разных проектах. Узнайте больше здесь и здесь.



Как создать компонуемое приложение React с помощью Bit
В этом руководстве вы узнаете, как создать и развернуть полноценное компонуемое приложение React с помощью Bit. Создание…bit.dev





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



Другие ключевые выводы

Изменение сборки на производство

  • Теперь мы можем попробовать изменить его на производственную сборку. Для этого вам необходимо внести следующие изменения в файл webpack.config.js.
mode: "production"
  • теперь запуск npm run build снова создаст файл main.js, но его размер будет намного меньше (‹200 КБ).
  • С оптимизацией с 1000 КБ до 200 КБ мы можем захотеть всегда использовать производственную сборку. Но мы должны использовать режим разработки при разработке, потому что горячая перезагрузка выполняется быстрее в режиме разработки.

Замена горячего модуля

  • HMR обрабатывается webpack-dev-server. Мы также можем использовать HMR без опции загрузки страницы. Установка необходимых параметров очень помогает с точки зрения производительности.
  • Проверьте приведенный ниже фрагмент кода для различных сценариев:
//If you want to use HMR but no live reload then use the below config in webpack.config.js
devServer: {
        hot: true ,
        liveReload:false
    }

//If you want don't want to use HMR but want to use live reload then,
devServer: {
        hot: false ,
        liveReload: true
    },

//If you want don't want to use live reload then,
devServer: {
        hot: false , //this is mandatory to be set to false for this
        liveReload: false
    },

Рекомендации

  1. HMR с вебпаком — https://webpack.js.org/guides/hot-module-replacement/
  2. Различные способы уменьшить размер бандла — https://blog.jakoblind.no/3-ways-to-reduce-webpack-bundle-size/
  3. Понимание devserver и работа в деталях — https://webpack.js.org/configuration/dev-server/#devserverlivereload
  4. Минимизация пакета для производства — https://webpack.js.org/plugins/mini-css-extract-plugin/#minimizing-for-production
  5. Как создается рабочий сайт с помощью веб-пакета — https://webpack.js.org/guides/production/
  6. Настройка идеального сервера devpack — https://linguinecode.com/post/how-to-setup-webpack-dev-server-react-babel
  7. Подробно о загрузчиках — https://webpack.js.org/concepts/loaders/
  8. Детальное понимание babel-preset-env — https://blog.jakoblind.no/babel-preset-env/

Я надеюсь, что вы нашли эту статью полезной. Скоро встретимся со следующим.

Создавайте приложения React с повторно используемыми компонентами, как Lego

Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.

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

→ Подробнее

Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите:

→ Микро-интерфейсы

→ Система дизайна

→ Совместное использование кода и повторное использование

→ Монорепо

Узнать больше:



Как мы создаем микроинтерфейсы
Создаем микроинтерфейсы для ускорения и масштабирования нашего процесса веб-разработки.blog.bitsrc.io





Как мы создаем систему проектирования компонентов
Создаем систему проектирования с компонентами для стандартизации и масштабирования процесса разработки пользовательского интерфейса.blog.bitsrc.io





Как повторно использовать компоненты React в своих проектах
Наконец-то вы выполнили задачу по созданию фантастического поля ввода для формы в вашем приложении. Вы довольны…bit.dev





5 способов создать монорепозиторий React
Создать монорепозиторий React производственного уровня: от быстрой сборки до совместного использования кода и зависимостей.blog.bitsrc.io





Как создать компонуемое приложение React с помощью Bit
В этом руководстве вы узнаете, как создать и развернуть полноценное компонуемое приложение React с помощью Bit. Создание…bit.dev