I am using broswerify to translate my jsx code. But how can I insert Django template variable to react code after it has been converted to javascript? For example:
In my Django views.py:
def index(request):
return render(request, 'index.html', {"hello":"hello"})
In component.jsx
var React = require('react')
var ReactDOM = require('react-dom');
var Component = React.createClass({
render: function(){
return (
<div>{this.props.content}</div>
);
},
});
Then use browserify -t [ babelify --presets [ react ] ] component.jsx -o bundle.js to convert component.jsx to bundle.js.
In index.html:
<html>
...
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<div id="container"></div>
<script src="bundle.js"></script>
<script type="text/babel">
ReactDOM.render(
<Component content={{hello}} />,
document.getElementById('container')
);
</script>
</body>
<html>
The problem is that in index.html, the browser complains that <Component> is undefined since browserify has transformed jsx into original javascript code.
