react structure with multiple tags

[Pavel Dohnal]

Hello,

I have heard that react is awsome and cool. So I have decided to try write some react component. I have problem with writing multiple tags as sibilings. FInal structure should be something like this:

<span class="pois-list-image"><img src="@props.thumburl " alt="" width="44" height="44"></span>

<a class="icon-go-to"></a>

<b class="pois-list-title">@props.name</b>

<span class="pois-list-subtitle">@props.perex</span>

I tried this code, but it obviously does not work:

myfunction = este.react.create (`/** @lends {React.ReactComponent.prototype} */`)

render: ->

@span({'className': 'pois-list-image'},

@img({'src': @props.thumburl, 'width': 44, 'height': 44}))

@a('className': 'icon-go-to')

@b({'className': 'pois-list-title'}, @props.name)

@span({'className' : 'pois-list-subtitle'}, @props.perex)

This is not working because it only returns last command so it renders only last span not whole structure. I can close it inside some <div> but a) I don't want this stupid wraping div. b) inside this div i have the same problem.

Second question should be: Is there any documentation where can I find solution for this problem and other react relative stuff. I searched what can be inside first parameter of @span but without success.

[Daniel Steigerwald]

a) stupid wraping DIV is a must because that's React limitation. One component, one element.

http://facebook.github.io/react/docs/reference.html

btw, este.react.create creates wrapper for nicer syntax in coffeescript, you as JS developer should consider jsx.

--
You received this message because you are subscribed to the Google Groups "Este.js - The state of art Javascript framework and dev stack" group.
To unsubscribe from this group and stop receiving emails from it, send an email to estejs+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.