В моем последнем сообщении я рассмотрел базовую настройку и то, как управлять элементами DOM, используя нестандартный синтаксис, предоставляемый фреймворком Mithril после установки. В этой статье я расскажу, как настроить и использовать синтаксис JSX с Mithril. Для тех, кто не знаком с JSX; JSX (JavaScript XML) - это синтаксическое расширение Javascript, созданное для ReactJS, которое упрощает чтение (и больше похоже на ванильный HTML) код. С JSX код намного легче читать и быстро переходить (особенно для тех, кто знаком с React).

Основной синтаксис Mithril:

Mithril с синтаксисом JSX:

Настройка

  1. Создайте папку базового проекта, в данном случае я называю ее 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 здесь.