hsx

HSX

JSX、SASS、およびWebpackを使用した静的HTMLサイト（反応なし）。

について

• 静的Webサイトを構築するための（アプリではありません）
• JSXをHTMLにコンパイルし、反応なし（JSXはHTMLテンプレート言語になります）
• シンプルなプレゼンテーションコンポーネントをサポートします（Reactの機能的なステートレスコンポーネントに似ています）

なぜ？

• JSXは、非常に強力なHTMLテンプレート言語です
• 「JSのHTML」は素晴らしいと感じています
• webpack非常に強力です
• モジュールバンドラー（ webpack ）を使用した静的サイトの構築は、 gulp / gruntよりも明確な利点を提供します

箱の中にあるもの

hsx 、新しいプロジェクトの足場のCLIです（テンプレートを参照）。中にあるものの簡単な説明は次のとおりです。

• SWAG webpack2セットアップ
  • string-domを介してJSXから静的HTMLへ
  • SASSおよびpostcss （ autoprefixerとrucksackを使用）
  • imageminを介した画像圧縮
  • webpack-dev-serverを搭載したローカルサーバー
• 有線のMainコンポーネント
• 最小限のSASSボイラープレート（ハードリセット、ミキシン、変数など）
• いくつかの便利なnpm scriptsを備えたpackage.json

インストール

$ npm i hsx -g

使用

新しいプロジェクトを作成するには：

 # 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

次に、ブラウザで：http：// localhost：3000/

最初のコンポーネント

JSXをReact.createElementの代わりに、JSXをsd関数呼び出しに変換するためにbabelへのキューに注意してください。

 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 >
) 

ライセンス

mit。 ©2017 Michael Cavalea