hsx

HSX

Статические HTML -сайты с JSX, SASS и WebPack (без реагирования).

О

• Предназначен для создания статических веб -сайтов (не приложений)
• Компилирование JSX в HTML, без реагирования (JSX становится языком шаблона HTML)
• Поддерживает простые презентационные компоненты (аналогично функциональным компонентам бездействия).

Почему?

• JSX - невероятно мощный язык HTML -шаблон
• "HTML в JS" чувствует себя потрясающе
• webpack безумно мощный
• Создание статических сайтов с модулем Bundler ( webpack ) предлагает четкие преимущества по сравнению с gulp / grunt

Что в коробке

hsx является CLI для строительства нового проекта (см. Шаблон). Краткое описание того, что находится внутри, следует:

• Настройка SWAG webpack2
  • JSX к статическому HTML через string-dom
  • Sass и postcss (с autoprefixer и rucksack )
  • Сжатие изображения через imagemin
  • Локальный сервер, работающий на webpack-dev-server
• Main компонент подключения
• Минимальный шахтный пакет (жесткий сброс, смесины, переменные и т. Д.)
• package.json с некоторыми полезными npm scripts

Установить

$ npm i hsx -g

Использовать

Чтобы создать новый проект:

 # using node and npm
# install hsx globally
$ npm install hsx -g

# use the hsx command from the CLI to scaffold a project
# template files are copied to the CWD, unless a path is specified
$ hsx [path]
$ npm i
$ npm run dev

Затем в вашем браузере: http: // localhost: 3000/

Первый компонент

Обратите внимание на сигнал в babel , чтобы преобразовать JSX в вызовы функций sd , а не React.createElement .

 import sd from 'string-dom'

/** @jsx sd */

// create a simple Div component
// children is the HTML wrapped by the element
const Div = ( { children , name } ) => (
  < div class = { name } >
    { children }
  </ div >
)

// render it to the DOM, with some inner content
document . body . innerHTML += (
  < Div name = "site" >
    < h1 > hsx </ h1 >
    < p > This is inside the Div component! </ p >
  </ Div >
) 

Лицензия

Грань © 2017 Michael Cavalea