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 ponents into my view as soon as it is loaded. Initially in this script file I don't have any data to show in my ponent, so I don't render any of my sub ponents. However at some later point, when I receive data from, say a web service, I would very much like to render the ponents again with that data.

The ponents 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 ponents with initially no data specified in the JSX file itself. However when I try to render that ponent again in another Javascript file, it gives me a reference error, ponent 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 ponents 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 ponent 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={'/' + this.props.username + '/picture'} />
);
}
});

var ProfileLink = React.createClass({
render: function() {
return (
  <a href={'/' + 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 ponent in the heirarchy), the problem is how can we re-rennder the Avatar ponent 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 ponent 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?

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 ponents into my view as soon as it is loaded. Initially in this script file I don't have any data to show in my ponent, so I don't render any of my sub ponents. However at some later point, when I receive data from, say a web service, I would very much like to render the ponents again with that data.

The ponents 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 ponents with initially no data specified in the JSX file itself. However when I try to render that ponent again in another Javascript file, it gives me a reference error, ponent 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 ponents 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 ponent 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./' + this.props.username + '/picture'} />
);
}
});

var ProfileLink = React.createClass({
render: function() {
return (
  <a href={'http://www.facebook./' + 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 ponent in the heirarchy), the problem is how can we re-rennder the Avatar ponent 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 ponent 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?

• javascript
• reactjs

• 1 Could you paste some code that you're trying to get to work? – Henrik Andersson Commented Oct 30, 2014 at 10:57
• There's not enough information in this question to answer it. Please include code samples, how you're converting jsx to js, and the page html. It's most likely a typo or minor mistake. – Brigand Commented Oct 30, 2014 at 13:33

1 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 remend:

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 piler 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?