前面有一期,我讲了Angular和react的区别,说Angular更有前途一些,结果有很多程序员发表了很多不同的声音,当然也有很多赞同的。其中有一些读者特别希望我也讲一下Vue,这一期,我就来谈一下这三个前端框架。 说实在的,因为前端开发框架变化比较快,所以你在选择前端开发框架的时候会有很多困难,这对每个人都是一样的。 我们目前比较流行的三大前端框架,一个是Angular来自Google,一个是React来自Facebook,另外一个是Vue,虽然没有大公司支持,但是也比较流行。 对于这三大框架来说,你不太可能一上来就把三个都学了,你要选择其中一个来做。一旦你掌握了一种框架,要想学另外一种框架的话,就会变得更容易。因为这些框架的一些技术细节虽然不同,但是框架的共同点非常多,尤其是在关键的部分都是相通的。 简单地说,他们共同的一些理念就是: 单页应用程序理念, 组件管理, 数据是怎么流动的?…
September 22, 2020
React报错: Uncaught SyntaxError: Unexpected token < in React
我创建了一个index.html,就像:
<!DOCTYPE html> <html lang="en"> <head> <title>React Example</title> <script crossorigin="anonymous" src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/javascript" src="myScript.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> ReactDOM.render(<MyTag />, document.getElementById("root")); </script> </body> </html>
我的react(myScript.js)文件如下所示:
class MyTag extends React.Component { render() { return <h1>Hello</h1>; } }
现在,我尝试运行此代码,这给了我错误,Uncaught SyntaxError:在行的意外标记<return <h1>Hello</h1>;
我该如何解决这个问题?
您有两个问题:
1)您要求加载babel!
<script type="text/javascript" src="myScript.js"></script> #改为 <script type="text/babel" src="/apis/flight-search-box/js/flight-form.js"></script>
2)不要 babel 支持的话,可以用浏览器直接解析的方法:
var CommentForm = React.createClass({ getInitialState: function() { return {author: '', text: ''}; }, // <---- DON'T FORGET THE COMMA render: function() { return ( <form className="commentForm"> <input type="text" placeholder="Nombre" /> <input type="text" placeholder="Qué opina" /> <input type="submit" value="Publicar" /> </form> ) } });
或者
'use strict'; const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return 'You liked this.'; } return e( 'button', { onClick: () => this.setState({ liked: true }) }, 'Like' ); } } const domContainer = document.querySelector('#like_button_container'); ReactDOM.render(e(LikeButton), domContainer);
也就是说,用 React.createClass 或者 React.createElement 代替!
本文:React报错: Uncaught SyntaxError: Unexpected token < in React