如何将内联 babel 脚本转换为 JS

Question

我是 React JS 的新手，直接向 HTML 编写了一些 React JS 代码并且运行良好。

现在，当我使用 babel 转换器将此内联代码转换为 JS 时，使用 Online Babel Converter 和 link Converted JS 到 HTML，显示 UI 浏览器控制台上没有错误或警告 window。

我已经在 <script type="text/babel> ... </script> 标签中编写了内联 babel 脚本

注意：我在Online Babel Converter中使用默认选择的选项转换了内联代码，Settings中的Evaluate，[=21中的stage-2和react =]

Edit: Added some portion of code

<!DOCTYPE HTML>
<html>
    <body>
        <script type="text/babel>
            class App extends React.Component {
                createCircles = () => {
                let circles = [];
            
                for(let i = 1; i <= this.props.count; i++){
                    circles.push(<div className = "smallCircle" id={'circle'+i} key={i}><code className="circles" id={'id'+i}>{i}</code></div>);
                }
                                
                return circles;
            }
                        
                render(){
                    return (
                        <div id="circles">
                            <div className = "bigCircle" id="bigCircle">
                                <img id="bigCircleImage" src="http://localhost" />
                            </div>
                            <div className = "smallCircles">
                                {this.createCircles()}
                            </div>
                        </div>
                    );
                 }
            }
            
            function AppLoader(){
                return (
                    <App />
                );
            }
                        
            ReactDOM.render(<AppLoader />, document.getElementById('root'));
        </script>
        <div id="root"></div>
    </body>
</html>

Answer 1

同意@JoeWarner 的回答，如果您不返回多个组件，则不要使用额外的 AppLoader 函数。

问题来了，我看到你把脚本写在了id root的div标签之前。转换脚本后，导入标签下方的脚本以查看更改

如何将内联 babel 脚本转换为 JS

How to convert inline babel script to JS

html

javascript

inline

reactjs

babeljs