For those who don't like or even hate JSX

I did some React learning today. Here’s the experiment to work with React without JSX hell: https://github.com/daveeel/hello-react-meteor-livescript

So that you could write something in Livescript like:

render: ->
  if @data.post
    _div do
      * _a { href: FlowRouter.path('/') }, 'Back'
        _h3 this.data.post.title
        _p this.data.post.content
  else
    _div 'loading...'

Instead of:

getContent() {
  return <div>
    <a href={FlowRouter.path('/')}>Back</a>
    <h3>{this.data.post.title}</h3>
    <p>{this.data.post.content}</p>
  </div>;
},
render() {
  return (this.data.post)? this.getContent() : <div>loading...</div>;
}

This is naturally much more readable than JSX if you are used to Jade. Even better if you also use Coffeescript. Best if you use Livescript for it’s functional power.

6 Likes

This is great! The more options the better.

1 Like

or functional + coffee

2 Likes

Thanks for the link. Quite a few nice ideas to take away apart from the CS syntax.

There are very valid reasons to use LS over CS, but it’s up to personal research :smile:

Never heard of LS until that post. Big thanks, mate!

1 Like