Как зарабатывать больше и получать удовольствие от работы?
Вебинар

Решение ошибки 'jsx' not enabled без create react app

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

Быстрый ответ

Для решения проблемы с синтаксисом 'jsx', Babel необходимо настроить для совместной работы с React:

  1. Установите пресеты Babel с помощью такой команды:

    JS
    Скопировать код
     npm install @babel/preset-env @babel/preset-react --save-dev
  2. Создайте файл .babelrc в корневой директории проекта и добавьте в него ранее установленные пресеты:

    JS
    Скопировать код
     { 
       "presets": ["@babel/preset-env", "@babel/preset-react"] 
     }
  3. Если вы испольуете webpack, обновите файл webpack.config.js, добавив в него конфигурацию для babel-loader:

    JS
    Скопировать код
     {
       test: /\.(js|jsx)$/,
       exclude: /node_modules/,
       loader: 'babel-loader',
       options: {
         presets: ['@babel/preset-env', '@babel/preset-react']
       }
     }

    Теперь React сможет работать в вашем JavaScript коде, при условии корректной настройки инструментов для библиотек.

Кинга Идем в IT: пошаговый план для смены профессии

Как проанализировать JSX? Плагины для Babel придут на помощь

Использование плагинов для Babel

Babel требуются специальные плагины для распознавания синтаксиса JSX. Это можно сделать так:

JS
Скопировать код
npm install @babel/plugin-syntax-jsx --save-dev

После установки добавьте плагин в раздел plugins файла .babelrc:

JS
Скопировать код
{ 
  "plugins": ["@babel/plugin-syntax-jsx"]
}

Таким образом, Babel будет уметь обрабатывать JSX, даже не выполняя его трансформацию.

Подробнее об этом расскажет наш спикер на видео
skypro youtube speaker

Запуск кода

Собрать проект можно с помощью yarn и WSL следующей командой:

JS
Скопировать код
yarn webpack-dev-server --mode development

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

Избегайте ведения двух файлов конфигурации

Дайте предпочтение файлу .babelrc перед babel.config.js благодаря его контекстно-зависимым настройкам.

Исключите node_modules из конфигурации webpack — это поможет минимизировать потенциальные конфликты:

JS
Скопировать код
{ 
  exclude: /node_modules/ 
}

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

Советы от опытного программиста

Проверьте состав

Убедитесь, что все необходимые плагины и пресеты Babel присутствуют в файле package.json. При необходимости, обновляйте их:

JS
Скопировать код
yarn upgrade @babel/preset-env @babel/preset-react @babel/plugin-syntax-jsx

Все загрузчики на борту

Не забудьте проверить настройки загрузчиков в webpack, чтобы быть уверенными в корректной обработке расширения .jsx:

JS
Скопировать код
{ test: /\.jsx?$/, /*...*/ }

Начало работы с Create React App

Чтобы упростить процесс настройки, используйте инструмент Create React App:

JS
Скопировать код
npx create-react-app my-app

Данная утилита сразу настроит Babel и webpack для работы.

Используйте силу сообщества

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

Визуализация

Представьте, что синтаксис JSX — это часть пазла, который подходит к картине только с правильно настроенным адаптером (Babel):

Markdown
Скопировать код
Ваш текущий пазл:        [🧩🧩??]

С адаптированным JSX:    [🧩🧩🔧🔮🧩]

Отсутствует адаптер:     [🧩🧩🚫🔮🧩]

С поддержкой JSX в Babel код становится совершенставным!

Максимальная продуктивность

Гармоничная среда

Используйте сочетание инструментов yarn и WSL для стабильной и эффективной работы. Yarn обеспечит быстродействие, надежность и безопасность при управлении зависимостями.

Необходимые файлы на своих местах

Проверьте, содержит ли ваша структура файлов все важные элементы: index.html, index.js, package.json, webpack.config.js и .babelrc.

Больше осторожности до коммита

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

Полезные материалы

  1. JSX подробно – React — детальное руководство по JSX в React.
  2. @babel/plugin-transform-react-jsx · Babel — официальный плагин для трансформации JSX.
  3. Добавление пользовательских переменных окружения | Create React App — руководство по добавлению поддержки JSX в Create React App.
  4. Книга Fullstack React 🐬 – Полное руководство по ReactJS и друзьям — инструкция по интеграции JSX с webpack.
  5. Почти полное руководство по webpack 5 (2020) — как настроить webpack и Babel для работы с React с нуля.
  6. Минимизированная ошибка React #321 – React — раскрытие наиболее распространённых ошибок, связанных с JSX и webpack.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какой пакет необходимо установить для работы с JSX в Babel?
1 / 5