Нужна помощь по React Js

Я новичок в React Js, и мой код не работает. Пожалуйста, посмотрите ниже:

Это мой файл сценария Main.jsx. Этот файл компилируется с помощью реакции, а вывод помещается в файл main.js в папке «dist».

var react = require("react"),
reactDom = require("react-dom");
var myComponent = react.createClass({
    render: function () {
        return <div><h4>I am rendered by react.</h4></div>;
    }
});

reactDom.render(<myComponent />, document.getElementById("basicDiv"));

Это Index.html.

<html>    
<head>
    <base href="./" />
    <title>App title</title>    
    <script src="node_modules/react/dist/react.js"></script>
    <script src="node_modules/react/dist/react-with-addons.js"></script>
    <script src="node_modules/react-dom/dist/react-dom.js"></script>
</head>

<body>
    <div id="basicDiv"></div>

    <!-- React compiled code is in dist folder and is accessible -->
    <script src="dist/main.js"></script>
</body>

</html>

Когда я запускаю файл index.html в браузере, вывод пустой экран. См. приведенный ниже снимок экрана с окном инспектора chrome dev tools:

Вывод в браузере

Содержимое myComponent не отображается в браузере. Я видел много руководств с одним и тем же кодом, но он не работает... не знаю почему.

Пожалуйста, помогите в этом и, если возможно, предоставьте мне несколько примеров кода / руководств для последних выпусков. заранее спасибо

Обновить

Обратите внимание, что я включил ссылку на библиотеку React в свой файл HTML, что позволяет мне свободно использовать «React» или «реагировать» в качестве имени переменной при импорте React в мои файлы сценариев. Использование «React» (с большой буквы R) в качестве имени переменной в этом случае не является обязательным.

Последнее обновление

Таким образом, решение (как ответил Дэмиен Леру) состоит в том, чтобы имя переменной компонента реакции начиналось с заглавной буквы. «var myComponent» должен быть «var MyComponent» или «var Mycomponent».


reactjs javascript html jsx dom
person Shivam    schedule 03.11.2016    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Класс реакции всегда должен начинаться с буквы верхнего регистра:

var MyComponent = react.createClass({

читать определяется пользователем -компоненты-должны быть написаны с большой буквы

person Damien Leroux    schedule 03.11.2016
comment
Вы гений на этой странице человек .... спасибо. Я изменил var myComponent на var MyComponent. Сейчас это работает. - person Shivam; 04.11.2016

arrow_upward
2
arrow_downward

Не только ваш компонент React должен начинаться с заглавной буквы. Смотрите это:

React — добавление компонента после AJAX для просмотра

но вы также должны импортировать реакцию, например

var React = require("react"),
ReactDom = require("react-dom");

то есть буквы верхнего регистра, поскольку внутри JSX транспилируется в React.createElement(), и в этом случае будет сказано, что реакция не определена.

Ваш код должен выглядеть так

var React = require("react"),
ReactDom = require("react-dom");
var MyComponent = React.createClass({
    render: function () {
        return <div><h4>I am rendered by react.</h4></div>;
    }
});

ReactDom.render(<MyComponent />, document.getElementById("basicDiv"));
person Shubham Khatri    schedule 03.11.2016
comment
››поскольку реакция внутри использует React.createElement(), и в этом случае будет сказано, что реакция не определена. ..... Чтобы противостоять этой ошибке, я включил ссылку на React в свой html. Я не получаю эту ошибку с переменной без заглавной буквы для импорта реакции. Хотя это не решает проблему, которую я объяснил на скриншоте выше... - person Shivam; 03.11.2016
comment
Я бы посоветовал вам использовать Webpack для связывания вашего кода. Следуйте инструкциям YouTube React от LeanCodeAcademy. - person Shubham Khatri; 03.11.2016
comment
да @Shubham Khatri, я бы использовал что-то вроде веб-пакета, но, поскольку я начинаю реагировать, я хочу вручную пройти через всю эту загрузку библиотеки и все такое. - person Shivam; 04.11.2016
comment
@Shivam Лучше сразу начать с webpack. Я где-то читал, что браузерная поддержка babel была прекращена, это также может быть причиной, по которой вы столкнулись с этой проблемой. - person Shubham Khatri; 04.11.2016