hsx

Hsx

Statische HTML -Sites mit JSX, SASS und Webpack (kein Reaktieren).

Um

• Bestimmt zum Erstellen statischer Websites (keine Apps)
• Kompiliert JSX mit HTML ohne Reaktion (JSX wird zu einer HTML -Templatierungssprache)
• Unterstützt einfache, vorliegende Komponenten (ähnlich wie bei den funktionellen staatenlosen Komponenten von React).

Warum?

• JSX ist eine unglaublich leistungsstarke HTML -Vorlagensprache
• "HTML in JS" fühlt sich großartig an
• webpack ist wahnsinnig mächtig
• Aufbau statischer Websites mit einem Modul -Bundler ( webpack ) bietet unterschiedliche Vorteile gegenüber gulp / grunt

Was ist in der Box?

hsx ist eine CLI für das Gerüst eines neuen Projekts (siehe Vorlage). Eine kurze Beschreibung dessen, was sich darin befindet, folgt:

• Ein Swag webpack2 -Setup
  • JSX zu statischer HTML über string-dom
  • Sass und postcss (mit autoprefixer und rucksack )
  • Bildkomprimierung über imagemin
  • Lokaler Server, der von webpack-dev-server betrieben wird
• Kabel-Up- Main
• Minimaler Sass -Kesselplatte (hartes Reset, Mixins, Variablen usw.)
• package.json mit einigen nützlichen npm scripts

Installieren

$ npm i hsx -g

Verwenden

Um ein neues Projekt zu erstellen:

 # 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

Dann in Ihrem Browser: http: // localhost: 3000/

Erste Komponente

Beachten Sie den Hinweis auf babel , um JSX in sd -Funktionsaufrufe zu verwandeln, anstatt zu 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 >
) 

Lizenz

MIT. © 2017 Michael Cavalea