В моем последнем сообщении я рассмотрел базовую настройку и то, как управлять элементами DOM, используя нестандартный синтаксис, предоставляемый фреймворком Mithril после установки. В этой статье я расскажу, как настроить и использовать синтаксис JSX с Mithril. Для тех, кто не знаком с JSX; JSX (JavaScript XML) - это синтаксическое расширение Javascript, созданное для ReactJS, которое упрощает чтение (и больше похоже на ванильный HTML) код. С JSX код намного легче читать и быстро переходить (особенно для тех, кто знаком с React).
Основной синтаксис Mithril:
Mithril с синтаксисом JSX:
Настройка
- Создайте папку базового проекта, в данном случае я называю ее mithril-JSX-setup. Добавьте следующие папки таким образом, чтобы ваше файловое дерево выглядело так:
mithril-JSX-setup |-- src | |-- index.jsx |-- .babelrc |-- index.html |-- webpack.config.js
- папка src будет файлом index.jsx, который будет действовать как место, откуда все будет отображаться.
- .babelrc - это место, где JSX будет преобразован в Javascript, доступный для чтения браузером.
- index.html - это шаблон приложения.
- а webpack.config.js - это место, где выполняется конфигурация для WebPack.
2) После настройки дерева файлов запустите npm init, который создаст файл package.json.
3) Удалите код из файла package.json и добавьте его вместо него:
4) Запустите npm install, чтобы установить все необходимые зависимости.
5) Перейдите к файлу webpack.config.js и вставьте это:
6) Перейдите в файл .bablerc и вставьте этот фрагмент кода, который позволяет использовать JSX в нашем проекте.
7) Перейдите к файлу index.html и вставьте это:
8) Теперь перейдем к index.jsx (убедитесь, что у него есть тег .jsx, а не тег .js, чтобы он обрабатывался как файл JSX) и вставьте следующий код:
9) Наконец, запустите npm start в терминале. Если все было введено правильно, вы должны увидеть это в своем браузере:
С такой настройкой вы теперь можете писать более читаемый код для всех компонентов вашего проекта, используя синтаксис JSX! Для получения дополнительной информации о JSX ознакомьтесь с обширной документацией ReactJS здесь.