Tôi đang cố gắng bắt đầu xây dựng một trang web trong ReactJS. Tuy nhiên, khi tôi cố gắng đặt JS của mình vào một tệp riêng biệt, tôi bắt đầu gặp lỗi này: "Uncaught SyntaxError: Bất ngờ mã thông báo <".
Tôi đã thử thêm /** @jsx React.DOM */vào đầu tệp JS, nhưng nó không sửa được gì. Dưới đây là các tệp HTML và JS. Bất kỳ ý tưởng về những gì đang xảy ra?
HTML
<html>
<head>
<title>Page</title>
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"> </script>
<script src="./lander.js"> </script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
React.render(
<Lander />,
document.getElementById('content')
);
</script>
</body>
</html>
JS
/**
* @jsx React.DOM
*/
var Lander = React.createClass({
render: function () {
var info = "Lorem ipsum dolor sit amet... ";
return(
<div>
<div className="info">{info}</div>
</div>
);
}
});
CHỈNH SỬA: Tôi nhận ra rằng tôi cần thêm type="text/jsx"vào thẻ tập lệnh bao gồm mã tàu đổ bộ của tôi. Tuy nhiên, sau khi thêm cái này và tải lại, tôi nhận được cảnh báo này
"Bạn đang sử dụng trình biến áp JSX trong trình duyệt. Hãy nhớ biên dịch trước JSX của bạn để sản xuất - http://facebook.github.io/react/docs/tooling-integration.html#jsx "
tiếp theo là lỗi này:
"XMLHttpRequest không thể tải tệp: ///Users/.../lander.js. Yêu cầu nguồn chéo chỉ được hỗ trợ cho các lược đồ giao thức: http, data, chrome-extension, https, chrome-extension-resource."
Có vẻ như tôi cần phải làm gì đó khác để chuyển đổi jsx của trình duyệt hoạt động, nhưng tôi không chắc đó là gì.
CHỈNH SỬA: OOOOH tôi có cần lưu trữ nó bằng MAMP hay cái gì đó không?
type="text/babel"vào thẻ tập lệnh nơi tôi đang nhập tệp JS của mình và tập lệnh Babel mà @Steven đã đề cập trong nhận xét ở trên đã hoạt động với tôi.