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?

Could you paste some code that you're trying to get to work? — Henrik Andersson
– 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
– Brigand, Commented Oct 30, 2014 at 13:33

echen · Accepted Answer · 2014-10-30 21:32:30Z

3

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?

edited Oct 30, 2014 at 21:32

answered Oct 30, 2014 at 21:26

echen

2,0822 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lakmal Caldera Over a year ago

I'm not too sure using that tool will help.. According to FB, you only need to do the conversion is when before putting into production enviornment.

Lakmal Caldera Over a year ago

I don't think the react components are actually meant to be accessed outside of the jsx script in a javascript file. This might be a violation of the architecture they are trying to implement, i.e. the one way data flow. Instead we might have to use states to passing the data on the component life cycle methods each time the component loads. What doesn't make sense is you still need a reference to that component outside the jsx script to set a new state for the component.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related