Hello World не работает на JSBin

Что не так с моей простой попыткой "Привет мир"? Вот JSBin

class Hello extends React.Component {
  render() {
    return(
      <h1>Hello {this.props.name}</h1>
    )
  }
}

React.render(
  <Hello name="World!"/>,
  document.getElementById('name');
)
Источник

2 ответа

Решение

Это очень недавнее изменение, введенное с 0.14. Они разделили React на библиотеку ядра и адаптер DOM. Рендеринг теперь выполняется через ReactDOM.render()

Так как вы используете версию 15.1.0, вы должны использовать ReactDOM.render(), и для этого вам нужно включить response-dom в качестве зависимости в ваш jsbin html как

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

Также в ReactDOM.render вам нужно поставить точку с запятой после ReactDOM.render(); а не внутри.

Вот рабочий фрагмент.

class Hello extends React.Component {
  render() {
    return(
     <h1>Hello {this.props.name}</h1>
    )
  }
}

ReactDOM.render(
   <Hello name="World!"/>,
  document.getElementById('name')
);
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<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> 
  <div id="name"></div>
</body>
</html>

Источник

Вы рендеритесь в DOM с модулем ReactDOMотдельно от React:

ReactDOM.render(<Hello name="World!" />, document.getElementById("name"));

Кроме того, ваша точка с запятой была неуместна. Помните, ReactDOM это другой модуль. Согласно документации:

Пакет реагирует на DOM-методы, которые можно использовать на верхнем уровне вашего приложения...

ReactDOM.render

render(
  ReactElement element,
  DOMElement container,
  [function callback]
)
Источник
Другие вопросы по тегам