hsx

hsx

Sites HTML statiques avec JSX, SASS et WebPack (pas de réaction).

À propos

• Destiné à créer des sites Web statiques (pas des applications)
• Compile JSX à HTML, sans réagir (JSX devient un langage de modèles HTML)
• Prend en charge les composants de présentation simples (similaires aux composants sans état fonctionnels de React)

Pourquoi?

• JSX est une langue de modèles HTML incroyablement puissante
• "Html in js" se sent génial
• webpack est incroyablement puissant
• La construction de sites statiques avec un module Bundler ( webpack ) offre des avantages distincts par rapport à gulp / grunt

Qu'y a-t-il dans la boîte

hsx est un CLI pour échafaudager un nouveau projet (voir le modèle). Une brève description de ce qu'il y a suit:

• Une configuration de swag webpack2
  • JSX à HTML statique via string-dom
  • Sass et postcss (avec autoprefixer et rucksack )
  • Compression d'image via imagemin
  • Serveur local alimenté par webpack-dev-server
• Composant Main câblé
• Plate-plaque Sass minimale (réinitialisation dure, mélanges, variables, etc.)
• package.json avec quelques npm scripts utiles

Installer

$ npm i hsx -g

Utiliser

Pour créer un nouveau projet:

 # 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

Ensuite, dans votre navigateur: http: // localhost: 3000 /

Premier composant

Notez le repère à babel pour transformer JSX en appels de fonction sd , au lieu 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 >
) 

Licence

Mit. © 2017 Michael Cavalea