hsx

hsx

Situs HTML statis dengan JSX, Sass, dan Webpack (tidak bereaksi).

Tentang

• Dimaksudkan untuk membangun situs web statis (bukan aplikasi)
• Mengkompilasi jsx ke html, tanpa reaksi (jsx menjadi bahasa templating html)
• Mendukung komponen presentasi sederhana (mirip dengan komponen stateless fungsional React)

Mengapa?

• JSX adalah bahasa templating HTML yang sangat kuat
• "Html in js" terasa luar biasa
• webpack sangat kuat
• Membangun Situs Statis Dengan Modul Bundler ( webpack ) menawarkan keunggulan berbeda dibandingkan gulp / grunt

Apa yang ada di dalam kotak

hsx adalah CLI untuk perancah proyek baru (lihat template). Deskripsi singkat tentang apa yang di dalam berikut:

• Pengaturan webpack2 Swag
  • JSX ke html statis melalui string-dom
  • Sass dan postcss (dengan autoprefixer dan rucksack ))
  • Kompresi gambar melalui imagemin
  • Server lokal ditenagai oleh webpack-dev-server
• Komponen Main kabel-up
• Minimal Sass Boilerplate (hard reset, mixin, variabel, dll)
• package.json dengan beberapa npm scripts yang berguna

Memasang

$ npm i hsx -g

Menggunakan

Untuk membuat proyek baru:

 # 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

Kemudian, di browser Anda: http: // localhost: 3000/

Komponen pertama

Perhatikan isyarat untuk babel untuk mengubah JSX menjadi panggilan fungsi sd , alih -alih 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 >
) 

Lisensi

Mit. © 2017 Michael Cavalea