How to load a response component written in JSX code from my Javascript code

Question

I am new to the reaction, so please excuse me if I cannot correctly formulate this question. So I have this jsx script file that maps my reaction components to my view as soon as it loads. Initially, in this script file, I have no data to display in my component, so I am not processing any of my subcomponents. However, at some later moment, when I get data from, say, a web service, I would really like to display components with this data again.

The components in my JSX script file have no state, it just needs to show the data that I pass into it.

The JSX script loads a fine and displays components with initially no data specified in the JSX file itself. However, when I try to make this component again in another Javascript file, it gives me a reference error, the component is undefined.

Is there a JSX nation, / *** @jsx React.DOM * / to create a completely different namespace? If so, how can I access it? And what's the best way to remake components with new data from your JSX script file. Thanks in advance!:)

/ ** Edited * / guys, sorry for not adding the code .. instead let me ask a simple question .. how can I access the react component in my jsx script from my javascript file?

/ ** Edited * / Ok guys, here is a sample code:

var Avatar = React.createClass({ render: function() { return ( <div> <ProfilePic username={this.props.username} /> <ProfileLink username={this.props.username} /> </div> ); } }); var ProfilePic = React.createClass({ render: function() { return ( <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} /> ); } }); var ProfileLink = React.createClass({ render: function() { return ( <a href={'http://www.facebook.com/' + this.props.username}> {this.props.username} </a> ); } }); React.render( <Avatar username="pwh" />, document.getElementById('example') ); 

Thus, the above code can be embedded in your html tags specified as a jsx script, or downloaded externally. Pay attention to the username support in the Avatar element (the top of the most responsive component in the hierarchy), the problem is how can we reuse the Avatar component in another javasccript file with a different username? All is well and good, if you set it up and run. The first component loads, it sets pwh as the username. However, how can I access this element from my javascript (i.e., Outside the jsx script) and repeat it with the new username value? Is it possible?

Answer 1

I think you encountered a b / c problem when a simple JS file was being executed, the JSX file was still being translated by JSXTransformer, so the browser was not processed. Therefore, characters inside JSX files are not yet defined

There are two approaches that I would recommend:

For development / prototype purposes: add /** @jsx React.DOM */ to the regular JS file, and also include this js file on the HTML page as type="text/jsx" so that Transformer also tries to translate.

For the production code, install the jsx npm install -g react-tools compiler npm install -g react-tools , then run jsx <src file> <output filename> to convert your JSX file to plain javascript

see this: http://facebook.imtqy.com/react/docs/tooling-integration.html

ps are you completing the entry point of the application inside the DOM.ready callback or something equivalent?