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