'How to convert inline babel script to JS

I am new to React JS and written some React JS code directly to HTML and it is working fine.

Now when I converted this inline code to JS using babel converter using Online Babel Converter and link the Converted JS to HTML, it is showng the blank the UI with no error or warning on browser console window.

I've written the inline babel script in <script type="text/babel> ... </script> tag

Note: I converted the inline code with default selected options in Online Babel Converter, Evaluate in Settings, stage-2 & react in Presets

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>
javascripthtmlreactjsinlinebabeljs


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions