hsx

hsx

Sitios HTML estáticos con JSX, SASS y Webpack (sin reaccionar).

Acerca de

• Destinado a construir sitios web estáticos (no aplicaciones)
• Compila JSX a HTML, sin React (JSX se convierte en un lenguaje de plantilla HTML)
• Admite componentes simples y de presentación (similares a los componentes funcionales de React)

¿Por qué?

• JSX es un lenguaje de plantilla HTML increíblemente poderoso
• "HTML en JS" se siente increíble
• webpack es increíblemente poderoso
• La construcción de sitios estáticos con un Bundler de módulo ( webpack ) ofrece distintas ventajas sobre gulp / grunt

¿Qué hay en la caja?

hsx es una CLI para andamonear un nuevo proyecto (ver la plantilla). Sigue una breve descripción de lo que está dentro:

• Una configuración de Swag webpack2
  • Jsx a html estático a través de string-dom
  • SASS y postcss (con autoprefixer y rucksack )
  • Compresión de imagen a través de imagemin
  • Servidor local alimentado por webpack-dev-server
• Componente Main conectado
• Calderla mínima de SASS (reinicio duro, mezclas, variables, etc.)
• package.json con algunos npm scripts útiles

Instalar

$ npm i hsx -g

Usar

Para crear un nuevo proyecto:

 # 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

Luego, en su navegador: http: // localhost: 3000/

Primer componente

Tenga en cuenta la señal a babel para transformar JSX en llamadas de función sd , en lugar 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 >
) 

Licencia

Mit. © 2017 Michael Cavalea