عکس HosseinAgha
Minimal React boilerplate with Stylus (css-modules), LiveScript, Hot ReloadingLiveScript
موضوع‌ها
۰
فورک‌ها
۱
ستاره‌ها
۴
تاریخ ایجاد
۸ خرداد ۱۳۹۶
آخرین بروزرسانی
نزدیک ۵ سال قبل
لایسنس
MIT License

react-livescript-boilerplate

Minimal React boilerplate with Stylus (css-modules), LiveScript, Hot Reloading.

Based on the guide available at https://webpack.js.org/guides/hmr-react/

Usage

npm install
npm start
open http://localhost:3000

To use the project clone it and remove the .git directory then have fun

Now edit src/App.ls.
Your changes will appear without reloading the browser like in this video.

Stylus

loads stylus files using css modules standard

Language support

Hot Reloads both JSX and LiveScript files

Livescript Helper Functions

We provide helper functions (div, input, span and el) for livescript
you can require them using $el alias path
Usage:

  • first parameter can be a class array or a className string
    array odd elements are classNames and even elements define whether class should be added

    div [css.container, true, css.hasBorder, hasBorder],
    children: 
      div null, children: \salam
    # if hasBorder is true this roughly equals to jsx bellow
    
    <div className="container hasBorder"> 
    <div>salam</div>
    </div>
    
  • second parameter is props. you should also provide children using props:

    div css.container,
    children: ...
    
  • el function gets a React component or a basic element string like "div" as first argument, others are the same

    el \div, [css.container, true, css.hasBorder, hasBorder],
    children: ...
    el Button, [css.container, true, css.hasBorder, hasBorder],
    children: ...
    onClick: ...
    
  • elem is an alias for React.createElement

  • be sure to use svg function to render svg files (abstracts ES6 syntax of react-svg-loader)

Based on react-hot-boilerplate