Menu
I'm doing the React.js tutorial from http://facebook.github.io/react/docs/tutorial.html. Here are my files:
template.html:
<html> <head> <title>Hello React</title> <script src="http://fb.me/react-0.8.0.js"></script> <script src="http://fb.me/JSXTransformer-0.8.0.js"></script> <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script> </head> <body> <div id="content"></div> <script type="text/jsx" src='tut.js'> </script> </body> </html> and tut.js:
/** @jsx React.DOM */ var data = [ {author: 'Tldr', text: 'This is a comment'} ] var CommentBox = React.createClass({ render: function() { return ( <div className='commentBox'> <h1>Comments</h1> <CommentList data={this.props.data} /> <CommentForm /> </div> ) } }) var CommentList = React.createClass({ render: function() { var commentNodes = this.props.data.map(function(comment) { return <Comment author={comment.author}>{comment.text}</Comment> }) return ( <div className='commentList'> {commentNodes} </div> ) } }) var CommentForm = React.createClass({ render: function() { return ( <div className='commentForm'> Hello World, I am a comment </div> ) } }) var Comment = React.createClass({ render: function() { return ( <div className='comment'> <h2 className='commentAuthor'> {this.props.author} </h2> {this.props.children} </div> ) } }) React.renderComponent( <CommentBox data={data} />, document.getElementById('content') ) But when I open it in the browser, I just see a blank page without any comments. What am I doing wrong?
307
Both HTML and CSS are integral to any web development project. If you have these skills already, then learning React should be a relatively straightforward process. It has its own unique set of challenges, but it is an excellent tool to have in order to start or further your career as a web developer.
React Javascript is an indisputably great language for programming web pages and applications, and within that JS spectrum, it is still unchallenged. There are other players in the arena, but professional web app developers would confirm that React still remains on top of others in 2022.
Chrome doesn't let you load file:// urls via XHR (which as mentioned elsewhere is how the in browser transform works). You have a couple options:
148
The following command works for me. But before the command, you may need to stop chrome process anyhow, can be from task manager.
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security
Second way, you can also use --allow-file-access-from-files flag in the chrome shortcut properties. But this is recommended only for developing purpose.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
