hsx

HSX

JSX, SASS 및 웹 팩이있는 정적 HTML 사이트 (반응 없음).

에 대한

• 정적 웹 사이트 구축을위한 의미 (앱 아님)
• REACT없이 JSX를 HTML로 컴파일합니다 (JSX는 HTML 템플릿 언어가됩니다)
• 단순하고 프레젠테이션 구성 요소를 지원합니다 (React의 기능성 상태 부족 구성 요소와 유사)

왜?

• JSX는 엄청나게 강력한 HTML 템플릿 언어입니다
• "JS의 HTML"은 굉장합니다
• webpack 미친 듯이 강력합니다
• grunt Bundler ( webpack gulp 가있는 정적 사이트 구축

상자 안에있는 것

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 대신 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