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

Question

i'm new to reactjs so please excuse me if I can't phrase this question properly. So I have this jsx script file which renders my react components into my view as soon as it is loaded. Initially in this script file I don't have any data to show in my component, so I don't render any of my sub components. However at some later point, when I receive data from, say a web service, I would very much like to render the components again with that data.

The components in my JSX script file has no state, it simply is supposed to show the data i pass into it.

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

Does the JSX nation, /*** @jsx React.DOM */ create a totally different namespace? If so how can I access it? And what is the best way to re-render components with new data from outside your JSX script file. Thanks in advance! :)

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

/**Edited*/ Alright guys, here is a code example:

 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')
 );

So, the above code can be embedded in your html tags specifed as jsx script or loaded externally. Notice the username prop in the Avatar element(top most react component in the heirarchy), the problem is how can we re-rennder the Avatar component in another javasccript file with a different username? Its all fine and well, if you set it up like this and run. The first time 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 rerender it with a new username value? Is it even possible?

Answer 1

I think you are experiencing the problem b/c while the plain JS file was executing, the JSX file was still being translated by the JSXTransformer, thus has not been processed by the browser. Therefore symbols inside the JSX files were not yet defined

There are two approaches I would recommend:

For Development/Prototypes purposes: add /** @jsx React.DOM */ to the plain JS file as well, and make sure to include this js file in the HTML page as type="text/jsx" so the Transformer will attempt to translate as well.

For code that is meant to go into production, install the jsx compiler npm install -g react-tools , then run jsx <src file> <output filename> to convert your JSX file to regular javascript

see this: http://facebook.github.io/react/docs/tooling-integration.html

p.s. you are wrapping your application entry point inside of a DOM.ready callback or something equivalent right?