Невозможно просмотреть вывод в React Js?

Я использую responseJS для создания группы кнопок. Однако я не могу просмотреть результат (на экране ничего не отображается). Я правильно создал класс реакции и визуализировал HTML с помощью babel. Вот код. Пожалуйста, выясните, в чем я ошибаюсь, почему на экране ничего не печатается.

Я импортировал CDN необходимых файлов.

реагировать-min.js
реагировать-dom.min.js
browser.min.js
babel.js

`` Главный

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel = "stylesheet" />
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />


<script src = "browser.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<style>

    #side{
        position: fixed;
        width:10%;
        height:100%;
        background-color: black;
        border:2px solid black;
        color:white;
        z-index: -1;
    }
    #buttons{
        position: fixed;
        top:10%;
        left:2%;
        color:white;
    }

</style>

<div id = "side"></div>

<div id = "buttons"></div>



<script type = "text/babel">

    var side = React.createClass({
        render:function(){
            return
            (
                <div>
                    <div id = "Profile">
                        <button class = "btn btn-danger">Profile</button>
                    </div>
                    <div id = "Maps">
                        <button class = "btn btn-primary">Maps</button>
                    </div>
                    <div id = "video">
                        <button class = "btn btn-danger">Video</button>
                    </div>
                </div>

            );
    }

});

ReactDOM.render(
    <side />,
    document.getElementById('buttons'));

</script>

reactjs

08.12.2018 16:22

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Ответы 1

Имена компонентов React должны начинаться с Заглавная буква.

Изменять

var side = React.createClass({
  ...
});

ReactDOM.render(
  <side />,
  document.getElementById('buttons')
);

var Side = React.createClass({
  ...
});

ReactDOM.render(
  <Side />,
  document.getElementById('buttons')
);

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

Добавление исполняемого кода для наглядности

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel = "stylesheet" />
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />


<script src = "browser.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<style>
  #side {
    position: fixed;
    width: 10%;
    height: 100%;
    background-color: black;
    border: 2px solid black;
    color: white;
    z-index: -1;
  }
  
  #buttons {
    position: fixed;
    top: 10%;
    left: 2%;
    color: white;
  }
</style>
<div id = "side"></div>

<div id = "buttons"></div>



<script type = "text/babel">

  var Side = React.createClass({ render:function(){ return (
  <div>
    <div>Hello World</div>
    <div id = "Profile">
      <button class = "btn btn-danger">Profile</button>
    </div>
    <div id = "Maps">
      <button class = "btn btn-primary">Maps</button>
    </div>
    <div id = "video">
      <button class = "btn btn-danger">Video</button>
    </div>
  </div>

  ); } }); ReactDOM.render(
  <Side />, document.getElementById('buttons'));

</script>

Извините, но это не помогает. По-прежнему нет выхода.

— 08.12.2018 16:40

@ diablo007 Я добавил в ответ исполняемый код, и вы видите, что он работает.

— 08.12.2018 16:45

Да, сработало. А бутстрап не загружается по кнопкам?

— 08.12.2018 16:47

08.12.2018 16:32