Hacker News Reader

Comment by grimtrigger | Hacker News Reader

    return <div>Hello {this.props.name}</div>

What is this returning? A string, or a var '<div>Hello {this.props.name}</div>'? Never seen js that looks like this

View on HN

What this actually returns is a lightweight DOM-like structure. The framework then uses that to make modifications to the real DOM. In the case of the first render that's going to mean setting innerHTML of something. After that though, if you re-render this component with a different value for props.name, React won't re-render the <div> in the DOM, but will instead just modify it's contents.

From the article: > The data returned from render is neither a string nor a DOM node -- it's a lightweight description of what the DOM should look like.

Like @thezilch said, the syntax is JSX, which is pre-processed into runnable JS.

It's JSX: http://facebook.github.io/react/docs/syntax.html

So jSX is a language that compiles down to js? Looks like its supported in Chrome but can't confirm any others. If so, you should make a note in the docs, not sure many devs are familiar with JSX.

ps. looks like a useful project

See also http://facebook.github.io/react/docs/getting-started.html, linked from the previous page, and the subsequent example JSFiddle(s). JSX does and is recommended to be compiled down to JS, or you can directly use the JS syntax it will otherwise compile. Otherwise, if you only want the compile step to be apart of your production toolchain, you can include the JSXTransformer in development environments, which will perform the transformation in the browser -- not just Chrome.

Reply on news.ycombinator.com