javascript - 从 Babel browser.min.js 学习 React、TypeError

标签 javascript reactjs babeljs

正在尝试学习 React.js 并且正在骑行。我在这里看到了很多类似的问题,并尝试了通过切换版本和更改语法(React 和 React.DOM,html 周围的括号)的解决方案,但没有运气。其他人也表示不再支持它。如果是这种情况,我不知道从这里该去哪里,因为我很新并且正在从旧教程中学习。任何帮助或见解都会有所帮助,谢谢。

<html>
<head>
<title>My First Component</title>
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
  <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>-->
</head>
<body>
    <div id="HelloMessage"></div>
    <script type="text/babel">
        var HelloMessage = React.createClass({
            render: function(){
                return <div>Hello World</div>;
            }
        });

        React.render(
            <HelloMessage />,
            document.getElementById('HelloMessage');
        );
    </script>
</body>
</html>

给我类型错误:

enter image description here

最佳答案

这是因为,虽然你有babel-core ,您没有必要的preset-react babel的配置.

因此,babel不知道如何处理jsx .

例如:

return <div>Hello World</div>;

documentation将向您展示几种包含必要预设的方法。

关于javascript - 从 Babel browser.min.js 学习 React、TypeError,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42788668/

相关文章:

javascript - 在 Javascript 中生成真正的随机数

javascript - 如何使用 Jade 和 Node.js 迭代 JSON 数组

javascript - 如何将日期从 2018-04-29 格式转换为 29 Apr,2018 格式?

javascript - 与流沙的冲突

javascript - Mocha 6,巴别塔 7,ES6 : SyntaxError: Unexpected token export

webpack - 如何获取字符串形式的 JSX?

javascript - es6 模块到 commonjs,在 node harmony 标志下使用 typescript

reactjs - React Native 跨平台代码库

javascript - 未捕获的类型错误 : Cannot read property 'get' of null in map function

reactjs - 从 React-Final-Form 中的字段验证函数访问所有表单值