Как конвертировать встроенный скрипт Babel в JS - PullRequest
Новая
       7

Как конвертировать встроенный скрипт Babel в JS

0 голосов
/ 29 октября 2018

Я новичок в React JS и написал код React JS непосредственно в HTML, и он работает нормально.

Теперь, когда я преобразовал этот встроенный код в JS, используя Babel Converter, используя Online Babel Converter и связал Converted JS с HTML, он показывает пустое значение UI без ошибок или предупреждений. в окне консоли браузера.

Я написал встроенный скрипт babel в теге <script type="text/babel> ... </script>

Примечание: я преобразовал встроенный код с выбранными по умолчанию параметрами в Онлайн-конвертер Babel , Evaluate в Settings, stage-2 & react в Presets

Редактировать: Добавлена ​​некоторая часть кода 

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

Пожалуйста, помогите ...

1 Ответ

0 голосов
/ 29 октября 2018

Согласился с ответом @JoeWarner, чтобы не использовать дополнительную функцию AppLoader, если вы не возвращаете более одного компонента.

Переходя к вопросу, я увидел, что вы написали скрипт перед тегом div id root. После преобразования вашего скрипта импортируйте скрипт под тегом, чтобы увидеть изменения

...