hsx

HSX

Sites HTML estáticos com JSX, SASS e Webpack (sem reação).

Sobre

• Destinado a criar sites estáticos (não aplicativos)
• Compila JSX com HTML, sem reação (JSX se torna uma linguagem de modelagem HTML)
• Suporta componentes simples e de apresentação (semelhante aos componentes sem estado funcionais do React)

Por que?

• JSX é uma linguagem de modelos HTML incrivelmente poderosa
• "Html in js" é incrível
• webpack é incrivelmente poderoso
• Construir locais estáticos com um módulo Bundler ( webpack ) oferece vantagens distintas sobre gulp / grunt

O que está na caixa

hsx é uma CLI para andaimes de um novo projeto (consulte o modelo). Uma breve descrição do que está dentro segue:

• Uma configuração de swag webpack2
  • JSX para HTML estático via string-dom
  • SASS e postcss (com autoprefixer e rucksack )
  • Compressão de imagem via imagemin
  • Servidor local alimentado pelo webpack-dev-server
• Componente Main conectado
• Minimaly SASS Boilerplate (redefinição dura, mixins, variáveis, etc.)
• package.json com alguns npm scripts úteis

Instalar

$ npm i hsx -g

Usar

Para criar um novo projeto:

 # 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

Então, no seu navegador: http: // localhost: 3000/

Primeiro componente

Observe a sugestão de babel para transformar o JSX em chamadas de função sd , em vez de 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 >
) 

Licença

Mit. © 2017 Michael Cavalea