3 ms·
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
by grimtrigger 13y ago
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
- thezilch 13y agoIt's JSX: http://facebook.github.io/react/docs/syntax.html http://facebook.github.io/react/docs/syntax.html
- grimtrigger 13y agoSo 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
- thezilch 13y agoSee also http://facebook.github.io/react/docs/getting-started.html 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.
- zpao 13y agoWhat 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.